🎯 鼠标光标样式

📝 功能说明

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

🎨 支持的光标状态

| 光标类型 | 触发场景 | 默认图片 |
|---------|---------|---------|
| 默认光标 | 页面默认状态、链接、按钮 | 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 格式动画光标
• 部分浏览器可能对自定义光标大小有限制

🔠 前台代码注释显隐开关

功能描述：
在后台主题设置的【系统优化】中新增「移除前端HTML注释」开关，开启后前台页面将不再渲染代码文件中的所有注释，包括：

- HTML 注释 `<!-- -->`
- `<script>` 标签内的 JS 单行注释 `//` 和多行注释 `/* */`
- `<style>` 标签内的 CSS 注释 `/* */`

涉及文件：

1. core/panel/settings/set-optimize.php - 添加后台设置选项
2. core/module/fun-optimize.php - 实现注释过滤功能

设置选项：

• 选项ID：boxmoe_remove_html_comments_switch
• 默认状态：关闭
• 位置：后台 → 主题设置 → 系统优化 → 服务器相关设置

技术实现：
使用 PHP 输出缓冲（Output Buffering）捕获页面输出，通过正则表达式过滤各类注释：

• 保留 IE 条件注释
• 保留 noindex 注释 和
• 保留 URL 中的 http:// 和 https://

使用场景：

• 减少页面体积，提升加载速度
• 隐藏开发注释信息，保护代码结构

⛔ 禁用F12和Ctrl+S功能

功能描述: 在后台主题设置的【系统优化】中添加开关，可禁用F12开发者工具和禁止Ctrl+S保存网页功能。

🔧 设置入口

• 后台路径: 主题设置 → 系统优化 → 安全项优化设置
• 设置项1: 禁用F12开发者工具 (boxmoe_disable_f12_switch)
• 设置项2: 禁止Ctrl+S保存网页 (boxmoe_disable_ctrl_s_switch)

📝 代码位置

• 设置项定义: wp-content/themes/lolimeow/core/panel/settings/set-optimize.php
• 功能实现: wp-content/themes/lolimeow/core/module/fun-optimize.php

⚙️ 实现原理

