🌊 新增波浪细线条分割线

文件位置: assets/css/shiroki-divider.css · assets/js/tinymce-shiroki-divider.js · assets/js/quicktags-shiroki-divider.js

• 功能描述: 新增分割线功能，支持粉紫蓝渐变细波浪线
• 实现方式:

- 使用SVG创建波浪线形状
- 通过伪元素实现多层波浪线效果
- 支持TinyMCE和Quicktags两种编辑器工具栏
- 使用HTML注释语法

• 使用步骤: 在文章编辑器中点击"分割线"按钮即可插入

🫂 创建分类友链模板

开发内容

1. 创建分类友链模板：

- 新建 page-friendlink-shiroki.php 作为分类友链模板
- 支持动态读取后台链接分类，非硬编码分类列表
- 实现分类标签页切换功能
- 每个分类下显示对应友链卡片，包含网站名称、描述、ICO图标和链接

2. 暗色模式支持：

- 为友链模板添加完整的暗色模式样式
- 使用 CSS 媒体查询 prefers-color-scheme: dark
- 修复暗色模式下文本可见性问题，添加 !important 优先级确保样式生效
- 同时更新了原 page-friendlink.php 的暗色模式样式

3. 智能申请按钮：

- 实现申请友链按钮，根据页面存在情况动态显示
- 检测 YIKAN 友链页面是否存在，优先跳转该页面
- 支持多方法检测页面：通过标题、ID 等
- 如果申请页面不存在，显示提示信息

4. 友链卡片设计：

- 响应式网格布局，适配不同屏幕尺寸
- 卡片包含网站名称、描述、ICO图标和访问链接
- 优化 hover 效果和过渡动画
- 暗色模式下调整卡片背景和边框颜色

5. 页面样式优化：

- 提高申请友链页面第一段文字的可见性
- 修复卡片阴影和边框样式
- 优化分类标签页的选中状态样式

技术实现

• 使用 WordPress API get_terms 获取链接分类
• 使用 get_bookmarks 获取分类下的友链
• 动态生成分类标签页和内容
• 页面检测使用 get_pages 和标题匹配
• CSS 媒体查询实现暗色模式
• 响应式设计使用 Grid 布局

修复的问题

• 模板无法检测 YIKAN 友链页面：改为检测页面标题
• 暗色模式下文本不可见：添加 !important 优先级
• 原友链页面暗色模式问题：更新样式文件

文件修改

• page-friendlink-shiroki.php：新建分类友链模板
• page-friendlink.php：更新暗色模式样式
• .开发笔记/盒子萌-共创开发笔记.md：记录开发内容

✨ 优化分类友链模板样式

开发内容

1. 背景色同步网站ICO图：

- 修改友链卡片背景，使用网站ICO图片作为背景
- 为每个卡片添加 data-bg 属性存储背景图片URL
- 使用 JavaScript 动态为卡片 ::before 伪元素设置背景图片
- 确保背景图片与头像使用相同的 ICO 图片，实现视觉统一

2. 添加高斯模糊效果：

- 为卡片背景添加 filter: blur(15px); 实现高斯模糊效果
- 设置 opacity: 0.3; 确保背景图片不会过于突兀
- 调整伪元素大小和位置，使其覆盖整个卡片

3. 悬停效果优化：

- 实现悬停时降低高斯模糊效果，从 15px 降低到 10px
- 悬停时稍微提高背景图片透明度，从 0.3 提高到 0.4
- 为暗色模式也添加相应的悬停效果优化

4. 卡片布局调整：

- 重新设计卡片布局，左侧显示圆形头像，右侧显示网站信息
- 添加在线状态指示器，增强社交感
- 优化卡片内部元素的间距和排版

5. 响应式设计：

- 调整卡片网格布局，适应不同屏幕尺寸
- 确保在移动设备上卡片也能正确显示

技术实现

• 使用 CSS ::before 伪元素实现背景图片和高斯模糊效果
• 使用 JavaScript 动态创建样式规则，为每个卡片设置背景图片
• 使用 CSS 过渡效果实现平滑的悬停动画
• 使用 CSS 媒体查询实现暗色模式支持

文件修改

• page-friendlink-shiroki.php：优化友链模板样式，添加背景图片同步和高斯模糊效果

🥰 新增文章订阅功能

📋 功能概述

用户可订阅文章，文章更新时会通过邮箱通知已订阅此文章的用户。

🗂️ 创建的文件

1. wp-content/themes/lolimeow-shiroki/core/module/fun-post-follow.php - 核心功能模块
2. wp-content/themes/lolimeow-shiroki/assets/js/shiroki-post-follow.js - 前端交互脚本

