🔠 前台代码注释显隐开关
功能描述：
在后台主题设置的【系统优化】中新增「移除前端HTML注释」开关，开启后前台页面将不再渲染代码文件中的所有注释，包括：
- HTML 注释 `<!-- -->`
- `<script>` 标签内的 JS 单行注释 `//` 和多行注释 `/* */`
- `<style>` 标签内的 CSS 注释 `/* */`
涉及文件：
core/panel/settings/set-optimize.php- 添加后台设置选项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
⚙️ 实现原理
- 后台设置: 在【安全项优化设置】分组中添加两个checkbox类型的设置项，默认均为关闭状态
- 前端拦截: 通过
wp_footer钩子注入JavaScript代码，监听keydown事件 - F12拦截: 检测
e.key === 'F12'，阻止默认行为 - Ctrl+S拦截: 检测
(e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's'，兼容Windows(Ctrl)和Mac(Command)系统 - 作用范围: 仅在非管理后台且非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实现，性能友好
代码实现：
- CSS动画定义 (style.css)：
@keyframes logo-breathe {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.08);}
}
- 后台设置 (set-beautify.php)：
- 添加【LOGO动效设置】分组
- 包含开关和周期设置两个选项
- 前端输出 (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，匹配新的樱花动画类名
样式特点：
- 涟漪层：半透明毛玻璃效果
backdrop-filter: blur(20px)，从点击位置圆形扩散 - 加载器：圆角胶囊形状，白色半透明背景，内部包含8个跳动dot和百分比数字
- Dot动画：默认灰色，激活时变为粉色并带发光效果
- 百分比文字：深粉色加粗显示，带白色阴影增强可读性
- 目标URL：毛玻璃卡片样式，等宽字体显示完整URL
🧧 新增红包雨飘落
┏━🏇━━━━━🏇━┓
春风得意马蹄疾
一日看尽长安花
爆竹声中辞旧岁
骏马奔腾迎新春
┗━🧧━━━━━🧧━┛
新 年 快 乐 🏮
²⁰²⁶ 丙午马年 🐎
📋 功能概述
将原有的【网页飘落樱花】功能扩展为【网页飘落动画】，新增红包雨飘落效果，支持自定义SVG图标，并智能避开文章阅读区域。
🗂️ 涉及文件
| 文件路径 | 说明 |
|---|---|
| --------- | ------ |
core/panel/settings/set-basis.php |
后台设置选项修改 |
core/module/fun-basis.php |
JS资源加载逻辑 |
assets/js/redpacket.js |
红包雨动画核心代码 |
assets/images/svg/redpacket.svg |
红包SVG图标 |
assets/images/svg/coin.svg |
金币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'
));
}
🧧 红包雨动画实现
核心特性
- 🖼️ 自定义SVG图标
- 支持红包和金币两种图标
- 图标路径通过 wp_localize_script 传递到JS
- 图标文件存放在 assets/images/svg/ 目录
- 📐 长窄形红包样式
- 红包宽高比为 0.6:1（宽度为高度的60%）
- 更符合传统红包的外观
- 🎯 智能避开阅读区域
- 仅在文章详情页生效
- 自动检测文章内容区域（.blog-single、.post-single、.single-content 等）
- 红包进入文章区域时透明度降至15%
- 离开文章区域后恢复正常透明度
- 🎲 随机效果
- 随机大小（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图标 */
🎮 使用方法
- 进入后台 → 主题设置 → 基础设置
- 找到【🎊 网页飘落动画】选项
- 选择【🧧 红包雨】
- 保存设置，刷新页面即可看到效果
💡 注意事项
- 红包雨效果仅在非文章区域显示完整效果
- 在文章详情页阅读时，红包会自动变透明，不影响阅读
- 首页和列表页红包正常显示
- 如需更换图标，替换
assets/images/svg/目录下的SVG文件即可
评论（2）