Lared Theme Docs — 基于 Tailwind CSS，专注内容本身
写作体验
双模式编辑器工具
插图和排版指南同时兼容「可视化模式」和「代码模式」
短代码工具箱
[download_button] 下载卡片 · [code_runner] 实时沙盒 · [red_code] 高亮行内代码
文章目录
自动生成、滚动高亮、平滑跳转，无需额外插件
图片网格
lared-grid-2/3/4 多栏图片布局，hover 放大、灯箱查看
评论系统
AJAX 无刷新提交
评论即时出现，无需等待页面重载
60 秒编辑窗口
提交后发现错别字？60 秒内可以修改
回头访客识别
Cookie 记忆 + 头像检测，老朋友回来有欢迎语
管理员徽章
博主评论自动标记皇冠图标 + "博主" 标识
UA 解析
操作系统 + 浏览器版本自动解析，支持 Client Hints
邮件通知
双通道发送
SMTP 标准协议 / Resend API 现代 HTTP 发送
三类通知模板
管理员通知（新评论 / 待审核）、回复通知、测试邮件
模板风格
深色 Header + 红色强调线 + 管理员头像，直角设计与主题一体
后台预览
4 种模板类型实时预览，所见即所得
AI 文章摘要
多服务商支持
OpenAI / DeepSeek / Kimi / MiniMax 四家服务商
品牌图标
右上角自动展示对应服务商品牌图标
自动生成
每篇文章自动生成 AI 摘要卡片
图片处理
WebP 自动转换
Imagick 驱动，上传时自动生成 WebP 格式
云存储集成
Cloudflare R2 + Lsky Pro 图床，一键配置
懒加载
lazysizes v5.3.2，IntersectionObserver + MutationObserver 双驱动
加载动画
7 种效果任选：淡入 / 像素化 / 模糊 / 扩散 / 百叶窗 / 滑入 / 旋转缩放
灯箱查看
点击图片大图预览，轻量级实现
相册页面
独立模板，支持前端多图上传至 R2，方形卡片网格布局
音乐播放器
首页内联播放器
可视化频谱柱 + 居中歌曲名 + 进度条悬停时间提示
悬浮播放器
固定在页面左上方，歌曲名 + 控制按钮 + 进度条
歌词面板
侧边歌词同步滚动，仅内页显示，PJAX 自动切换
进度条交互
点击跳转 + 拖拽 + 悬停时间 tooltip
Xplayer 插件
胶囊型设计，深蓝面板 + 右键菜单 + 网易云/QQ 音乐数据源
性能与更多
PJAX 导航
Barba.js 无刷新页面切换，丝滑体验
零网络字体
系统原生字体栈，零额外请求
智能缓存
CSS/JS 基于 filemtime() 自动版本号 + Transient 缓存
RSS 订阅聚合
多源管理 + 一键刷新 + 单源失败自动跳过 + 本地缓存
Memos 动态
接入 Memos API：短动态展示 + 关键词提取
代码高亮
Prism.js 驱动 · 自动语言检测 / 行号 / 复制 / 折叠
页面模板
- 悬浮 + 首页播放器进度条悬停时间提示（tooltip 跟随鼠标）
- 歌词面板限制为内页显示，PJAX 返回首页时自动隐藏
- 邮件调试：wp_mail_failed 钩子记录失败详情至 debug.log
- 友链 text 样式字母兜底头像（favicon 加载失败时显示站名首字母）
- 友链头像支持 lazysizes 懒加载与页面图片动画效果
- 悬浮播放器：进度条容器高度修复（1px→14px）、圆点归位、红色填充覆盖底线
- 悬浮播放器：歌曲名与按钮间距增加、按钮阴影/轮廓全部移除
- 首页播放器：可视化柱高度增大（10-18px→14-26px）、时间显示隐藏、歌曲名居中
- 首页播放器：播放时隐藏进度条避免与可视化柱重叠，hover 时恢复
- 评论 UA 信息：操作系统与浏览器版本号改为行内显示
- 友情链接 text 样式重构：2 列→4 列布局、32×32 favicon 图标（圆角 4px）
- 友链头像优先使用自定义图片，无设定时 ico.bluecdn.com 获取 favicon
- Favicon API 从 Google 迁移至自托管 ico.bluecdn.com（card 样式同步迁移）
- 邮件模板系统全面重构 — 直角风格 + 主题配色
- 评论通知 Hook 系统，新评论/回复自动通知
- 邮件模板预览支持 4 种类型切换
- 文章页脚版权链接前添加 CC 图标
- 邮件模板全面使用主题色 + 统一字体栈
- 所有邮件模板采用直角设计 — 零 border-radius
- 禁用 WordPress 默认评论通知（由主题自定义通知替代）
- 移除旧版紫色渐变邮件模板
- 后台新增「邮件设置」Tab — SMTP / Resend API 双模式切换
- 统一发件人配置：发件人名称 + 发件人邮箱
- 邮件测试发送功能 + 实时发送结果反馈
- 邮件 HTML 模板系统（响应式 600px 宽度）
- 邮件模板预览 + 全屏查看功能
- AI 摘要卡片显示服务商图标（OpenAI / DeepSeek / Kimi / MiniMax）
- AI 摘要卡片紧贴文章顶部
- 评论提交按钮加载态优化
- RSS 订阅按钮 tooltip 改为自定义主题色弹窗
- 评论区所有 tooltip 统一为自定义样式
- 修复 macOS 版本号冻结在 10.15.7 — 实现 User-Agent Client Hints
- 移除 IP 地理位置 JSON 缓存，改为纯数据库 + 内存级静态缓存
- RSS 拉取跳过机制：失败源标记 "（已跳过）" 并继续拉取
- 字体系统重构：系统原生字体替代 CDN 网络字体
- 修复 Xplayer API 模板 URL 无法保存的问题
- 修复 RSS 订阅「一键刷新」报错 "获取源列表失败"
- 完全移除暗黑模式 — 1054 行 CSS + JS
- 移除 CDN 字体加载
- Xplayer 插件 UI 全面重构为胶囊型设计
- Xplayer 右键菜单：播放控制 / 模式切换 / 歌曲列表
- Xplayer 可部署 Meting API（网易云 / QQ 音乐）
- 播放列表改为弹出式面板，控制区仅保留核心按钮
- 引入 Plyr v3.7.8 作为文章内 video / audio 播放器
- 全新 Xplayer WordPress 插件 — 毛玻璃面板 + 封面旋转
- 从主题中完全移除 APlayer v1.10.1（~430 行）
- 音乐功能全部迁移到 Xplayer 插件
- RSS 管理页添加「刷新全部订阅」按钮
- 相册页面模板 — 前端多图上传至 R2 + 方形卡片网格
- 图片加载动画扩展至 7 种效果
- lazysizes v5.3.2 懒加载取代原生 loading="lazy"
- RSS / Memos 缓存 JSON 统一迁移至 data/
- initImageLoadAnimation() 简化为仅设置 data-img-animation 属性
- 删除未使用的 lazyImage.js / lazyVideo.js
- 下载按钮短代码 [download_button] PHP 实现
- 文章内链接自动添加 link icon
- 评论系统全面增强 — 回复拦截 / 60 秒编辑 / 表情面板 / 回头访客
- 修复 PJAX 拦截评论回复链接导致页面刷新
- 修复 addComment.init() 未重新初始化
- 修复 Cookie 保存 + CSS/JS 版本号缓存
- 提交按钮 loading 动画增强
- Toast 改为直角小字体，移除 emoji
- 主题基础框架 — WordPress 6.0+ / PHP 8.0+
- 响应式设计，适配移动端和桌面端
- PJAX 无刷新页面加载 · Memos 动态集成 · RSS 订阅聚合
- PrismJS 代码高亮 · ViewImage 灯箱 · 图片懒加载 + 动画
- 短代码工具箱 · AJAX 评论 · 文章目录导航
- 首页 Hero 区域 + 60 天热力图 + 热门文章 + 标签云
技术栈
Tailwind CSS v4
样式系统
Barba.js
PJAX 无刷新导航
Prism.js
代码高亮
lazysizes
图片懒加载
Plyr
音视频播放器
Font Awesome
图标库
PHP 8.0+
后端语言
WordPress 6.0+
CMS 基础
环境要求
致谢
Tailwind CSS · Barba.js · PrismJS · ViewImage · lazysizes · Plyr · Font Awesome
Lared 由 西风 独立设计开发。