🔧 修改的文件

1. wp-content/themes/lolimeow-shiroki/functions.php - 引入关注文章功能模块
2. wp-content/themes/lolimeow-shiroki/page/template/blog-single.php - 添加订阅按钮
3. wp-content/themes/lolimeow-shiroki/assets/css/style.css - 添加订阅按钮和消息提示样式
4. .开发笔记/萌盒子功能开发清单.md - 更新开发记录

✨ 功能特性

1. 数据库表自动创建

- 表名：wp_post_follows
- 字段：id, user_id, post_id, created_at
- 索引：user_id+post_id 唯一索引，post_id 普通索引
- 钩子：init 优先级

2. 订阅/取消订阅

- 用户可点击订阅按钮订阅或取消订阅文章
- 防止重复订阅
- 实时更新订阅数量

3. AJAX实时交互

- 无刷新操作，即时反馈订阅状态
- 安全验证：nonce 检查
- 错误处理：完善的错误提示

4. 邮件通知

- 文章更新时自动向已订阅用户发送邮件
- 个性化邮件：包含用户名
- 精美 HTML 邮件模板
- 邮件内容：
- 标题：【站点名】已更新《文章标题》
- 正文：包含用户名、文章标题、作者、查看链接
- 样式：渐变色按钮、圆角卡片设计

5. 响应式设计

- 支持亮色/暗色模式
- 移动端友好
- 主题统一风格

6. 动画效果

- 订阅按钮加载动画（旋转图标）
- 消息提示动画（渐入渐出）
- 悬停效果

🎨 样式特点

• 订阅按钮采用主题统一的扁平圆角风格
• 已订阅状态使用主题色高亮显示（--bs-primary）
• 消息提示使用渐变色背景（绿色成功、红色错误）
• 支持暗色模式自动适配

🔧 技术细节

1. jQuery 依赖处理

- 主题使用自定义 jQuery（jquery-script）
- 根据主题设置动态选择 jQuery 句柄
- 脚本加载优先级：20（确保在 jQuery 之后）

2. 安全措施

- AJAX nonce 验证
- SQL 预处理防止注入
- 用户登录状态检查
- 文章存在性验证

新增VIP升级功能

功能概述：
在前端会员中心新增VIP升级功能，提供三种支付方式：在线支付、余额支付、VIP卡支付，并对页面进行全面优化。

主要改动：

1. 文件修改：

- wp-content/themes/lolimeow-shiroki/page/template/user-vip.php - 新增VIP升级功能
- wp-content/themes/lolimeow-shiroki/page/template/user-nav.php - 更新菜单项
- wp-content/themes/lolimeow-shiroki/page/p-user_center.php - 更新菜单名称映射

2. 功能实现：

- 新增当前VIP状态显示卡片
- 实现在线支付功能（支持支付宝、微信）
- 实现余额支付功能（使用AJAX调用epd_vip_pay接口）
- 实现VIP充值卡支付功能
- 新增VIP价格列表展示

3. 页面优化：

- 调整余额显示为并排布局，提升信息展示效率
- 将VIP类型选择从单选按钮改为下拉框，简化界面布局
- 将VIP价格列表从卡片网格改为表格布局，更符合资产管理页面设计风格
- 删除常见问题板块，使页面更加简洁
- 统一所有卡片样式，继承资产管理页面的卡片样式（边框、阴影、背景色等）
- 统一卡片大小，避免视觉布局错乱感

4. 样式统一：

- 所有卡片使用一致的样式类：border-primary mb-4 mt-3 border-1 shadow-sm
- 卡片头部使用：card-header border-0 bg-primary bg-opacity-10 py-3
- 标题使用：mb-1 text-primary-emphasis
- 表单元素使用：form-select fontsize、btn btn-primary fontsize

🤖 Geo配置项

在后台主题设置的【搜索引擎优化】里面

🚀 新增可修改媒体库上传限制

功能描述：在后台主题的系统优化中新增媒体库资源上传大小限制的修改功能，用户可通过设置面板直接调整上传限制，无需修改PHP配置文件。

实现位置：

• 设置选项：wp-content/themes/lolimeow-shiroki/core/panel/settings/set-optimize.php
• 功能实现：wp-content/themes/lolimeow-shiroki/core/module/fun-optimize.php

新增设置项：

• 📤 媒体库上传大小限制：可设置最大文件上传大小（单位：MB），默认为10MB
• ⏱️ 执行时间限制：可设置PHP执行时间（单位：秒），默认为30秒

技术实现：

