盒子萌-主题二次开发笔记

 
 

✨ 新增功能

 
 

👤 用户头像重构

文件位置: core/module/fun-gravatar.php

• 统一头像获取策略：实现了 Custom (自定义) > QQ Avatar (QQ头像) > Local Default (本地默认) 的降级策略
• 本地默认头像：当用户无自定义头像且非QQ邮箱时，返回主题内置默认头像 (assets/images/touxiang.jpg)
• QQ头像集成：支持识别 QQ 邮箱自动调用 QQ 头像，并支持多个 QQ 头像源 (Q1-Q4) 切换
• 后台自定义头像管理 (core/module/fun-admin.php)：

- 在“个人资料”页面增加自定义头像上传/选择功能
- 支持从媒体库选择图片
- 提供“移除自定义头像”和“重置为默认头像”的一键操作
- 增加头像预览功能，实时显示当前设置的头像
 
 
 
 

🪧 页面标语设置

文件位置: core/panel/settings/set-slogan.php · header.php · core/panel/includes/class-options-framework-admin.php

• 独立设置页：新增“页面标语设置”，位于“文章设置”下方（options.php 引入）
• 可配置文案：支持首页、文章、分类、标签、搜索、404、作者、日期、归档、页面默认，以及友链、会员中心模板专属标语；均提供默认值
• 前台输出：面包屑处的 span 文案从主题设置读取（header.php:275-304）
• 仅重置标语：在保存区域新增“重置标语”扁平圆角弹窗，只恢复标语相关键到默认值，不影响其它设置（class-options-framework-admin.php:223-304）
• 交互与样式：自定义圆角弹窗，按钮为“取消/确定”，确定后自动提交隐藏字段 reset_slogan=1 执行重置

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → 页面标语设置，填写各页面文案并保存
• 如需恢复默认，仅点击“重置标语”并在弹窗中确定

⏱️ 底部运行时间增强（运行天数 → 天/时/分/秒）

文件位置: core/module/fun-basis.php · assets/js/boxmoe.js · assets/css/style.css

• 结构升级：底部版权处将原单一“运行天数”改为“天/时/分/秒”四段显示，前缀文案支持自定义，附加 fa-clock-o 图标
• 实时刷新：前端每秒计算并刷新，自动级联递进（秒→分→时→天），支持未来时间回退保护（负值归零）
• 前后端衔接：开始时间通过主题设置下发到前端（ajax_object.running_days）
• 彩色视觉：四段数字分别赋色以增强可读性（橙/绿/紫/蓝）

代码寻找

• 渲染容器：wp-content/themes/lolimeow/core/module/fun-basis.php:223-230
• 前端逻辑：wp-content/themes/lolimeow/assets/js/boxmoe.js:637-666
• 样式定义：wp-content/themes/lolimeow/assets/css/style.css:865-882

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → 底部运行天数设置，可以分别设置"天单位文字"、"时单位文字"、"分单位文字"、"秒单位文字"：

- 开关：boxmoe_footer_running_days_switch
- 开始时间：boxmoe_footer_running_days_time（例如 2025-01-01）
- 前缀文案：boxmoe_footer_running_days_prefix（默认“本站已稳定运行了”）
 
 
 
 

🔎 主题设置页模糊搜索（后台 Options 搜索）

文件位置: core/panel/includes/class-options-framework-admin.php · core/panel/js/options-custom.js · core/panel/css/optionsframework.css

• 页头搜索框：在主题设置页头新增搜索输入框 #of-search-input，支持模糊搜索所有设置项名称与分组标题
• 实时筛选：输入时跨分组动态过滤，仅显示匹配的设置块与其所在分组；清空输入自动恢复当前标签页
• 轻量实现：前端纯 JS 实现，无后端改动，与原标签切换、联动显示逻辑兼容

代码寻找

• 输入框插入：wp-content/themes/lolimeow/core/panel/includes/class-options-framework-admin.php:209-213
• 搜索逻辑：wp-content/themes/lolimeow/core/panel/js/options-custom.js:72-124
• 样式规则：wp-content/themes/lolimeow/core/panel/css/optionsframework.css:145-146,169

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → 在页头搜索框输入关键词，即可实时过滤匹配的设置项；清空搜索恢复

 
 
 
 

🖼️ 文章页图片查看器（点击预览/全屏）

文件位置: assets/js/image-viewer.js · assets/css/image-viewer.css · core/module/fun-basis.php

• 交互行为：文章页 .single-content 内图片可点击预览，淡入 Overlay 居中显示；支持拖拽、滚轮缩放、旋转、原始大小、上一张/下一张；点击遮罩空白处关闭
• 自然尺寸显示：默认按图片原始尺寸渲染，不受容器尺寸限制；需适配屏幕时点击“全屏”切换到适配模式（等比缩放至视口）
• 全屏适配：根据图片 naturalWidth/naturalHeight 与窗口尺寸自动计算缩放；退出全屏恢复之前的缩放与位移状态
• 快捷键：Esc 关闭，+/= 放大，- 缩小，R 旋转，0 原始大小，F 全屏，方向键切换

代码寻找

• 资源加载：wp-content/themes/lolimeow/core/module/fun-basis.php:139（CSS） · wp-content/themes/lolimeow/core/module/fun-basis.php:147（JS）
• 前端逻辑：wp-content/themes/lolimeow/assets/js/image-viewer.js
• 样式规则：wp-content/themes/lolimeow/assets/css/image-viewer.css

实现要点

