构建Telegram多级按钮菜单与状态管理教程

构建Telegram多级按钮菜单与状态管理教程

本教程旨在指导开发者如何使用 `python-telegram-bot` 库创建具有多级交互式按钮菜单的telegram机器人,并有效管理用户会话状态,特别适用于如费用追踪等需要引导用户完成多步操作的场景。核心内容将聚焦于 `conversationhandler` 的应用,以实现流畅、逻辑清晰的用户交互流程。

引言:构建交互式Telegram机器人的挑战

在开发Telegram机器人时,尤其当需要引导用户完成一系列选择或输入时,创建一个直观且响应迅速的用户界面至关重要。例如,一个费用追踪机器人可能需要用户首先选择“收入”或“支出”,然后进入二级分类(如“工资”、“餐饮”),再到三级分类(如“基本工资”、“早餐”),最后输入金额和描述。这种多级选择的交互模式,如果处理不当,很容易导致代码混乱、状态管理困难,甚至用户体验不佳。

原有的实现尝试通过全局变量和手动判断 callback_data 来管理流程,但随着交互深度的增加,这种方法变得难以维护且容易出错,尤其是在处理并发用户请求时。核心问题在于缺乏一种机制来追踪特定用户在对话中的当前“状态”。

解决方案:使用 ConversationHandler 进行状态管理

python-telegram-bot 库提供了一个强大的工具 ConversationHandler,它专门用于处理有状态的、多步的对话流程,也被称为有限状态机(FSM)。ConversationHandler 允许开发者定义一系列“状态”,并为每个状态指定相应的处理器,从而清晰地管理用户在对话中的每一步。

ConversationHandler 的核心概念

Entry Points (入口点): 启动对话的触发器,通常是命令(如 /start)。States (状态): 对话中的不同阶段,每个状态都有其对应的处理器来响应用户输入。状态可以是自定义的常量(例如 SELECT_LEVEL1, SELECT_LEVEL2, ENTER_AMOUNT_DESCRIPTION)。Handlers (处理器): 针对特定更新类型(如 CommandHandler, CallbackQueryHandler, MessageHandler)在特定状态下执行的函数。Fallbacks (回退点): 当用户输入不符合任何当前状态的预期时,用于结束或重置对话的处理器,例如 /cancel 命令。

改造费用追踪机器人

我们将使用 ConversationHandler 来重构费用追踪机器人,使其能够顺畅地引导用户完成三级分类选择,并最终记录金额和描述。

1. 定义对话状态

首先,定义机器人可能处于的各个状态。这些状态将指导 ConversationHandler 如何响应用户的输入。

表单大师AI 表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具,可以帮助用户快速、高效地生成各类专业表单。

表单大师AI 74 查看详情 表单大师AI

# 定义对话状态SELECT_LEVEL1, SELECT_LEVEL2, SELECT_LEVEL3, ENTER_AMOUNT_DESCRIPTION = range(4)

2. 数据结构优化

为了更好地与多级菜单交互,原始的类别数据结构需要优化。我们可以将其转换为一个嵌套的字典或列表,以便于查找子类别。

# 假设 categories_data 是从 Google Sheet 获取的原始数据# 优化后的类别结构示例# {#     "Income": {#         "id": "1",#         "subcategories": {#             "Sueldo": {#                 "id": "101",#                 "subcategories": {#                     "Salario": {"id": "1011"},#                     "Propinas": {"id": "1012"},#                     # ...#                 }#             },#             # ...#         }#     },#     "Expense": {#         # ...#     }# }def build_nested_categories(raw_data):    nested_categories = {}    for item in raw_data:        l1_name = item.get("level1")        l2_name = item.get("level2")        l3_name = item.get("level3")        item_id = str(item.get("id"))        if l1_name and not l2_name and not l3_name: # Level 1 category            if l1_name not in nested_categories:                nested_categories[l1_name] = {"id": item_id, "subcategories": {}}        elif l2_name and not l3_name: # Level 2 category            for l1_key in nested_categories:                if l1_key == l1_name: # Find its parent                    if l2_name not in nested_categories[l1_key]["subcategories"]:                        nested_categories[l1_key]["subcategories"][l2_name] = {"id": item_id, "subcategories": {}}                    break            else: # If no explicit L1 parent in data, try to infer or handle                # This part might need more robust logic if L1 is not always explicit                pass        elif l3_name: # Level 3 category            for l1_key in nested_categories:                if l1_key == l1_name:                    for l2_key in nested_categories[l1_key]["subcategories"]:                        if l2_key == l2_name:                            nested_categories[l1_key]["subcategories"][l2_key]["subcategories"][l3_name] = {"id": item_id}                            break                    break    return nested_categories# 假设 categories_data 已经从 Google Sheet 读取# nested_categories = build_nested_categories(categories_data)# 为了简化示例,我们假设 nested_categories 是一个全局变量或通过 context 传递