1. 添加了 boxmoe_set_upload_limits() 函数，通过 ini_set() 设置PHP上传相关参数
2. 添加了 boxmoe_filter_upload_size_limit() 函数，过滤WordPress上传大小限制
3. 自动计算并设置合理的 post_max_size 值（为上传大小的1.5倍）
4. 使用默认值处理，确保设置未保存时也能正常工作

使用方法：

1. 进入后台主题设置 → 系统优化
2. 找到「服务器相关设置」部分
3. 调整「媒体库上传大小限制」的值
4. 保存设置后立即生效

🔮 布局边框新增圆角拟态玻璃效果

核心效果特点

• 基础玻璃拟态：半透明背景（rgba透明度）、backdrop-filter模糊效果、圆角边框设计
• 双重模式支持：亮色模式（白色透明背景+蓝色调阴影）和暗色模式（深色透明背景+紫色调阴影）
• 组件全覆盖：导航栏、侧边栏、底部栏、文章卡片、按钮、输入框、搜索框等
• 精致交互效果：悬停时的阴影增强、轻微上浮、光晕动画效果
• 响应式适配：移动端自动调整模糊半径和圆角大小

实现细节

• 使用 backdrop-filter: blur() 实现毛玻璃效果，配合 -webkit-backdrop-filter 兼容
• 采用 rgba() 颜色模式创建半透明背景，确保内容可读性
• 通过多层 box-shadow 实现立体效果，包括外部阴影和内部高光
• 利用 ::before 伪元素实现渐变边框效果，增强视觉层次感
• 为不同组件定制专属样式，如文章卡片的看板娘图片和导航栏的链接动画

性能优化

• 针对性能受限设备，通过媒体查询 prefers-reduced-motion 减少动画效果
• 合理控制模糊半径，在视觉效果和性能之间取得平衡
• 使用 pointer-events: none 确保伪元素不影响交互

应用范围

• 全站布局元素：包括容器、卡片、按钮等基础组件
• 导航系统：顶部导航栏、侧边栏菜单、底部导航
• 交互元素：表单输入框、搜索框、分页按钮、标签云
• 内容展示：文章列表卡片、文章详情页、作者信息区域

启动效果

• 访问后台页面
• 侧边菜单栏进入主题后台
• 在基础设置▶️布局边框▶️切换为圆角拟态玻璃效果
• 保存设置即可生效

🔠 代码块自动折叠功能

功能概述：为主题添加代码块超长自动折叠功能，支持在主题后台的文章设置中开关，默认开启，支持自定义折叠高度（默认80px）。

📋 功能特性

• 自动检测所有代码块元素（pre、code、.hljs、.prettyprint、.highlight）
• 当代码块高度超过设定值时自动添加折叠容器
• 添加美观的展开/收起按钮
• 支持点击切换展开/收起状态
• 底部渐变遮罩效果，提示用户可以展开
• 暗色模式适配

⚙️ 后台设置

位置：WordPress后台 → 外观 → 主题选项 → 文章设置 → 代码块折叠设置

设置项：

1. 代码块折叠开关 (boxmoe_code_block_collapse_switch)

- 类型：复选框
- 默认值：开启
- 说明：若开启则自动折叠超长代码块

2. 代码块折叠高度 (boxmoe_code_block_collapse_height)

- 类型：文本框
- 默认值：80
- 说明：设置代码块折叠的高度，单位px，默认80px

📁 相关文件

1. 后台设置文件

• 文件路径：wp-content/themes/lolimeow-shiroki/core/panel/settings/set-artice.php
• 修改内容：在「文章打赏&点赞设置」前面添加「代码块折叠设置」选项组

2. JavaScript功能文件

• 文件路径：wp-content/themes/lolimeow-shiroki/assets/js/code-block-collapse.js
• 功能说明：

- 页面加载完成后自动检测代码块
- 判断代码块高度是否超过设定值
- 为超长代码块添加折叠容器和切换按钮
- 实现展开/收起交互功能

3. CSS样式文件

• 文件路径：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 添加样式：

- .code-block-collapse-wrapper：折叠容器样式
- .code-block-collapsed：折叠状态样式（渐变遮罩）
- .code-block-toggle：展开/收起按钮样式
- 暗色模式适配样式

4. 功能加载文件

• 文件路径：wp-content/themes/lolimeow-shiroki/functions.php
• 添加函数：

- shiroki_enqueue_code_block_collapse_script()：加载JavaScript文件
- shiroki_code_block_collapse_config_output()：输出配置参数到前端

🎨 样式特点