• 图片收集：收集 .single-content img，兼容懒加载，优先读取 data-src/currentSrc
• 行为控制：拖拽更新 translate(x,y)；缩放范围 0.5–3.0；旋转每次 +90°；组图切换与计数 当前/总数
• 全屏类名：切换 tk-image-viewer__wrapper--fullscreen，CSS 中限制 img 最大宽高为 100vw/100vh
• 事件管理：关闭时移除键盘监听，防止泄漏；对子链接点击统一 preventDefault + stopPropagation 避免跳转

 
 
 
 

🖱️ 复制事件顶部横幅提示

文件位置: assets/js/boxmoe.js · assets/css/style.css

• 复制提示：前端触发任意复制事件时，顶部横幅下滑显示提示文案：您拷贝了本站内容，记得注释来源哦~(￣y▽,￣)╭ 👍🏻
• 联动复制按钮：文章代码块的“复制代码”按钮复制成功同样触发横幅提示（ClipboardJS 成功回调联动）
• 浅蓝背景：横幅背景为浅蓝色 #e6f2ff，适配亮/暗主题色体系；暗色模式下强制文字与图标为黑色，解决白字配浅蓝底的对比度问题
• 紫色遮罩动画：遮罩为 rgba(139,61,255,0.35)，自左向右覆盖横幅背景；推进过程中保持圆角前沿（约 18px）
• 完全覆盖与收起：遮罩在动画末尾完全覆盖横幅（超出 100% 宽度以避免右侧露出），随后横幅自动收起；重复复制会重置动画与计时
• 移动端适配：在窄屏缩小内边距与字号，避免遮挡

交互时序

• 遮罩动画约 1.1s 完成；为确保“完全覆盖 → 收起”，横幅在遮罩结束后约 0.4s 隐藏，总显示时长约 1.5s

代码寻找

• 初始化与事件绑定：wp-content/themes/lolimeow/assets/js/boxmoe.js:744–760
• 复制按钮联动：wp-content/themes/lolimeow/assets/js/boxmoe.js:610–620
• 横幅样式与动画：wp-content/themes/lolimeow/assets/css/style.css:953–959（含 @keyframes copyMaskSweep）

 
 
 
 

🅰️ 字体设置与默认字体（自定义上传/编辑器注入）

文件位置: core/panel/settings/set-fonts.php · core/module/fun-fonts.php · core/panel/options-framework-js.php · core/panel/css/optionsframework.css

• 新增“字体设置”分组与开关：boxmoe_custom_font_switch（开启后自定义字体才生效）
• 自定义字体列表：纯文本、扁平圆角表格，支持“新增/修改/删除”；“新增”按钮置于标题右侧（class-options-interface.php:101 注入按钮，样式见 optionsframework.css）
• 弹窗编辑：填写“显示名称”、上传 woff2 或自定义 woff2 链接（二选一、互斥校验），保存后写入列表；删除采用事件委托修复（core/panel/options-framework-js.php:257-265）
• 数据存储：以数组形式保存到 boxmoe_fonts，每项包含 name/woff2/url；服务端清洗互斥与合法性（core/panel/includes/class-options-sanitization.php:296-312）
• 经典编辑器字体选择：通过 TinyMCE 注入自定义字体到 font_formats（core/module/fun-fonts.php:87），并追加 @font-face 到 content_style 保证渲染；确保显示默认内置字体列表（core/module/fun-fonts.php:121-139）
• Gutenberg 支持：动态注入到 theme.json 数据（wp_theme_json_data_theme，core/module/fun-fonts.php:24-65），区块“字体族”出现自定义项
• 前端样式：统一注入 @font-face（core/module/fun-fonts.php:4-22）
• 站点默认字体：新增 boxmoe_default_font 下拉，选项包含“默认字体”+自定义字体名称；选择非“默认字体”时为全站应用 body{font-family: ...}（前端与编辑器均注入，core/module/fun-fonts.php:18-22, 80-85, 142-150）
• banner欢迎语字体设置：新增 boxmoe_banner_welcome_font 下拉，选项包含“默认字体”+自定义字体名称；选择非“默认字体”时为banner欢迎语应用 font-family: ...（前端注入，core/module/fun-fonts.php:24-29）
• 上传支持：允许上传 woff/woff2（upload_mimes，core/module/fun-basis.php:349）
• 布局与可读性优化：

- 表格标题与“新增”按钮同列对齐（optionsframework.css 与 class-options-interface.php:101-106）
- 文本自适应换行、长链接不溢出容器（optionsframework.css）

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → 字体设置：

- 开启“自定义字体”→ 点击“新增”填写名称并上传或填写链接（二选一）→ 保存设置
- 如需修改/删除，列表中点击“修改/删除”即可；保存后生效
- 选择“站点默认字体”应用到全站（选择“默认字体”保持主题原样）

 
 
 
 

️ 写文章 MD 语法编辑器（开关/工具栏/预览）

文件位置: core/module/fun-markdown.php · assets/js/markdown-editor.js · assets/css/markdown-editor.css · core/panel/settings/set-optimize.php · functions.php

