🥰 新增文章订阅功能

📋 功能概述

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

🗂️ 创建的文件

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 优先级

1. 订阅/取消订阅

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

1. AJAX实时交互

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

1. 邮件通知

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

1. 响应式设计

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

1. 动画效果

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

🎨 样式特点

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

🔧 技术细节

1. jQuery 依赖处理

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

1. 安全措施

- 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 - 更新菜单名称映射

1. 功能实现：

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

1. 页面优化：

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

1. 样式统一：

- 所有卡片使用一致的样式类：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)

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

1. 代码块折叠高度 (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"]

配置选项：

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

🎯 鼠标光标样式

📝 功能说明

自定义鼠标光标样式，支持在主题后台【站点美化】中开启并上传自定义光标图片，替换系统默认光标。

🎨 支持的光标状态

| 光标类型 | 触发场景 | 默认图片 |
|---------|---------|---------|
| 默认光标 | 页面默认状态、链接、按钮 | Arrow.png |
| 文本输入光标 | 输入框、文本域获得焦点 | Handwriting.png |
| 文本框选光标 | 段落、标题等文本元素 | IBeam.png |
| 加载中光标 | 页面加载、AJAX请求时 | AppStarting.png |

📁 文件结构

themes/lolimeow-shiroki/
├── assets/
│   ├── css/
│   │   └── custom-cursor.css          # ◀️ 光标样式CSS
│   ├── js/
│   │   └── custom-cursor.js           # ◀️ 光标控制脚本
│   └── guangbiao/                     # ◀️ 默认光标图片目录
│       ├── Arrow.png
│       ├── Handwriting.png
│       ├── IBeam.png
│       └── AppStarting.png
├── core/panel/settings/
│   └── set-beautify.php               # ◀️ 后台设置选项
└── functions.php                      # ◀️ 加载逻辑

⚙️ 后台设置

• 开关位置：后台 → 主题设置 → 站点美化 → 鼠标特效设置
• 设置项：

- ☑️ 开启自定义鼠标光标
- 📤 默认光标（可上传自定义）
- 📤 文本输入光标（可上传自定义）
- 📤 文本框选光标（可上传自定义）
- 📤 加载中光标（可上传自定义）

💡 智能默认机制

若不上传自定义图片，系统会自动使用 assets/guangbiao/ 目录下的默认图片。

✨ 功能特性

• 🖱️ 4种光标状态：默认、输入、框选、加载
• ⏳ 智能加载检测：自动检测 AJAX/Fetch/图片加载状态
• 📝 输入框识别：自动识别 input、textarea 等元素
• 🎨 CSS 变量控制：方便自定义调整
• 📱 兼容性良好：使用标准 CSS cursor 属性

🔧 技术实现

CSS 变量定义：

:root {
  --cursor-arrow: url("Arrow.png"), auto;
  --cursor-handwriting: url("Handwriting.png"), text;
  --cursor-ibeam: url("IBeam.png"), text;
  --cursor-appstarting: url("AppStarting.png"), wait;
}

JS 配置注入：

window.shirokiCursorConfig = {
  arrow: '.../Arrow.png',
  handwriting: '.../Handwriting.png',
  ibeam: '.../IBeam.png',
  appstarting: '.../AppStarting.png'
};

⚠️ 注意事项

• 推荐光标图片尺寸：32x32 像素
• 推荐格式：PNG（支持透明背景）
• 浏览器限制：不支持 .ani 格式动画光标
• 部分浏览器可能对自定义光标大小有限制