注意: 原始 categories 列表的构建方式是线性的,不利于按层级检索。上述 build_nested_categories 示例展示了如何将其转换为嵌套结构,这对于 ConversationHandler 中的层级导航至关重要。在实际应用中,您需要根据 Google Sheet 的实际结构调整构建逻辑。

3. 编写状态处理器函数

每个状态都需要一个或多个处理器函数来生成按钮、响应用户点击并推进对话到下一个状态。

# 假设 `nested_categories` 已经从 Google Sheet 加载并处理成嵌套结构# 全局或通过 context 传递,此处简化为全局# 例如:# nested_categories = {#     "Income": {#         "id": "1",#         "subcategories": {#             "Sueldo": {"id": "101", "subcategories": {"Salario": {"id": "1011"}, "Propinas": {"id": "1012"}}},#             "Otro Ingreso": {"id": "102", "subcategories": {"Transferencia de ahorros": {"id": "1021"}}}#         }#     },#     "Expense": {#         "id": "2",#         "subcategories": {#             "Diarios": {"id": "201", "subcategories": {"Comida": {"id": "2011"}, "Restaurantes": {"id": "2012"}}},#             "Vivienda": {"id": "202", "subcategories": {"Renta": {"id": "2021"}}}#         }#     }# }async def start(update, context):    """开始对话,显示一级分类按钮"""    keyboard = []    for category_name, category_data in nested_categories.items():        # callback_data 格式: "level1_{category_name}"        keyboard.append([InlineKeyboardButton(category_name, callback_data=f"level1_{category_name}")])    reply_markup = InlineKeyboardMarkup(keyboard)    await update.message.reply_text("请选择一个一级分类:", reply_markup=reply_markup)    return SELECT_LEVEL1 # 返回下一个状态async def select_level1(update, context):    """处理一级分类选择,显示二级分类按钮"""    query = update.callback_query    await query.answer() # 必须回答回调查询    data_parts = query.data.split('_')    selected_l1_name = data_parts[1]    # 存储用户选择到 context.user_data    context.user_data['level1'] = selected_l1_name    l1_category = nested_categories.get(selected_l1_name)    if not l1_category or not l1_category.get("subcategories"):        await query.edit_message_text("此分类下无子分类。请重新开始。", reply_markup=None)        return ConversationHandler.END # 结束对话    keyboard = []    for l2_name, l2_data in l1_category["subcategories"].items():        # callback_data 格式: "level2_{l1_name}_{l2_name}"        keyboard.append([InlineKeyboardButton(l2_name, callback_data=f"level2_{selected_l1_name}_{l2_name}")])    reply_markup = InlineKeyboardMarkup(keyboard)    await query.edit_message_text(f"您选择了 '{selected_l1_name}'。请选择一个二级分类:", reply_markup=reply_markup)    return SELECT_LEVEL2 # 返回下一个状态async def select_level2(update, context):    """处理二级分类选择,显示三级分类按钮"""    query = update.callback_query    await query.answer()    data_parts = query.data.split('_')    selected_l1_name = data_parts[1]    selected_l2_name = data_parts[2]    context.user_data['level2'] = selected_l2_name    l1_category = nested_categories.get(selected_l1_name)    l2_category = l1_category["subcategories"].get(selected_l2_name)    if not l2_category or not l2_category.get("subcategories"):        await query.edit_message_text("此分类下无三级分类。请提供金额和描述。", reply_markup=None)        await query.message.reply_text("请输入金额和描述(例如:100 晚餐)。")        return ENTER_AMOUNT_DESCRIPTION # 如果没有三级分类,直接进入金额描述阶段    keyboard = []    for l3_name, l3_data in l2_category["subcategories"].items():        # callback_data 格式: "level3_{l1_name}_{l2_name}_{l3_name}"        keyboard.append([InlineKeyboardButton(l3_name, callback_data=f"level3_{selected_l1_name}_{selected_l2_name}_{l3_name}")])    reply_markup = InlineKeyboardMarkup(keyboard)    await query.edit_message_text(f"您选择了 '{selected_l2_name}'。请选择一个三级分类:", reply_markup=reply_markup)    return SELECT_LEVEL3 # 返回下一个状态async def select_level3(update, context):    """处理三级分类选择,并请求金额和描述"""    query = update.callback_query    await query.answer()    data_parts = query.data.split('_')    # selected_l1_name = data_parts[1] # 此时不再需要,已在 user_data 中    # selected_l2_name = data_parts[2]    selected_l3_name = data_parts[3]    context.user_data['level3'] = selected_l3_name    await query.edit_message_text(f"您选择了 '{selected_l3_name}'。")    await query.message.reply_text("请输入金额和描述(例如:100 晚餐)。")    return ENTER_AMOUNT_DESCRIPTION # 返回下一个状态async def enter_amount_description(update, context):    """处理金额和描述输入,并记录数据"""    text_input = update.message.text    # 简单的解析金额和描述,实际应用中可能需要更复杂的正则或验证    try:        parts = text_input.split(' ', 1)        amount = float(parts[0])        description = parts[1] if len(parts) > 1 else ""    except (ValueError, IndexError):        await update.message.reply_text("输入格式不正确。请重新输入金额和描述(例如:100 晚餐)。")        return ENTER_AMOUNT_DESCRIPTION # 停留在当前状态,等待正确输入    context.user_data['amount'] = amount    context.user_data['description'] = description    # 假设 sheetIn 是 GSpread 工作表对象    # 记录数据到 Google Sheets    # 注意:这里需要确保 context.user_data 包含所有需要记录的字段    # 例如:sheetIn.append_row([context.user_data.get('level1'), context.user_data.get('level2'), context.user_data.get('level3'), amount, description])    await update.message.reply_text("记录成功!对话结束。")    return ConversationHandler.END # 结束对话async def cancel(update, context):    """取消对话"""    await update.message.reply_text("对话已取消。")    return ConversationHandler.END # 结束对话async def unknown_command(update, context):    """处理未知命令"""    await update.message.reply_text("抱歉,我无法识别此命令。")async def handle_invalid_input(update, context):    """处理无效的按钮点击或消息,防止卡顿"""    await update.callback_query.answer()    await update.callback_query.edit_message_text("无效操作或超时,请重新开始 `/start`。")    return ConversationHandler.END