• 开关入口：后台 → 外观 → 盒子萌主题设置 → 系统优化 → “写作类相关开关优化” → 启用 MD 语法编辑器（boxmoe_md_editor_switch）参考（wp-content/themes/lolimeow/core/panel/settings/set-optimize.php:28-33）
• 模块引入：主题主入口引入 fun-markdown.php 模块参考（wp-content/themes/lolimeow/functions.php:36）
• 渲染流程：前台内容渲染在 the_content 上执行 Markdown → HTML → do_shortcode，保证主题原生短代码正常工作参考（wp-content/themes/lolimeow/core/module/fun-markdown.php:51-57）
• 编辑器行为：开启开关后禁用 Gutenberg 与富文本编辑，使用纯文本域；提供 Markdown 工具栏与“预览”按钮，移除“实时预览”参考（wp-content/themes/lolimeow/core/module/fun-markdown.php:59-72 · wp-content/themes/lolimeow/assets/js/markdown-editor.js:26-39,57-58）
• 预览接口：wp_ajax_boxmoe_md_preview 接口返回解析后的 HTML，并执行短代码以便预览与前台一致（wp-content/themes/lolimeow/core/module/fun-markdown.php:73-80）
• 工具栏定位：Markdown 工具栏挂载在“表情栏”之后，避免遮挡；提升层级避免覆盖参考（wp-content/themes/lolimeow/assets/js/markdown-editor.js:40-49 · wp-content/themes/lolimeow/assets/css/markdown-editor.css:1）
• 样式增强：预览区圆角卡片、代码块深色背景、列表缩进与图片自适应；下拉选择统一圆角边框参考（wp-content/themes/lolimeow/assets/css/markdown-editor.css:4-10）
• 短代码下拉：保留“添加媒体”旁原生 Boxmoe短代码 下拉，移除额外的重复短代码控件，避免界面混乱

使用步骤

• 主题设置中开启“启用MD语法编辑器”并保存
• 写文章页：使用工具栏按钮（B/I/H1–H3/Link/Image/Code/Quote/UL/OL）编辑 Markdown；点击“预览”生成预览区
• 需要插入主题短代码时，使用“添加媒体”旁的 Boxmoe短代码 下拉选择插入即可

 
 
 
 

🎎 网页右侧看板自定义管理 (Custom Side Board Manager)

文件位置: core/panel/includes/class-options-interface.php · core/panel/js/options-custom.js · core/panel/css/optionsframework.css · core/panel/includes/class-options-sanitization.php

• 自定义列表管理：在“网页右侧看板开关”中新增自定义列表功能，支持无限添加看板形象。
• 交互操作：

- 新增/替换/删除：支持调用媒体库上传/选择图片，或直接输入外部链接。
- 直接URL添加：新增直接输入图片链接功能，支持点击添加按钮或回车键快速添加。
- 一键启动：每个项目配有“启动”按钮，点击即选中该形象（单选逻辑），自动同步到隐藏的 Radio 选项。

• 自定义命名与 UI 优化：

- 名称设置：允许为每个看板形象设置显示名称。
- 浮动标签（Floating Label）：名称输入框采用 Material Design 风格浮动标签。
- 默认状态：输入框内显示“请输入名称”（灰色）。
- 激活状态：标签上浮至边框左上角，变为“名称”（蓝色），并自动切换背景色遮挡边框线（Outlined 风格）。
- 动态文本：利用 CSS content: attr() 配合 data- 属性实现提示文案在不同状态下的自动切换。

• 数据安全：完善了 custom_board_list 类型的后端清洗逻辑，确保 URL 和名称的安全存储。

代码寻找

• 界面渲染：class-options-interface.php (case 'custom_board_list')
• 动态交互：options-custom.js (添加/删除/启动逻辑)
• 样式定义：optionsframework.css (.custom-board-input-group 相关)
• 数据清洗：class-options-sanitization.php (of_sanitize_custom_board_list)

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → 基础设置 → 网页右侧看板开关
• 点击“新增看板形象”添加新项，或在现有项中操作。
• 直接输入图片链接，点击“添加”按钮或按回车键快速添加看板形象。
• 输入名称（体验浮动标签效果），点击“启动”应用形象。

修复记录

• 问题：自定义看板列表的看板形象无法正常显示，默认看板形象能正常显示
• 原因：footer.php中使用了严格的URL验证函数filter_var，导致部分自定义URL无法通过验证
• 解决方案：

- 修改footer.php中的URL验证逻辑，使用更宽松的字符串检查方式
- 检查URL是否包含http://或https://，或者是绝对路径
- 对于符合条件的URL直接使用，否则按文件名处理
- 代码位置：footer.php（看板图片显示逻辑）
- 修复文件：footer.php

 
 
 
 

🖼️ 自定义背景装饰图管理

文件位置: core/panel/settings/set-basis.php · header.php · assets/css/style.css · core/panel/includes/class-options-media-uploader.php · core/module/fun-basis.php

• 后台设置：

- 入口：外观 → 盒子萌主题设置 → 基础设置 → 自定义背景装饰图 (boxmoe_background_image)。
- 交互优化：将“删除”按钮改为“替换”按钮，支持直接从媒体库选择或上传新图进行替换。
- SVG 支持：新增 upload_mimes 过滤器允许 SVG 格式上传；修复了设置面板中 SVG 图片无法预览的问题。

• 前端显示：

- 逻辑：若设置了图片，则通过 CSS 注入 header.php 覆盖默认背景；若留空，则不显示任何背景装饰图（默认 CSS 已去除硬编码）。
- 样式：背景图层级调整为 z-index: -999，确保位于最底层不遮挡内容；使用 !important 确保自定义设置生效。
- 链接修复：输出链接经过 esc_url 处理，修复了无法正确应用自定义链接的问题。

• 稳定性：

- 保存优化：修复了保存设置时因资源限制或正则处理导致的 502 错误（增加 set_time_limit / memory_limit，管理员跳过 wp_kses）。

使用步骤

• 后台 → 盒子萌主题设置 → 基础设置 → 自定义背景装饰图。
• 点击“上传”或“替换”选择图片（支持 SVG）。
• 保存后前台背景即更新；若需移除，清空该设置保存即可。

 
 
 
 