1. 后台设置: 在【安全项优化设置】分组中添加两个checkbox类型的设置项，默认均为关闭状态
2. 前端拦截: 通过 wp_footer 钩子注入JavaScript代码，监听 keydown 事件
3. F12拦截: 检测 e.key === 'F12'，阻止默认行为
4. Ctrl+S拦截: 检测 (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's'，兼容Windows(Ctrl)和Mac(Command)系统
5. 作用范围: 仅在非管理后台且非AJAX请求时生效，避免影响后台正常操作

🎯 使用说明

• 两个功能可独立开关，互不影响
• 开启后用户无法通过F12打开浏览器开发者工具
• 开启后用户无法通过Ctrl+S/Cmd+S保存网页
• 功能仅对普通访客生效，管理员在后台不受影响

🎉 网站LOGO动画开关功能

功能描述：网站LOGO每8秒轻微放大缩小一次，呈现呼吸动画效果，功能在后台主题设置的【站点美化】中可开关控制。

涉及文件：

• wp-content/themes/lolimeow-shiroki/core/panel/settings/set-beautify.php - 后台设置选项
• wp-content/themes/lolimeow-shiroki/assets/css/style.css - CSS动画样式
• wp-content/themes/lolimeow-shiroki/functions.php - 前端输出逻辑

设置选项：

• 开关入口: 站点美化 -> LOGO动效设置 -> 开启LOGO呼吸动画 (boxmoe_logo_breathe_switch)
• 动画周期: 站点美化 -> LOGO动效设置 -> LOGO动画周期 (boxmoe_logo_breathe_duration，单位：秒，默认8秒)

功能详情：

• 开启后，网站LOGO将呈现轻微的呼吸效果（从100%放大到108%再回到100%）
• 动画周期可自定义，范围1-60秒
• 同时作用于顶部导航栏LOGO和移动端侧边栏LOGO
• 使用CSS @keyframes 实现，性能友好

代码实现：

1. CSS动画定义 (style.css)：

@keyframes logo-breathe {
     0%, 100% {transform: scale(1);}
     50% {transform: scale(1.08);}
   }
   

2. 后台设置 (set-beautify.php)：

- 添加【LOGO动效设置】分组
- 包含开关和周期设置两个选项

3. 前端输出 (functions.php)：

- shiroki_logo_breathe_output() 函数动态输出CSS
- 根据后台设置应用动画周期

🚀 新增涟漪式页面过渡动画

功能描述：在盒子萌主题后台▶️基础设置▶️🌸 樱花过渡页面中新增涟漪式页面过渡动画选项

设置入口：后台▶️盒子萌主题设置▶️基础设置▶️🌸 樱花过渡页面

• none - 关闭过渡动画
• sakura - 🌸 樱花过渡动画（原有功能）
• ripple - 💧 涟漪式过渡动画（新增）

涉及文件：

• 设置项：wp-content/themes/lolimeow-shiroki/core/panel/settings/set-basis.php

- 将原来的 boxmoe_page_loading_switch checkbox 改为 boxmoe_page_loading_type radio
- 新增三个选项：关闭/樱花动画/涟漪动画

• 头部模板：wp-content/themes/lolimeow-shiroki/header.php

- 根据 boxmoe_page_loading_type 设置判断显示哪种动画
- 樱花动画：保留原有的樱花SVG加载动画
- 涟漪动画：引入新的涟漪过渡动画容器，加载对应CSS和JS文件

• 涟漪动画CSS：wp-content/themes/lolimeow-shiroki/assets/css/page-ripple-transition.css

- 🌊 从点击位置圆形扩散的涟漪效果（半透明毛玻璃拟态）
- 🔮 横板弹珠加载动画（不规则跳动）
- ⏳ 进度百分比显示（与dots同行）
- 🎯 目标URL显示（毛玻璃卡片）
- 🌆 暗色模式适配
- 📱 移动端适配
- ♿ 减少动画偏好适配

• 涟漪动画JS：wp-content/themes/lolimeow-shiroki/assets/js/page-ripple-transition.js

- 拦截页面链接点击事件
- 记录点击位置，计算涟漪扩散范围
- 显示加载动画和进度百分比
- 页面跳转后自动退出动画

• 预加载器初始化：wp-content/themes/lolimeow-shiroki/assets/js/boxmoe.js

- 更新选择器为 .preloader-sakura，匹配新的樱花动画类名

样式特点：

1. 涟漪层：半透明毛玻璃效果 backdrop-filter: blur(20px)，从点击位置圆形扩散
2. 加载器：圆角胶囊形状，白色半透明背景，内部包含8个跳动dot和百分比数字
3. Dot动画：默认灰色，激活时变为粉色并带发光效果
4. 百分比文字：深粉色加粗显示，带白色阴影增强可读性
5. 目标URL：毛玻璃卡片样式，等宽字体显示完整URL

🧧 新增红包雨飘落

┏━🏇━━━━━🏇━┓
　 春风得意马蹄疾
　 一日看尽长安花
　 爆竹声中辞旧岁
　 骏马奔腾迎新春
┗━🧧━━━━━🧧━┛
　　 新 年 快 乐 🏮
²⁰²⁶ 丙午马年 🐎

📋 功能概述

将原有的【网页飘落樱花】功能扩展为【网页飘落动画】，新增红包雨飘落效果，支持自定义SVG图标，并智能避开文章阅读区域。

🗂️ 涉及文件

⚙️ 后台设置修改

在 set-basis.php 中将原来的复选框改为单选框：

$options[] = array(
    'name' => __('🎊 网页飘落动画', 'ui_boxmoe_com'),
    'id' => 'boxmoe_falling_animation_type',
    'type' => "radio",
    'std' => "none",
    'options' => array(
        'none' => __('关闭飘落动画', 'ui_boxmoe_com'),
        'sakura' => __('🌸 樱花飘落', 'ui_boxmoe_com'),
        'redpacket' => __('🧧 红包雨', 'ui_boxmoe_com')
));

选项说明：

• none - 关闭所有飘落动画
• sakura - 樱花飘落效果
• redpacket - 红包雨飘落效果

🎨 资源加载逻辑

在 fun-basis.php 中根据用户选择动态加载对应JS：

/* 🎊 网页飘落动画加载 */
$falling_animation_type = get_boxmoe('boxmoe_falling_animation_type', 'none');
if($falling_animation_type == 'sakura'){
    wp_enqueue_script('sakura-script', boxmoe_theme_url() . '/assets/js/sakura.js', array(), THEME_VERSION, true);
}elseif($falling_animation_type == 'redpacket'){
    wp_enqueue_script('redpacket-script', boxmoe_theme_url() . '/assets/js/redpacket.js', array('boxmoe-script'), THEME_VERSION, true);
    /* 🧧 传递红包和金币图片路径到JS */
    wp_localize_script('redpacket-script', 'redpacket_object', array(
        'redpacket_url' => boxmoe_theme_url() . '/assets/images/svg/redpacket.svg',
        'coin_url' => boxmoe_theme_url() . '/assets/images/svg/coin.svg'
    ));
}

🧧 红包雨动画实现

核心特性

1. 🖼️ 自定义SVG图标

- 支持红包和金币两种图标
- 图标路径通过 wp_localize_script 传递到JS
- 图标文件存放在 assets/images/svg/ 目录

2. 📐 长窄形红包样式

- 红包宽高比为 0.6:1（宽度为高度的60%）
- 更符合传统红包的外观

3. 🎯 智能避开阅读区域

- 仅在文章详情页生效
- 自动检测文章内容区域（.blog-single、.post-single、.single-content 等）
- 红包进入文章区域时透明度降至15%
- 离开文章区域后恢复正常透明度

4. 🎲 随机效果

- 随机大小（0.5 - 1.2倍）
- 随机旋转角度
- 随机水平漂移速度
- 随机下落速度

页面类型检测逻辑

function getContentArea() {
    /* 🔍 首先检测是否是文章详情页 */
    var isSinglePage = document.body.classList.contains('single') || 
                       document.body.classList.contains('single-post') ||
                       document.querySelector('.single-post') !== null ||
                       document.querySelector('.blog-single') !== null;
    
    /* 🏠 如果不是文章详情页（如首页），则不避开任何区域 */
    if (!isSinglePage) {
        return null;
    }
    // ... 检测文章区域
}

透明度调整逻辑

Redpacket.prototype.update = function() {
    // ... 位置更新
    
    /* 📝 检测是否在文章区域内 */
    var contentArea = getContentArea();
    if (contentArea) {
        // 计算红包边界框
        // 检测是否与文章区域重叠
        
        if (isOverlapping) {
            /* 👻 在文章区域内时降低透明度 */
            this.opacity = 0.15;
        } else {
            /* 👁️ 在文章区域外时恢复正常透明度 */
            this.opacity = 1;
        }
    }
    // ...
};

📁 SVG图标文件

文件位置：

assets/images/svg/
├── redpacket.svg  /* 🧧 红包SVG图标 */
└── coin.svg       /* 🪙 金币SVG图标 */

🎮 使用方法

1. 进入后台 → 主题设置 → 基础设置
2. 找到【🎊 网页飘落动画】选项
3. 选择【🧧 红包雨】
4. 保存设置，刷新页面即可看到效果

💡 注意事项

• 红包雨效果仅在非文章区域显示完整效果
• 在文章详情页阅读时，红包会自动变透明，不影响阅读
• 首页和列表页红包正常显示
• 如需更换图标，替换 assets/images/svg/ 目录下的SVG文件即可

📋 文章复制功能优化

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

• 功能描述：在文章编辑页面新增【复制此文章】按钮，并优化文章列表的复制功能，同时统一【写文章】按钮文本为【写新文章】
• 新增功能：

- 【复制此文章】按钮：在文章编辑页面的发布框顶部新增复制按钮，点击后在新标签页打开复制的草稿文章
- 【写文章】文本优化：将文章列表页面顶部的【写文章】按钮文本统一改为【写新文章】，使用 PHP gettext 过滤器和 JavaScript 双重保障确保生效

• 实现方案：

- 文章编辑页面复制按钮：使用 post_submitbox_start 钩子在发布框顶部添加按钮，链接到 boxmoe_duplicate_post_as_draft 处理函数，添加 target="_blank" 属性实现新标签页打开
- 文本替换：通过 gettext 过滤器拦截翻译文本，同时使用 admin_head 钩子注入 JavaScript 脚本，在页面加载完成后查找 .page-title-action 类按钮并替换文本
- 权限检查：复制按钮只在用户有 edit_posts 权限且编辑已有文章时显示

• 效果说明：编辑文章时可在右侧发布框快速复制当前文章，文章列表页面的新建按钮显示为【写新文章】，操作更加直观

代码位置

• 功能实现：wp-content/themes/lolimeow-shiroki/core/module/fun-admin.php

⏱️ 文章最后更新时间计时器

文件位置: core/panel/settings/set-artice.php · page/template/blog-single.php · assets/css/style.css · assets/js/boxmoe.js

• 功能描述：在文章页面底部新增一个持续计时器，显示从文章最后更新到现在已经过去的时间，帮助读者判断内容的时效性
• 后台设置：

- 在【文章设置】中新增【文章最后更新时间计时器设置】分组
- 支持开启/关闭计时器（默认关闭）
- 支持自定义计时器提示文字（默认：上一次更新已经跑远了✨）
- 支持自定义计时器副标题文字（默认：(‾◡◝) 本内容里的一些消息，可能已经跟不上时间啦～）

• 实现方案：

- PHP模板：在 blog-single.php 的 post-actions 下方添加计时器HTML结构，使用 data-modified-time 属性存储最后更新时间
- CSS样式：添加 .post-update-timer 相关样式，包含亮色/暗色模式适配、移动端响应式优化
- JS功能：添加 initPostUpdateTimer() 函数，实时计算并格式化显示时间差（年/月/日 时/分/秒）
- 字体同步：计时器文字使用 font-family: inherit 继承站点默认字体，与【字体设置】保持同步

• 效果说明：文章页面底部显示一个带有时钟图标的卡片，实时显示距离最后更新的时间，提示读者内容可能已过时

代码位置

• 后台设置：wp-content/themes/lolimeow-shiroki/core/panel/settings/set-artice.php
• 文章模板：wp-content/themes/lolimeow-shiroki/page/template/blog-single.php
• 样式定义：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• JS功能：wp-content/themes/lolimeow-shiroki/assets/js/boxmoe.js