• 折叠容器带有圆角和阴影效果
• 展开/收起按钮使用渐变背景，悬停时有动画效果
• 折叠状态下代码块底部有渐变遮罩，提示用户可以展开
• 按钮图标在悬停时有缩放动画
• 完美适配亮色和暗色模式

🔧 技术实现

• 使用 DOMContentLoaded 事件确保页面加载完成后执行
• 通过 querySelectorAll 查找所有代码块元素
• 使用 offsetHeight 检测代码块高度
• 动态创建 DOM 元素（容器和按钮）
• 使用 CSS max-height 和 transition 实现平滑动画
• 通过 mask-image 实现渐变遮罩效果

🕐 文章时间显示控制功能

功能描述

新增支持隐藏文章发布时间和最新更新时间的功能，在后台主题设置的【文章设置】中可独立开关两个功能。

🔧 技术实现

后台设置选项

在 core/panel/settings/set-artice.php 中添加两个开关选项：

• 隐藏文章发布时间 - 控制是否显示文章的发布日期
• 隐藏文章更新时间 - 控制是否显示文章的最新修改日期

2. 模板文件修改

修改以下模板文件，根据后台设置动态显示/隐藏时间：

实现逻辑

使用 get_boxmoe() 函数获取后台设置值，通过条件判断控制时间显示：

<?php if(!get_boxmoe('boxmoe_hide_publish_date_switch')): ?>
<span class="data">
  <i class="fa fa-clock-o"></i><?php the_date(); ?></span>
<?php endif; ?>

<?php if(!get_boxmoe('boxmoe_hide_modified_date_switch')): ?>
<span class="modified">
  <i class="fa fa-refresh"></i><?php echo get_the_modified_date(); ?></span>
<?php endif; ?>

设置位置

在后台主题设置 → 【文章设置】中，位于【开启所有文章形式支持】和【首页文章显示数量】之间。

📁 修改的文件

• core/panel/settings/set-artice.php - 添加后台设置选项
• page/template/blog-single.php - 单页文章时间显示控制
• page/template/blog-page.php - 页面时间显示控制
• page/template/blog-page-nosidebar.php - 无侧边栏页面时间显示控制
• page/template/blog-page-nosidebar-noborder.php - 无侧边栏无边框页面时间显示控制
• page/template/blog-list.php - 文章列表时间显示控制

🎯 使用方法

1. 进入 WordPress 后台 → 外观 → 主题设置
2. 点击【文章设置】选项卡
3. 找到【隐藏文章发布时间】和【隐藏文章更新时间】开关
4. 根据需要开启或关闭相应功能
5. 保存设置后，前端文章页面会根据设置自动调整时间显示

💡 功能特点

• 支持独立控制发布时间和更新时间的显示
• 对所有文章相关模板都生效
• 设置即时生效，无需清除缓存
• 保持主题其他功能的完整性

✨ 鼠标移动流光特效

功能描述：鼠标在页面上移动时会产生彩色流光星星特效，为站点增添视觉效果。

涉及文件：

• 设置面板：wp-content/themes/lolimeow-shiroki/core/panel/settings/set-beautify.php

- 新增【站点美化】菜单，位于【系统优化】下方
- 开关 ID：boxmoe_guangbiao_tx_switch

• 特效脚本：wp-content/themes/lolimeow-shiroki/assets/js/guangbiaoTX.js

- 将 TypeScript 原版代码转换为兼容的 JavaScript
- 使用 IIFE 模式避免全局变量污染
- 自动检测 DOM 状态进行初始化

• 特效样式：wp-content/themes/lolimeow-shiroki/assets/css/guangbiaoTX.css

- 光标动画容器样式
- 流光小星星动画效果

• 功能加载：wp-content/themes/lolimeow-shiroki/functions.php

- 函数：shiroki_enqueue_guangbiao_tx_script()
- 优先级：35（在代码块折叠功能之后加载）
- 条件判断：仅当 boxmoe_guangbiao_tx_switch 开启时才加载资源

• 菜单引用：wp-content/themes/lolimeow-shiroki/options.php

- 在【系统优化】菜单之后引入【站点美化】菜单

技术要点：

1. 使用 pointer-events: none 确保特效不阻塞鼠标操作
2. z-index: 9999 确保特效在最上层显示
3. 使用 Web Animations API 实现星星动画效果
4. 动态计算视口高度，适配不同屏幕尺寸
5. 随机颜色数组：["#E23636", "#001aff", "#00ffea", "#ff009d", "#ff9595", "#004370"]

配置选项：

• 开关位置：后台 → 主题设置 → 站点美化 → 鼠标移动特效设置
• 默认状态：关闭（避免影响用户体验）