👮 角色与用户身份管理

文件位置: core/module/fun-role-manager.php · core/panel/settings/set-user-identity.php

• 功能概述：提供了一套轻量级的本地用户角色管理系统，允许站长在后台自由创建、删除角色，并管理用户的角色分配。
• 核心特性：

- 角色管理：支持新增自定义角色（指定唯一标识与显示名称），并可删除自定义角色（系统内置角色受保护）。
- 权限继承：支持继承模式，创建新角色时可完全复制现有角色的所有权限（如 VIP 继承 Subscriber 权限）。
- 细粒度权限自定义：支持自定义组合模式，可基于 20+ 项具体能力（如发布文章、管理分类、安装插件等）自由勾选，精准控制角色权限。
- 用户角色分配：内置用户搜索功能，支持通过 ID、用户名、邮箱或昵称搜索用户，并直接修改其角色。
- 安全机制：内置安全校验，防止管理员意外移除自身的管理员权限；自定义模式下自动赋予基础阅读权限。
- 界面集成：深度集成于“用户身份管理”设置面板，采用 AJAX 交互，操作流畅。

• UI 优化与交互：

- 权限选择弹窗：自定义模式下采用扁平圆角风模态框（Modal），直观展示并选择所需权限。
- 风格统一：现有角色列表采用与“新增角色”一致的卡片式布局，视觉体验更佳。
- 系统角色标识：系统内置角色（如 Administrator）拥有独立的蓝色 系统内置 徽章，并与角色名称保持间距。
- 折叠收纳：默认折叠所有系统内置角色，仅展示自定义角色，保持列表简洁；点击“展开系统内置角色管理”即可查看完整列表。
- 描述优化：操作说明已移至区块描述中，不再占用列表空间；角色 ID 显示更加清晰。

• 代码寻找

- 后端逻辑与 AJAX：wp-content/themes/lolimeow/core/module/fun-role-manager.php
- 设置面板界面：wp-content/themes/lolimeow/core/panel/settings/set-user-identity.php

• 使用步骤

- 后台 → 外观 → 盒子萌主题设置 → 用户身份管理
- 新增角色：填写标识（英文）、名称（中文），选择模式（继承/自定义），若自定义则点击按钮勾选具体权限，最后点击创建。
- 管理用户：在下方搜索框输入用户信息，找到目标用户后点击其角色名称进行修改。

 
 
 
 

🆔 自定义用户UID与查重

文件位置: core/module/fun-user.php · core/module/fun-user-center.php · page/template/user-home.php · core/module/fun-admin.php

• 随机 UID 生成（6位以上）：新用户注册时，系统通过 do-while 循环自动生成一个唯一且不重复的 6 位以上数字 UID，并保存至 custom_uid 用户元数据中。
• 用户中心显示（只读）：在用户资料设置页，“用户ID”输入框对普通用户禁用（仅显示），若未设置则默认显示系统原始 ID；只有管理员可进行修改。
• 后台管理与列表：

- 资料页管理：管理员可在后台用户资料页查看和修改任意用户的 UID（无正则限制，仅查重）。
- 新增用户：在后台“添加用户”页面，新增“用户ID”输入框。管理员可指定 UID；若留空，系统将自动生成随机 6 位以上 UID。
- 列表展示：后台“所有用户”列表新增“用户ID”列，直观展示自定义 UID（未设置则显示系统 ID）。

• 后端查重与校验：

- 唯一性检查：更新前检查数据库中是否存在相同 custom_uid 或与现有用户的系统 ID 冲突（排除自身），防止 ID 冲突。
- 权限控制：前端更新接口增加 manage_options 权限校验，防止普通用户通过接口绕过限制。

• 扁平圆角弹窗提示：

- 前端：当后端返回 ID_EXISTS 错误时，前端弹出自定义的扁平圆角风格错误提示框。
- 后台：当 ID 冲突导致保存失败时，自动隐藏原生顶部错误条，改为页面居中的扁平化模态弹窗显示错误信息。

代码寻找

• 注册生成逻辑：core/module/fun-user.php (boxmoe_generate_custom_uid)
• 后端更新与查重：core/module/fun-user-center.php (boxmoe_update_user_profile 增加权限校验)
• 后台管理字段与列表：core/module/fun-admin.php (boxmoe_admin_user_custom_uid_field / boxmoe_manage_users_columns / boxmoe_save_new_user_custom_uid)
• 前端输入框控制：page/template/user-home.php (根据 current_user_can 控制 disabled)

使用步骤

• 新用户注册：注册成功后自动获得随机 6 位以上 UID。
• 查看 UID：用户在“个人资料”页查看自己的 UID（不可修改）。
• 管理员修改：管理员可在后台或前台修改用户 UID，修改时会自动查重。
• 管理员新增：在后台添加用户时，可直接填写指定 UID，或留空自动生成。

 
 
 
 

📝 后台文章一键复制

文件位置: core/module/fun-admin.php

• 功能描述：在后台“所有文章”和“所有页面”列表的操作栏中新增“复制”按钮。
• 核心逻辑：点击复制后，自动创建一个新草稿，完整拷贝原文章的标题、内容、摘要、分类标签及所有自定义字段（Meta Fields），并自动跳转到新文章编辑页。
• 复制成功提示：复制成功后，页面顶部显示带有紫色遮罩动画的横幅提示，3秒后自动隐藏。
• 代码寻找：

- 按钮注入：boxmoe_duplicate_post_link (挂载于 post_row_actions / page_row_actions)
- 复制处理：boxmoe_duplicate_post_as_draft (挂载于 admin_action_...)
- 成功提示：boxmoe_duplicate_success_notice (挂载于 admin_footer / admin_head)

 
 
 
 

