星博客 — 一款简约风格博客主题

星博客是一款基于 Emlog Pro开发的卡片式博客主题，采用 VAM 选项框架，主打视觉质感、完整用户体系、零插件依赖三大特色。从首页到用户中心，从文章页到后台设置，每一处都经过精心打磨。

标签：液态玻璃 / 用户中心 / 签到等级 / 自定义字体 / 安全防护 / 性能优化

一、核心特点

1. 液态玻璃视觉
   纯 SVG feTurbulence 分形噪波 + feDisplacementMap 折射滤镜，零 JS 依赖，backdrop-filter 毛玻璃贯穿全站。
2. 完整用户中心
   签到系统、10级等级徽章、点赞/收藏/关注、资料管理、文章/评论/收藏/关注列表，无需任何插件。
3. 弹窗登录
   隐藏 iframe 直连 Emlog 官方接口，cookie 原生生成；注册/找回密码走 cURL 代理，不破坏认证体系。
4. 自定义字体
   支持上传字体文件或填写外部 CDN 链接，一键全站替换，CSP 自动放行，font-display: swap 防闪烁。
5. 文章字号可调
   后台滑块控制正文基础字号（12-24px），标题、代码块、表格按 em 等比例缩放。
6. 列表双模式
   经典横向卡片 / 网格模式（2-5列可调）自由切换，AJAX 无限滚动加载。
7. 安全内置
   CSP 内容安全策略、HSTS、XSS 防护、Token 校验、CSS 注入正则白名单。
8. 性能优化
   N+1 查询修复、preconnect 预连接、JS defer、CSS filemtime 自动版本号、图片原生懒加载。

二、功能一览

模块	功能
首页	幻灯片轮播、卡片网格/经典列表双模式、AJAX 无限滚动、置顶/NEW 标签
文章页	Hero 渐变页头、封面图懒加载、嵌套评论、Cravatar 头像回退、正文字号可调
用户中心	签到（7天递增奖励）、等级体系（10级徽章）、经验规则、点赞/收藏/关注、资料管理
侧边栏	8 个 Widget 组件、后台拖拽排序、参数化配置
页脚	三栏布局（品牌+导航+二维码）、社交图标、友情链接、版权备案
后台	VAM 选项框架、全局设置/页面设置/功能设置、备份导出
字体	自托管 PingFang SC 默认字体 + 后台上传/外链自定义字体
安全	CSP / HSTS / X-Frame-Options / XSS 防护 / Token 校验

三、环境要求

• Emlog Pro（不支持 Emlog 5.x 旧版）
• PHP 7.0 及以上（推荐 PHP 7.4 / 8.0 / 8.1 / 8.2）
• MySQL 5.5 及以上
• VAM 选项框架插件（必装，主题后台设置依赖此框架）
• 浏览器支持 backdrop-filter（Chrome 76+、Firefox 70+、Safari 9+，不影响功能，仅影响毛玻璃效果）

注意：VAM 选项框架（Vaimi Options）是主题后台设置的依赖项，必须先安装并启用 VAM 插件，否则主题后台设置页面无法正常显示。

四、安装方法

方法一：后台上传安装（推荐）

1. 下载主题压缩包 5iml_xing.zip（请勿解压）
2. 登录 Emlog 后台 → 外观 → 主题
3. 点击「上传主题」，选择 5iml_xing.zip
4. 上传成功后，在主题列表中点击「启用」
5. 安装并启用 VAM 选项框架插件
6. 点击主题设置进入 VAM 后台面板，开始配置

方法二：FTP 手动上传

1. 解压 5iml_xing.zip
2. 将解压后的 5iml_xing 文件夹上传到服务器 /content/templates/ 目录
3. 登录 Emlog 后台 → 外观 → 主题，找到 5iml_xing 并点击「启用」
4. 安装 VAM 选项框架插件
5. 进入主题设置开始配置

提示：启用主题后会自动创建点赞、收藏、关注、积分日志等数据表，并在文章表追加 like_count 字段。卸载主题时会自动清理这些数据，干净无残留。

五、后台配置指南

主题启用后，在后台左侧菜单找到「5iml_xing 主题设置」（需 VAM 插件已启用），分为三大栏目：

全局设置

• LOGO 图像 — 网站 Logo、Favicon、搜索开关
• 字体设置 — 启用自定义字体、上传字体文件或填写外链、加载策略
• 背景设置 — 主题色、内容宽度、网站背景（纯色/图片）、首页显示模式

页面设置

