Luliy Blog v6 增强功能完整说明书

本文档基于您提供的 enhance.js、enhance.css 以及 Gmeek 配置文件 config.json 编写。旨在帮助开发者、维护者或高级用户完全理解本博客的定制化增强系统，包括配置文件、视觉主题、交互功能及二次开发指南。

📁 一、文件概览

⚙️ 二、config.json 配置说明书

该文件控制博客基础行为、页面结构、外部插件及主题。

2.1 基础元数据

2.2 图标与外部链接 (iconList / exlink)

• iconList：为单页（如 about, archive）提供 GitHub 风格的 SVG path 数据，用于导航图标渲染。
• exlink：定义右上角导航的额外链接（如 github, rss, tags），会生成对应图标按钮。

2.3 样式与脚本注入 (allHead, script, style 等)

这是定制的核心入口：

"allHead": "<link href='...primer.css' ... /><script src='articletoc.js'></script>...<link rel='stylesheet' href='/enhance.css'><script defer src='/enhance.js'>"

• Primer CSS：GitHub 风格基础样式。
• Katex / Mermaid / Chart.js：数学公式、图表、流程图支持。
• articletoc.js：自动生成文章目录（插件）。
• Prism.js：代码高亮。
• Live2D：看板娘（可选）。
• enhance.css / enhance.js：本增强系统，必须保留才能启用所有新功能。

style 和 indexStyle 提供额外内联样式（如首页卡片 hover、头像阴影），与 enhance.css 互补。

2.4 特色配置项

• commentLabelColor：标签颜色（影响标签页样式）。
• bottomText：页脚版权文字。
• ogImage：社交分享预览图。

⚠️ 注意：allHead 末尾已包含对 /enhance.css 和 /enhance.js 的引用，请确保这两个文件在网站根目录可访问。

🎨 三、enhance.css 样式系统说明书

该 CSS 文件完全接管了博客外观，并支持多主题（data-luliy-theme）和多阅读皮肤（data-skin）。

3.1 CSS 变量体系

全局变量（:root）

主题变量（data-luliy-theme="xxx"）

影响文章内 h1~h5 及 strong 标签的样式。

已有主题：default, classic-blue, eco-green, sunset, mono, cyberpunk, sakura。

阅读皮肤（data-skin="xxx"）

控制整个页面的背景、文字、引用块等。

已有皮肤：parchment（羊皮纸）, ink（水墨）, ocean（深海蓝）, sakura（樱花粉）。

这些主题/皮肤均通过悬浮工具栏的 ✨风格主题 按钮统一切换（SINKS 数组绑定）。

3.2 主要组件样式

3.3 响应式断点

• 移动端（<768px）：卡片网格单列，工具栏缩小，导航栏折叠头像区换行。
• 所有容器最大宽度 1000px，左右自动居中。

3.4 背景图片