4. 配置 ConversationHandler

在 main 函数中,创建 ConversationHandler 实例并将其添加到 Application。

from telegram.ext import Application, CommandHandler, CallbackQueryHandler, MessageHandler, filters, ConversationHandlerfrom telegram import InlineKeyboardButton, InlineKeyboardMarkupimport asyncioimport loggingimport gspreadfrom oauth2client.service_account import ServiceAccountCredentials# 配置日志logging.basicConfig(    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s", level=logging.INFO)logger = logging.getLogger(__name__)# Telegram bot tokenTELEGRAM_BOT_TOKEN = 'YOUR_TELEGRAM_BOT_TOKEN' # 替换为你的Bot Token# Google Sheets credentialsGOOGLE_SHEET_ID = 'YOUR_GOOGLE_SHEET_ID' # 替换为你的Google Sheet IDSHEET_NAMEIn = 'MySheetAnswers'SHEET_NAME = 'MyCategoryList'SCOPE = ['https://spreadsheets.google.com/feeds', 'https://www.googleapis.com/auth/drive']CREDS_JSON = 'path/to/your/credentials.json' # 替换为你的JSON凭证文件路径# Authenticate with Google Sheetstry:    creds = ServiceAccountCredentials.from_json_keyfile_name(CREDS_JSON, SCOPE)    client = gspread.authorize(creds)    sheetIn = client.open_by_key(GOOGLE_SHEET_ID).worksheet(SHEET_NAMEIn) # 用于记录答案    sheet = client.open_by_key(GOOGLE_SHEET_ID).worksheet(SHEET_NAME) # 用于读取分类    # Fetch categories from the Google Sheet    categories_data = sheet.get_all_records()    # 构建嵌套类别结构    nested_categories = {}    for category in categories_data:        level1 = category.get("level1")        level2 = category.get("level2")        level3 = category.get("level3")        item_id = str(category.get("id"))        if level1 and not level2 and not level3:            if level1 not in nested_categories:                nested_categories[level1] = {"id": item_id, "subcategories": {}}        elif level2 and not level3:            # 查找或创建一级分类            l1_parent_name = next((c.get("level1") for c in categories_data if c.get("id") == int(item_id[:1]) and c.get("level1")), None)            if l1_parent_name and l1_parent_name in nested_categories:                if level2 not in nested_categories[l1_parent_name]["subcategories"]:                    nested_categories[l1_parent_name]["subcategories"][level2] = {"id": item_id, "subcategories": {}}        elif level3:            # 查找或创建二级分类            l1_parent_name = next((c.get("level1") for c in categories_data if c.get("id") == int(item_id[:1]) and c.get("level1")), None)            l2_parent_name = next((c.get("level2") for c in categories_data if c.get("id") == int(item_id[:3]) and c.get("level2")), None)            if l1_parent_name and l2_parent_name and                l1_parent_name in nested_categories and                l2_parent_name in nested_categories[l1_parent_name]["subcategories"]:                nested_categories[l1_parent_name]["subcategories"][l2_parent_name]["subcategories"][level3] = {"id": item_id}    logger.info("Categories loaded and nested structure built.")except Exception as e:    logger.error(f"Error authenticating with Google Sheets or loading categories: {e}")    # 在生产环境中,可能需要更优雅的错误处理,例如机器人无法启动或发送错误消息# 定义对话状态SELECT_LEVEL1, SELECT_LEVEL2, SELECT_LEVEL3, ENTER_AMOUNT_DESCRIPTION = range(4)async def start(update, context):    """开始对话,显示一级分类按钮"""    keyboard = []    # 确保 nested_categories 是一个字典,且包含有效的键    if not nested_categories:        await update.message.reply_text("抱歉,未能加载分类数据。请稍后再试。")        return ConversationHandler.END    for category_name in nested_categories.keys():        # callback_data 格式: "level1_{category_name}"        keyboard.append([InlineKeyboardButton(category_name, callback_data=f"level1_{category_name}")])    reply_markup = InlineKeyboardMarkup(keyboard)    await update.message.reply_text("欢迎!让我们开始记录您的费用。请选择一个一级分类:", reply_markup=reply_markup)    return SELECT_LEVEL1 # 返回下一个状态async def select_level1(update, context):    """处理一级分类选择,显示二级分类按钮"""    query = update.callback_query    await query.answer()    data_parts = query.data.split('_')    selected_l1_name = data_parts[1]    context.user_data['level1'] = selected_l1_name    l1_category = nested_categories.get(selected_l1_name)    if not l1_category or not l1_category.get("subcategories"):        await query.edit_message_text(f"'{selected_l1_name}' 下无子分类。请提供金额和描述。", reply_markup=None)        await query.message.reply_text("请输入金额和描述(例如:100 晚餐)。")        return ENTER_AMOUNT_DESCRIPTION    keyboard = []    for l2_name in l1_category["subcategories"].keys():        # callback_data 格式: "level2_{l1_name}_{l2_name}"        keyboard.append([InlineKeyboardButton(l2_name, callback_data=f"level2_{selected_l1_name}_{l2_name}")])    reply_markup = InlineKeyboardMarkup(keyboard)    await query.edit_message_text(f"您选择了 '{selected_l1_name}'。请选择一个二级分类:", reply_markup=reply_markup)    return SELECT_LEVEL2async def select_level2(update, context):    """处理二级分类选择,显示三级分类按钮"""    query = update.callback_query    await query.answer()    data_parts = query.

以上就是构建Telegram多级按钮菜单与状态管理教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/584722.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月10日 12:38:28
下一篇 2025年11月10日 12:42:25

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • SASS 中的 Mixins

    mixin 是 css 预处理器提供的工具,虽然它们不是可以被理解的函数,但它们的主要用途是重用代码。 不止一次,我们需要创建多个类来执行相同的操作,但更改单个值,例如字体大小的多个类。 .fs-10 { font-size: 10px;}.fs-20 { font-size: 20px;}.fs-…

    2025年12月24日
    000
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何解决本地图片在使用 mask JS 库时出现的跨域错误?

    如何跨越localhost使用本地图片? 问题: 在本地使用mask js库时,引入本地图片会报跨域错误。 解决方案: 要解决此问题,需要使用本地服务器启动文件,以http或https协议访问图片,而不是使用file://协议。例如: python -m http.server 8000 然后,可以…

    2025年12月24日
    200
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200

发表回复

登录后才能评论
关注微信