📋 Markdown任务清单功能

文件位置: core/module/fun-markdown.php · assets/js/markdown-editor.js · assets/css/markdown-editor.css · assets/css/style.css · assets/js/boxmoe.js

• 功能描述：新增Markdown任务清单语法支持，实现点击交互和自动保存功能，支持三种任务状态。
• 核心特性：

- Markdown语法支持：识别 - [ ]（未完成）、- [>]（进行中）和 - [x]（已完成）格式的任务项
- 编辑器工具栏增强：在编辑器工具栏中添加任务清单按钮，支持快速插入语法
- 前端交互：点击emoji可切换任务状态，支持三种状态循环切换（未完成→进行中→已完成→未完成）
- 自动保存：通过AJAX将任务状态保存到服务器
- 作者鉴权：只有内容作者才能修改任务状态
- 漫画圆角风格：采用主题一致的漫画圆角设计
- 深色模式支持：适配浅色和深色模式
- 状态样式区分：
- ❌ 未完成：默认样式
- 🔄 进行中：黄色背景，橙色文字，左侧黄色边框
- ✅ 已完成：删除线，灰色文字
- 状态提示窗口优化：
- 屏幕中间居中显示，不再右上角
- 向上移动渐显，向下移动渐隐的动画效果
- 高斯模糊半透明玻璃态背景
- 蓝色渐变背景设计
- 深蓝色文字，提高可读性
- 浅粉色扫光动画效果，单次执行

• 代码寻找：

- Markdown解析：fun-markdown.php:19-57
- 编辑器按钮：markdown-editor.js:36
- 前端交互：boxmoe.js:800-935
- 样式设计：style.css:53-154
- 状态提示窗口：boxmoe.js:1413-1552

• 使用步骤：

- 在编辑器中输入 - [ ] 任务项、- [>] 任务项 或 - [x] 任务项，或点击工具栏按钮插入
- 发布后，在前端页面点击emoji切换任务状态
- 系统会自动保存任务状态，并显示优化后的状态提示窗口

• 状态切换逻辑：点击一次切换到下一个状态，按未完成→进行中→已完成→未完成循环切换

🔧 修复记录

1. 状态字符位置修复 (core/module/fun-markdown.php)

- 修复了任务状态更新时状态字符不在[]里面的问题
- 确保状态字符始终正确位于方括号内，格式为：- [x] 任务项
- 改进了正则表达式匹配和替换逻辑

1. 进行中状态样式修复 (core/module/fun-markdown.php · assets/js/boxmoe.js)