• 首页设置 — 阅读量/评论数显示、摘要行数、卡片网格模式、AJAX 滚动
• 幻灯片设置 — 手动配置图片/标题/链接，或绑定文章自动取封面
• 文章页设置 — 作者显示、图片懒加载、正文字号滑块、Hero 页头渐变样式
• 侧边栏设置 — Widget 拖拽排序 + 各组件数量配置
• 页脚设置 — 品牌区、社交图标、导航链接、二维码、版权备案、登录弹窗
• 评论设置 — 评论框/评论列表顺序、Gravatar 头像

功能设置

• 签到设置 — 连续签到 1~7 天递增奖励（积分+经验）
• 用户等级 — 10 级等级配置（名称/图标/经验阈值）+ 8 项经验获取规则（签到/注册/登录/发文/评论等），每项可独立配置经验值和每日上限

六、拓展功能

自定义字体

主题默认使用自托管的 PingFang SC Semibold 字体（font/PingFangSC-Semibold.woff2）。如需更换：

1. 进入「全局设置 → 字体设置」
2. 打开「启用自定义字体」开关
3. 方式一：直接上传 .woff2 / .woff / .ttf 字体文件
4. 方式二：填写外部 CDN 链接（如 jsDelivr、BootCDN）
5. 填写字体 CSS 名称（留空则自动取文件名）
6. 选择加载策略（推荐 swap）
7. 保存后全站字体即时替换

外部链接和上传文件同时填写时，优先使用外部链接。CSP 会自动放行对应字体域名。

用户等级体系

主题内置 10 张等级徽章图（img/lv/LV-1.png ~ LV-10.png），经验曲线默认为：

等级	名称	所需经验
1	LV1	0
2	LV2	100
3	LV3	300
4	LV4	600
5	LV5	1000
6	LV6	1500
7	LV7	2100
8	LV8	2800
9	LV9	3600
10	LV10	4500

可在后台自定义每个等级的名称、图标和经验阈值。用户后台上传自定义图标优先于内置图片。

文章正文字号

在「页面设置 → 文章页设置」中，通过滑块调整正文基础字号（12-24px）。标题（H1-H4）、代码块、表格会以 em 为单位等比例缩放，保持排版协调。

侧边栏 Widget

后台支持拖拽排序的 8 个 Widget 组件：

• 博客统计（文章数/评论数/用户数）
• 热门文章（可配置数量）
• 最新评论（可配置数量）
• 标签云
• 最新文章（可配置数量）
• 最新微语
• 友情链接
• 搜索框 / 归档 / 自定义文本

页脚三栏布局

• 品牌区 — Logo + 站点描述 + 社交图标（图标选择器 + 链接）
• 导航区 — 可增删的导航链接 + 友情链接
• 二维码区 — 图片上传 + 标签文字

七、安全特性

安全措施	说明
CSP 内容安全策略	限制脚本/样式/图片/字体来源，防止 XSS 注入
HSTS	HTTPS 下强制加密连接，防止降级攻击
X-Frame-Options	限制页面被嵌入 iframe，防止点击劫持
CSS 注入防护	主题色、背景色正则白名单校验
Token 校验	POST 操作均验证 Emlog LoginAuth::checkToken()
输出过滤	用户输出 htmlspecialchars，评论内容 strip_tags

八、常见问题

Q：后台设置页面空白？
A：请确认已安装并启用 VAM 选项框架插件。主题后台设置依赖此框架。

Q：毛玻璃效果不显示？
A：液态玻璃效果依赖浏览器的 backdrop-filter 支持。Chrome 76+、Firefox 70+、Safari 9+ 均支持。旧版浏览器会降级为半透明背景，不影响功能。

Q：自定义字体不生效？
A：

1. 确认「启用自定义字体」开关已打开
2. 检查字体文件 URL 是否可访问（浏览器直接打开链接测试）
3. 清除浏览器缓存和 CDN 缓存
4. 查看页面源码，搜索 @font-face，确认 src 路径正确

Q：等级图标显示为文字？
A：等级图标为空时会回退到文字徽章（LV1/LV2…）。确认 img/lv/ 目录下有 LV-1.png ~ LV-10.png，或在后台上传自定义图标。

Q：更换主题文件夹名后设置丢失？
A：VAM 配置前缀与主题文件夹名绑定。改名后需在后台重新配置主题设置，或在数据库中将旧键名（如 5iml-lattice_options）修改为新键名（如 5iml_xing_options）。

5iml_xing 主题 · 作者：茉莉小栈 · Powered by Emlog Pro + VAM Options