body {
  background-image: url('https://raw.githubusercontent.com/.../bg.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

如需更换，修改该 URL 即可。

🧩 四、enhance.js 功能模块详解

该文件采用 IIFE 封装，定义了 20 个核心模块，并按页面类型（首页/文章页）分别初始化。

4.1 模块列表与说明

4.2 重要数据结构

SINKS 数组（统一风格主题）

每个对象包含：

{
  id: 'sakura',
  label: '樱花少女',
  dot: '#f9a8c9',
  skin: 'sakura',        // 对应 data-skin 值
  theme: 'sakura',       // 对应 data-luliy-theme 值
  cardPalette: ['#e05c8a','#f9a8c9','#c94070','#ffb7c5'],
  desc: '粉嫩樱花，少女心思'
}

切换时会同时修改：

• 阅读皮肤 (data-skin)
• 文章主题 (data-luliy-theme)
• 卡片渐变边框颜色 (CSS 变量 --card-c1 ~ --card-c4)
• 本地存储 luliy-sink

文章锁定密码

var LOCK_HASH = sha256('121383');   // 原始密码为 '121383'

如需修改密码，重新计算新密码的 SHA256 并替换该常量。

文章数据获取

fetchPosts() 会尝试请求 /postList.json，返回标准化后的文章数组（包含 title, link, created, labels, pinned）。

卡片生成逻辑

• 置顶文章单独显示在 #luliy-pinned-section（仅首页第 1 页）
• 普通文章按 perPage = 12 分页，页码从 URL 参数 ?page= 读取
• 每个卡片显示：发布日期（前10字符）、标题、标签 pills（带背景色）

4.3 与第三方插件的协作

• articletoc.js：生成的目录会被 initArticleTocSpy() 注入返回顶部按钮并添加 scroll-spy。
• Prism.js：代码高亮，但 macOS 按钮功能独立。
• Gmeek 原生样式：大部分原生样式被 enhance.css 覆盖或隐藏（如 .subTitle、原生卡片列表）。

🚀 五、部署与自定义指南

5.1 文件放置

将以下文件上传到 GitHub Pages 仓库根目录：

/enhance.js
/enhance.css
/static/img/bg.png          （背景图，确保 URL 与 CSS 中一致）

并确认 config.json 的 allHead 中包含对两者的引用（已有）。

5.2 修改默认皮肤/主题

• 更换默认 SINK：修改 enhance.js 中 (function() { var savedSinkId = ... 的初始值。
• 添加新的 SINK：扩展 SINKS 数组，并同步更新 CSS 中对应的 body[data-skin="xxx"] 和 body[data-luliy-theme="xxx"] 规则。

5.3 更换密码

编辑 enhance.js，找到：

var LOCK_HASH = sha256('121383');

将 '121383' 替换为您的数字密码，然后重新计算 SHA256 并替换该行。注意不要仅修改原始字符串，必须同时修改哈希值。

5.4 自定义樱花参数

在 initSakura() 函数中调整：

• petals 数量（默认 45）
• 颜色数组 COLORS
• 速度、摇摆幅度等参数

5.5 关闭不需要的功能

• 樱花：在悬浮工具栏点击 🌸 按钮关闭（会存入 localStorage）。
• 音效：点击 🔈 按钮关闭。
• 背景图：直接在 CSS 中覆盖 body 的 background-image 为 none。

5.6 兼容性注意事项

• 需要浏览器支持 AudioContext（音效）、Canvas（樱花）、backdrop-filter（毛玻璃）。
• 代码块的复制功能在非 HTTPS 环境下会回退到 execCommand（依然可用）。
• 锁定页面的 sessionStorage 只对当前标签页有效。

🛠️ 六、常见问题 FAQ

Q：为什么我的首页没有显示卡片网格？
A：检查是否在 postList.json 生成后访问，且 SideNav 元素存在。另外确保不在 tag 页面（tag.html），因为标签页会保留原生列表。

Q：如何修改“已陪伴”起始日期？
A：修改 enhance.js 中 new Date('2026/05/30 00:00:00') 部分。

Q：SINK 菜单不弹出？
A：检查浏览器控制台是否有 JS 错误。确保悬浮工具栏已注入（#luliy-toolbar 存在）。

Q：文章目录滚动高亮不准？
A：可能是页面其他元素影响了 getBoundingClientRect().top <= 110 的判断阈值，可微调该数值。

Q：我想在文章页显示不同的 SideNav？
A：initCards() 会跳过 tag 页面，文章页不会执行卡片重构，所以原生导航依然保留。

Q：收藏锁页面无法解锁？
A：确认文章中包含文本 favorites 或标签含有 Favorites，且密码正确（默认是 121383）。如果自定义过密码，请确保 SHA256 值一致。

📦 七、依赖清单

以上均已通过 allHead 引入，无需手动额外安装。

✅ 八、结语

本增强系统为 Luliy Blog 带来了现代化、高性能且高度可定制的用户体验。所有代码均以原生 JavaScript + CSS 实现，不依赖大型框架，便于维护和二次开发。如果您需要在此基础上进行更深度的修改，建议先熟悉各模块的职责，然后按功能逐一调整。

各部件作用

文档版本：v1.0
最后更新：2026-06-07
适配 Gmeek 版本：lastde