- 修复了进行中状态[- [>] 不显示样式的问题
- 确保进行中状态正确显示🔄 emoji
- 修复了前端JavaScript中进行中状态的emoji显示（从📃改为🔄）
- 为进行中状态添加了正确的CSS样式

1. 任务项匹配逻辑修复 (core/module/fun-markdown.php)

- 修复了点击任务项时状态被更新到错误任务项的问题
- 实现了精确匹配逻辑：
- 将文章内容按行分割，逐行检查
- 匹配条件：任务内容完全匹配 AND 当前状态字符与请求的当前状态匹配
- 只更新第一个同时满足内容和状态匹配的任务行
- 修复了换行符处理问题（使用双引号的"\n"确保换行符被正确解释）
- 支持多种状态匹配：
- 未完成状态：pending 对应 [ ]
- 已完成状态：completed 对应 [x]
- 进行中状态：in-progress 对应 [>] 或 [>]

1. HTML实体处理优化 (core/module/fun-markdown.php)

- 确保所有HTML实体都被转换为原始字符
- 将所有的>转换为>
- 将所有的<转换为< - 确保最终的文章内容格式正确

1. 状态提示窗口优化 (assets/js/boxmoe.js)

- 将提示窗口从右上角改为屏幕中间居中显示
- 实现向上渐显、向下渐隐的动画效果
- 改为高斯模糊半透明玻璃态背景
- 实现蓝色渐变背景设计
- 字体颜色改为深蓝色，提高可读性
- 添加浅粉色扫光动画效果，单次执行
- 优化动画时序：向上渐显 → 浅粉色扫光 → 向下渐隐

🔍 修复效果

• ✅ 点击任务项时，状态字符始终在[]里面
• ✅ 进行中状态[- [>] 正确显示🔄 emoji
• ✅ 点击任务项时，只会更新该精确任务项的状态
• ✅ 不会匹配到其他相同内容但不同状态的任务项
• ✅ 支持三种任务状态的正确循环切换
• ✅ 任务状态更新时语法格式正确
• ✅ 支持HTML实体转换
• ✅ 匹配成功率提高
• ✅ 状态提示窗口居中显示，动画效果流畅
• ✅ 玻璃态背景设计，视觉效果现代
• ✅ 扫光动画增强用户体验

 
 
 
 

📇 Markdown卡片式内容

文件位置: core/module/fun-markdown.php · assets/js/markdown-editor.js · assets/css/markdown-editor.css · assets/css/style.css

• 功能描述: 新增卡片式内容语法，支持创建漫画风格的卡片，包含头像、名称、描述、链接和勋章
• 语法格式:

名称：
  头像链接：
  描述：
  链接：
  勋章：
  

• 编辑器支持:

- 在Markdown编辑器工具栏新增"卡片"按钮
- 点击按钮自动插入卡片语法模板
- 支持实时预览

• 样式特点:

- 漫画风格设计，采用圆角、阴影和渐变效果
- 头像圆形设计，带有边框和阴影
- 左上角勋章标签，带有旋转效果
- 整个卡片可点击跳转（新标签打开）
- 暗色模式适配，背景色跟随主题

• 代码寻找:

- Markdown解析：core/module/fun-markdown.php:75-93
- 编辑器按钮：assets/js/markdown-editor.js:38
- 样式定义：assets/css/markdown-editor.css:298-424 · assets/css/style.css:916-1067

使用步骤:

1. 确保已开启MD语法编辑器（后台 → 外观 → 盒子萌主题设置 → 系统优化）
2. 在写文章页点击编辑器工具栏中的"卡片"按钮
3. 填写卡片信息：名称、头像链接、描述、链接和勋章
4. 发布后，前端将显示漫画风格的卡片

优化特性:

• 无底部按钮，实现全屏点击跳转
• 自适应宽度设计
• 紧凑的卡片布局
• 精致的勋章标签
• 无多余虚线装饰
• 完美适配暗色模式

 
 
 
 

🦶 底部版权与文案增强

文件位置: core/panel/settings/set-basis.php · core/module/fun-basis.php

• 自定义 Theme by 信息：新增“底部版权信息自定义”设置项，支持自定义 HTML 内容（默认为 Theme by Boxmoe），可修改为备案链接或其他声明。
• 隐藏 Copyright 字样：新增“底部隐藏 Copyright 文字”开关，开启后仅显示 © 符号，去除了默认的 "Copyright" 英文单词。
• 使用步骤：后台 → 外观 → 盒子萌主题设置 → 基础设置 → 底部设置 / 底部运行天数设置。

 
 
 
 

⏱️ 底部页面执行时间优化

文件位置: core/module/fun-basis.php · assets/css/style.css

• 中文显示优化：将默认的英文显示 X queries in Y s 改为中文 X 个查询耗时 Y 秒
• 彩色文字效果：

- 【数量】：显示为橙色文本
- 【个查询耗时】：显示为紫色文本
- 【秒数】：显示为浅红色文本
- 【秒】：显示为蓝色文本

• 同一行显示：修复了默认情况下各元素分行显示的问题，确保所有文本在同一行显示
• 技术实现：

- 为执行时间外层 span 添加了 query-time 类
- 添加了 .copyright .query-time span {display:inline;} 样式，覆盖默认的 display:block 设置
- 将数量部分单独包裹在 span 标签中，实现精确的颜色控制

• 使用步骤：后台 → 外观 → 盒子萌主题设置 → 基础设置 → 开启“底部显示页面执行时间”

 
 
 
 

�🌈 Banner打字动画效果

文件位置: header.php · assets/js/boxmoe.js · core/module/fun-basis.php

• 动态打字效果：Banner区域的欢迎语实现了彩色打字动画效果，每个字符逐字显示，带有随机彩虹色配色
• 自动循环：打字完成后等待3秒，然后逐字删除，再重新开始，形成循环动画
• 响应式设计：适配不同屏幕尺寸，确保在各种设备上都能正常显示
• 配置简单：通过Banner设置中的"Banner欢迎语"即可自定义显示文本
• 代码寻找

- 欢迎语渲染：core/module/fun-basis.php:128-135
- 打字动画逻辑：assets/js/boxmoe.js:849-910
- 前端渲染：header.php:259-262

实现要点

• 使用 data-text 属性传递要显示的文本
• 彩虹配色方案包含12种颜色，每次随机选择不同颜色，避免重复
• 打字速度：200ms/字符，删除速度：100ms/字符
• 采用 span 标签包裹每个字符，实现单个字符的颜色控制

使用步骤

• 后台 → 外观 → 盒子萌主题设置 → Banner设置
• 在"Banner欢迎语"输入框中填写要显示的文本（留空则显示默认值"Hello! 欢迎来到盒子萌！"）
• 保存设置后，前台Banner区域会自动显示打字动画效果

 
 
 
 

👤 用户信息页面小部件增强

文件位置: core/widgets/widget-currentuser.php · core/widgets/widget-userinfo.php

• 复制功能修复：修复QQ、邮箱、微信图标点击复制功能，使用现代Clipboard API，并兼容旧浏览器
• 动画效果增强：新增悬停上移动画和扫光动画，提升交互体验
• 头像显示修复：修复当前登录用户头像不显示问题，使用主题自定义头像函数
• 信息显示控制：优化用户名和个人说明的显示逻辑
• 纯文本统计修复：修复统计信息显示为纯文本的问题，去除重复HTML结构
• 邮箱图标修复：将错误的Win图标替换为正确的邮箱图标
• 语法错误修复：修复JavaScript代码中的语法错误，确保功能正常运行

代码寻找

• 当前用户信息页面小部件：wp-content/themes/lolimeow/core/widgets/widget-currentuser.php
• 用户信息页面小部件：wp-content/themes/lolimeow/core/widgets/widget-userinfo.php

 
 
 
 

✍️ 文章作者信息页面小部件

文件位置: core/widgets/widget-postauthor.php · core/widgets/widget-set.php

• 新增页面小部件：创建当前文章作者信息页面小部件，显示文章作者的详细信息
• 作者信息展示：包含作者头像、名称、个人简介和社交链接
• 作者统计数据：显示作者发布文章数量和收到的评论数量
• 社交链接支持：支持QQ、邮箱、微信等社交图标，带有复制功能和动画效果
• 无缝集成：添加到主题页面小部件列表，可直接在后台拖拽使用

代码寻找

• 文章作者页面小部件：wp-content/themes/lolimeow/core/widgets/widget-postauthor.php
• 页面小部件注册：wp-content/themes/lolimeow/core/widgets/widget-set.php

使用步骤

• 后台 → 外观 → 页面小部件
• 将"当前文章作者信息"页面小部件拖拽到侧边栏或其他页面小部件区域
• 保存设置后，文章页会自动显示当前文章作者的详细信息

 
 
 
 

📋 小部件复制功能

文件位置: core/widgets/widget-postauthor.php · core/widgets/widget-currentuser.php · core/widgets/widget-userinfo.php · core/widgets/copy-function.js · assets/js/boxmoe.js

 
 

修复内容

1. 复制功能修复：修复QQ、邮箱、微信图标点击无法复制文本的问题

- 创建统一的复制功能脚本 copy-function.js
- 使用现代 Clipboard API，并兼容旧浏览器
- 通过 WordPress 机制加载脚本，确保只加载一次

1. Gitee支持增强：为所有小部件添加Gitee信息和图标支持

- 在三个小部件中添加Gitee字段获取和显示
- 使用Gitee官方SVG图标 https://gitee.com/static/images/gitee-logos/logo_gitee_g_red.svg
- 添加Gitee后台设置选项
- 修复Gitee图标显示问题

1. Toast提示样式优化：

- 将头部图标从 msg-tip.png 改为动态读取网站Favicon
- 标题从"系统消息"改为"温馨提示"
- 正文显示"已复制：{实际复制的文本}"
- 采用漫画风背景（粉色渐变 + Comic Sans MS 字体 + 圆角 + 阴影）

1. 当前用户信息小部件修复：

- 修复用户信息获取逻辑，从 isset() 改为 !empty()
- 确保邮箱图标正常显示
- 优化邮箱显示样式

1. 其他优化：

- 修复widget-userinfo.php和widget-currentuser.php中的$defaults数组，添加gitee键默认值
- 确保所有小部件中的邮箱、QQ、GitHub等图标正常显示
- 优化社交图标的CSS样式

 
 

代码寻找

• 统一复制功能脚本：wp-content/themes/lolimeow/core/widgets/copy-function.js
• Toast提示样式：wp-content/themes/lolimeow/assets/js/boxmoe.js
• 小部件文件：wp-content/themes/lolimeow/core/widgets/widget-*.php

 
 

使用步骤

• 后台 → 外观 → 页面小部件
• 编辑需要修改的小部件，填写Gitee链接等信息
• 保存设置后，前端会显示相应的社交图标
• 点击社交图标可复制对应的信息（QQ、邮箱、微信）或跳转到对应链接（GitHub、Gitee）

 
 
 
 

📋 文章布局风格切换

文件位置: core/panel/settings/set-basis.php · page/template/blog-list.php · assets/css/style.css

• 功能概述: 新增文章布局风格切换功能，支持在单排布局和一排三个布局之间切换
• 后台设置:

- 入口: 外观 → 盒子萌主题设置 → 基础设置 → 博客布局效果设置 → 文章布局风格
- 选项: 单排布局（默认）、一排三个布局
- 数据存储: boxmoe_article_layout_style

• 前端实现:

- 在 blog-list.php 中添加布局判断逻辑
- 单排布局保持原有样式，一排三个布局使用响应式网格布局
- 支持移动端适配，在小屏幕上自动调整为单列布局

• 样式优化:

- 新增 .list-three 相关样式，保持与原有主题风格一致
- 实现卡片悬停效果和过渡动画
- 优化图片尺寸和内容显示

 
 
 
 

📐 三列布局优化

文件位置: assets/css/style.css · core/module/fun-basis.php · sidebar.php

• 问题修复:

- 修复三列布局时卡片高度不一的问题
- 调整主内容和侧边栏的宽度比例，增强文章内容的视觉占比

• 布局调整:

- 主内容区域：在三列布局时从 col-lg-8 调整为 col-lg-9
- 侧边栏：在三列布局时从 col-lg-4 调整为 col-lg-3
- 使用 Flex 布局确保卡片等高显示

• 内容优化:

- 限制标题最多显示2行
- 限制内容最多显示3行
- 将元信息区域固定在卡片底部
- 确保所有卡片元素对齐一致

 
 
 
 

📱 单排布局响应式优化

文件位置: page/template/blog-list.php · assets/css/style.css

• 功能描述: 优化单排布局的响应式效果，确保从屏幕宽度991px开始采用移动端布局
• 核心特性:

- 大屏幕（>991px）：保持横向布局，图片占40%宽度，内容占60%宽度
- 小屏幕（≤991px）：自动切换为纵向布局，图片和内容均占100%宽度
- 保持主题原有设计风格和交互效果
- 优化移动端布局的间距和图片高度

• 实现要点:

- 在 blog-list.php 中优化了单排布局的列类，确保在所有屏幕尺寸下都能正确显示
- 在 style.css 的媒体查询 @media (max-width:991px) 中，将 .list-one .post-list-img 和 .list-one .post-list-content 都设置为 flex: 0 0 100%
- 移除了移动端布局中图片右侧的边距，优化了整体间距
- 调整了移动端图片高度，提供更好的视觉体验

 
 
 
 

🎪 底部栏小部件区域

文件位置: core/module/fun-basis.php · footer.php · assets/css/style.css · core/widgets/widget-search.php

• 功能描述: 重新开发底部栏小部件功能，位于前端页面底部，支持横排显示各种小部件，并优化搜索小部件样式与主题边框效果绑定
• 核心特性:

- 支持主题边框样式设置（漫画边框、阴影边框、动态线条边框）
- 自动跟随主题的边框样式设置
- 响应式设计，适配不同屏幕尺寸
- 支持各种小部件类型（分类、最新文章、评论、标签云、搜索、用户信息等）
- 悬停动画效果，增强用户体验
- 暗色模式适配
- 搜索小部件样式与主题边框效果深度绑定（没同步样式，需要解决）
- 统一的小部件样式管理

• 实现要点:

- 在fun-basis.php中注册底部栏小部件区域
- 在footer.php中添加底部栏小部件区域的调用
- 在style.css中添加底部栏小部件的样式
- 支持主题边框样式的自动应用
- 修复了非悬停状态下底座样式丢失的问题
- 修复了头像样式、书签图片显示、文字布局等问题

• 代码寻找:

- 小部件区域注册：core/module/fun-basis.php:302-337
- 底部栏调用：footer.php:10-18
- 样式定义：assets/css/style.css:2048-2568、assets/css/style.css:3458-3550
- 搜索小部件：core/widgets/widget-search.php

使用步骤:

1. 后台 → 外观 → 页面小部件
2. 将需要的小部件拖拽到"底部栏展示"小部件区域
3. 保存设置后，前端页面底部将显示添加的小部件

优化特性:

• 小部件卡片样式与首页风格一致
• 支持各种小部件内容样式的自适应
• 用户信息小部件样式优化
• 非悬停状态下底座样式正常显示
• 悬停时的平滑过渡动画
• 完美适配亮色和暗色模式
• 搜索小部件样式与主题边框效果深度绑定
• 统一的搜索小部件样式，适配所有位置
• 增强的搜索小部件交互体验
• 修复了书签样式同步问题
• 修复了漫画风边框底座显示问题

搜索小部件边框效果绑定:

• blog-border 样式：搜索输入框边框颜色与主题边框颜色一致，聚焦时显示主题特色的2px偏移阴影效果
• blog-shadow 样式：搜索输入框默认带有轻微阴影，聚焦时阴影增强，同时保持主题特色的2px偏移效果
• blog-lines 样式：搜索输入框添加了与漫画风边框匹配的流动渐变背景动画，聚焦时动画加速
• 暗色模式适配：所有边框效果在暗色模式下均有对应的适配样式

 
 
 
 

🎬 文章页视频播放器优化

文件位置: assets/js/boxmoe.js · assets/css/style.css

• 功能描述: 优化文章页视频播放器功能，增强用户体验

 
 

🔹 网页全屏功能优化

• 实现原理: 修改网页全屏按钮功能，实现占满浏览器视口的效果
• 核心特性:

- 点击网页全屏按钮时，页面内容占满整个浏览器视口
- 保持浏览器工具栏和地址栏可见
- 隐藏页面滚动条，防止出现双滚动条
- 清零页面边距，充分利用视口空间
- 退出时恢复页面原始状态

• 代码寻找:

- 功能实现：assets/js/boxmoe.js:1213-1253
- 样式定义：assets/css/style.css（移除了关灯模式相关样式）

 
 

🔹 功能调整记录

1. 初始实现: 添加了B站风格视频播放器，包括自定义控制栏、进度条、倍速播放、镜像画面、画中画和关灯模式
2. 关灯模式移除: 根据需求删除了所有与关灯模式相关的代码，包括CSS样式和JavaScript功能
3. 网页全屏优化: 改进了网页全屏按钮功能，从浏览器真正全屏改为占满视口
4. 状态同步修复: 确保普通全屏按钮和网页全屏按钮的状态管理相互独立，避免冲突（失败，后续会修复）

 
 

🔹 技术实现要点

• 使用CSS变量和渐变效果美化播放器界面
• 采用requestAnimationFrame实现平滑的进度条动画
• 支持多种浏览器全屏API的兼容性处理
• 实现了完整的视频控制功能，包括播放/暂停、音量控制、进度条拖拽、倍速播放等
• 响应式设计，适配不同屏幕尺寸

使用步骤:

• 在文章中插入视频，系统自动为视频添加自定义控制栏
• 使用控制栏进行视频操作：

- 点击播放/暂停按钮控制视频播放
- 拖拽进度条跳转视频进度
- 点击倍速按钮切换播放速度
- 点击镜像按钮镜像视频画面
- 点击画中画按钮进入画中画模式
- 点击网页全屏按钮占满浏览器视口
- 点击全屏按钮进入浏览器真正全屏模式

 
 
 
 

📋 首页文章分类筛选功能增强

文件位置: core/panel/settings/set-artice.php · core/module/fun-article.php · core/panel/includes/class-options-interface.php

• 功能描述: 增强首页文章分类筛选功能，支持通过输入分类ID进行筛选，并优化了设置项的显示样式
• 核心特性:

- 分类ID输入筛选: 在后台「主题设置-文章设置」中新增「首页文章分类筛选」配置项，支持输入分类ID，多个分类用，、,三个标点符号做区分
- 置顶文章筛选: 修复了置顶文章不遵循分类筛选条件的问题，确保只有符合条件的置顶文章才会显示在首页
- 设置项样式优化: 为设置项描述中的标点符号添加了红色圆角背景样式，提升用户体验
- span标签支持: 确保设置项描述中可以使用带样式的span标签

• 代码寻找:

- 设置项定义：core/panel/settings/set-artice.php
- 分类筛选逻辑：core/module/fun-article.php
- HTML标签支持：core/panel/includes/class-options-interface.php

• 使用步骤:

- 后台 → 外观 → 盒子萌主题设置 → 文章设置
- 在「首页文章分类筛选」输入框中输入分类ID，多个分类用，、,三个标点符号做区分
- 保存设置后，首页将只显示所选分类的文章（包括符合条件的置顶文章）