本站主题

Xiaofan 主题介绍

一个专注于深色风格、性能与交互体验的 WordPress 主题。内置响应式导航、明暗主题切换、评论与公众号验证解锁的隐藏内容、数据图表、音频/视频组件、文章目录等常用能力，开箱即用。

特性概览

  • 响应式导航：PC 显示完整菜单；移动端显示汉堡抽屉与遮罩，支持键盘逃逸与点击遮罩关闭
  • 明暗主题切换：页眉右侧开关，自动保存为本地偏好（localStorage）
  • 文章目录（TOC）：自动收集正文 h2/h3 标题，滚动联动高亮当前章节
  • 隐藏内容：支持「剧透隐藏」「评论后可见」「公众号验证可见」三种解锁方式
  • 数据图表：内置古腾堡图表块，支持 radar/line/bar/pie 以及 3D 效果的 bar3d/pie3d
  • 媒体组件：音频播放器、音频播放列表、本地视频、外链视频，样式统一，暗色优化
  • 交互增强：返回顶部按钮、平滑滚动、走马灯/轮播（如有）
  • 细节打磨：分页、分类页、引用、代码与表格的暗色可读性优化

安装与启用

  • 将主题文件夹 xiaofan-theme 放入 wp-content/themes/
  • 后台「外观 → 主题」启用 Xiaofan 主题
  • 后台「外观 → 菜单」将你的主菜单分配到位置 Primary Navigation

导航与外观

  • PC 端：导航栏展示完整菜单，汉堡按钮不显示
  • 移动端：出现汉堡按钮，点击后右侧抽屉拉出，遮罩可点击关闭
  • 主题切换：右侧主题开关（亮/暗），会在浏览器中保存你的选择

内容组件（古腾堡）

隐藏内容（xiaofan/hidden-content）

  • 解锁方式：
    • 剧透隐藏：点击「立即解锁」显示内容
    • 评论后可见：用户在本文下方发表评论并通过审核后显示
    • 公众号验证：用户在公众号回复验证码（2分钟有效）后显示
  • 使用步骤：
    • 在编辑器插入「隐藏内容」块
    • 右侧面板选择解锁类型并填写标题
    • 在块内容区域放入被隐藏的正文（图文/图表/媒体均可）
    • 保存后前台自动处理解锁逻辑（评论与验证通过后会异步拉取内容）

数据图表（xiaofan/chart）

  • 支持类型：radar、line、bar、pie、bar3d、pie3d
  • 使用步骤：
    • 在编辑器插入「数据图表」块
    • 右侧面板配置标签与数据集，颜色与柱宽可调
    • 前端自动加载 Chart.js（主题已内置 CDN/本地双方案）
    • 隐藏内容解锁时，图表会自动初始化并渲染

音频与播放列表

  • 音频播放器（xiaofan/audio-embed）：上传或粘贴音频地址，支持封面、时间进度与滑条拖动
  • 音频播放列表（xiaofan/audio-playlist）：可添加多条音轨，点击列表切换播放

视频

  • 本地视频（xiaofan/video-local）：选择站点媒体库文件，支持封面、循环、静音等
  • 外链视频（xiaofan/video-embed）：粘贴外部视频地址进行嵌入

其他组件

  • 文章嵌入卡片（xiaofan/post-embed）：展示封面、标题与摘要，适合站内内容推荐
  • 按钮组（xiaofan/button-group）：主操作与次要操作的组合按钮
  • 手风琴/折叠（xiaofan/accordion）：可折叠的内容区块
  • 数据表格（xiaofan/dark-table）：暗色优化的表格组件

评论与验证

  • 评论后可见：
    • 用户发表评论并通过审核后，前台会自动解锁对应的隐藏内容
    • 页面刷新后仍可见（无需重复验证）
  • 评论验证码（可选）：
    • 后台自定义器提供多种验证码：英文、数字、中文、滑动
    • 未登录用户在提交评论前需要完成验证码校验
  • 公众号验证码：
    • 后台配置二维码与自动回复模板
    • 用户扫码后回复验证码，短期有效（默认 2 分钟）

主题设置（自定义器）

  • 幻灯片高度：slider_height（影响首页/列表页顶部轮播区高度）
  • 公众号相关：
    • wechat_enabled（开启/关闭验证）
    • wechat_qr_code（公众号二维码）
    • wechat_reply_template（自动回复模板，如：验证码：{code}（2分钟内有效））
  • 评论验证码类型：comment_captcha_type（none/zh/en/num/slide）

开发者小贴士

  • 前端脚本：assets/js/main.js（交互与动态渲染）、assets/js/blocks.js（古腾堡自定义块）
  • 后端渲染：functions.php 中注册与渲染（如 xiaofan_render_hidden_content）
  • 图表依赖：Chart.js 4.x（主题会优先加载本地文件，不存在时使用 CDN）
  • 无障碍与体验：导航遮罩支持键盘 Esc 关闭；滚动与锚点跳转均做了平滑处理

常见问题

  • 为什么 PC 端也出现汉堡菜单？
    • 仅移动端会显示汉堡按钮；PC 端展示完整菜单。若缓存旧样式，请强制刷新或清空缓存
  • 评论后隐藏内容仍未显示？
    • 需等待评论通过审核；通过后自动拉取并解锁
  • 图表未渲染？
    • 检查页面是否成功加载 Chart.js；对于解锁后插入的内容，主题会自动初始化图表

致谢

  • 图标：Font Awesome
  • 图表：Chart.js
  • 编辑器：WordPress Gutenberg
下载主题 xiaofan-theme.zip
剧透隐藏

本主题经过佛祖开过光的，具体可在F12 -> 控制台查看

如果您觉得好用，可以打赏我：

微信
支付宝
剧透内容已隐藏
点击下方按钮立即查看