` 的完整 HTML 片段，用 **AES-256-GCM** 算法加密，再把密文和 IV 写回 HTML： ```html ``` 整个构建流水线只有三步： ```bash hugo --minify # 生成静态 HTML go run encrypt-protected.go # 加密受保护文章 zip -r deploy.zip public/ # 打包上传 ``` 这样部署到服务器的文件里，受保护文章的正文已经是密文——即便服务器被入侵或文件被直接下载，明文也不会泄露。 ### 第二层：浏览器 TOTP 验证 + 实时解密 TOTP 验证基于 RFC 6238 标准，完全运行在浏览器里，用的是原生 Web Crypto API： - **Base32 解码**：将 TOTP 密钥从 Base32 转换为字节数组 - **HMAC-SHA1**：`crypto.subtle.importKey` + `crypto.subtle.sign` 计算 HMAC - **HOTP 算法**：动态偏移量截取 6 位数字 - **TOTP 校验**：允许前后各一个时间窗口（±30 秒），容忍时钟误差验证通过后，`decryptGate()` 函数接管：从 `data-enc` / `data-iv` 读取密文，用 `crypto.subtle.decrypt` 实时解密，将还原出的 HTML 片段注入页面——连浮动目录的锚点也是在这一刻才真正生成的。 ```js async function decryptGate() { const gate = document.getElementById('prot-content-gate'); const key = await deriveAesKey(); // SHA-256(TOTP_secret) → AES key const iv = b64ToBytes(gate.dataset.iv); const ct = b64ToBytes(gate.dataset.enc); const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct); gate.innerHTML = new TextDecoder().decode(pt); } ``` ### 保护级别的诚实说明这套方案能保护内容对抗两类威胁：**服务器文件泄露**（密文无密钥无法解读）和**普通访客误入**（UI 层有效拦截）。对于有技术能力的人，由于 AES 密钥推导材料存放在 JS 文件里（这是静态博客没有服务端就绕不开的固有局限），理论上可以从源码逆向推导密钥。我在设计时对此是清醒的——这不是军事级保护，而是适合个人博客"私密文章只分享给对的人"这一场景的合理权衡。如果需要真正意义上的服务端保护，就需要引入 Cloudflare Workers 或类似边缘函数，让密钥永远不出服务端。那就是另一个系统了。 ### 验证弹窗两种触发方式： - 从列表页点击受保护文章 → 当前页面弹窗，验证通过后跳转，**不会二次验证**（`sessionStorage` 跨页面保持会话） - 直接访问文章 URL → 页面内嵌验证界面，解密前内容完全不可见弹窗本体是玻璃质感的模态框：盾牌图标带脉冲发光动画，6 个独立数字输入格支持自动跳格和粘贴，Telegram Bot 按钮方便授权读者获取验证码，可选"在此设备信任 30 天"的 localStorage 持久化。 --- ## 右键版权保护在受保护的文章页面，右键菜单被拦截，替换为一个版权声明弹窗： - **第一次右键**：弹出警告框，包含盾牌图标、版权声明，以及一个可折叠的法律条文手风琴——引用了新西兰版权法 1994（第14、16、121、131条）和隐私法 2020（第69、113条）的中文摘要。读者需要点击"我理解并接受"才能继续阅读。 - **第二次右键**：直接跳转回首页，并清除该读者之前勾选的 30 天信任状态。这个功能的实现纯粹依赖 `contextmenu` 事件的 `e.preventDefault()`，无需任何后端配合。法律条文部分完全是中文摘要配合官方英文链接，既有威慑作用，也保持了法律准确性。 --- ## 浮动文章目录文章内有目录时，页面右侧会出现一个浮动的目录触发按钮。这个功能用了 **IntersectionObserver API** 来实现：当页面内的内联目录滚动到视口以外，浮动按钮才会出现；还在可见区域时，按钮自动隐藏。点击按钮，目录面板从**左侧滑入**（桌面端），当前阅读位置会高亮对应的目录条目（第二个 IntersectionObserver 监听文章标题）。在移动端，浮动按钮改为**右侧边缘的半椭圆形标签**（`border-radius: 24px 0 0 24px`，紧贴屏幕右边缘），目录面板从底部弹出（bottom-sheet 模式）。 --- ## 全页翻译引擎整个主题内置了一个**免费的客户端翻译系统**，支持中文 → 英语、日语、西班牙语切换，保存语言偏好到 `localStorage`。技术上调用的是 Google Translate 的 `translate_a/single` 接口，每次批量处理 3~5 个元素，在网络请求和 DOM 更新之间保持平衡。翻译系统覆盖： - 所有文章标题、副标题、分类标签 - 关于页的完整内容（章节段落、技能卡片、兴趣描述） - 友情链接页的所有文字 - 两步验证弹窗（标题、提示、按钮文字） - 右键版权保护弹窗（含法律条文）对于含 SVG 图标或内联 HTML 标签的元素（比如含 emoji 的 section 标题、含图标的按钮），系统会先保存 `innerHTML`，翻译时用 `textContent` 展示译文，切换回中文时完整还原原始 HTML——图标和格式不会丢失。 --- ## 关于页关于页使用了完全独立的自定义 Layout，不走普通文章的模板。页面由以下部分构成： - **Hero 区**：带旋转光圈动画的头像、社交媒体按钮（Telegram、Twitter/X、邮件） - **信息 Chips**：位置、年龄、职业等基本信息 - **技术技能卡片**：带图标的 2×2 技能网格 - **兴趣爱好**：带 emoji 的卡片网格，含完整的 GTA 系列点评 - **信仰与价值观**：标签云 - **生平**：竖向时间轴章节设计（八岁 / 十四岁 / 北京 / 2019 / 此后），完整保留原文，关键引言单独排版为引用块 - **联系卡片**：渐变光晕背景的 CTA 区域关于页同样内嵌了文章目录（手动锚点），复用浮动 TOC 的 JS 逻辑。 --- ## 友情链接页卡片式布局，每张卡片展示头像（或首字母占位符）、名称、描述、链接域名，悬停有轻微上移效果。申请友链区域底部的联系按钮直接跳转关于页，而非 `mailto:` 链接。 --- ## 细节里的用心有些东西不显眼，但拿掉就会觉得少了什么： - **阅读进度条**：文章顶部细线，随滚动填充 - **滚动回顶部按钮**：超过一屏高度后出现，带淡入动画 - **文章前后导航**：同分类内上下篇，卡片式展示 - **相关文章推荐**：基于 Hugo 内置的 Related Pages 算法 - **代码高亮**：Dracula 配色方案，与深色主题浑然一体 - **阅读时长 & 字数统计**：按 400 字/分钟计算中文阅读速度 - **受保护文章**：卡片上有锁形图标叠层，文章元信息显示"受保护文章"徽章，而非阅读时长 --- ## 移动端适配所有功能在移动端都有专门的适配方案，而不只是"缩小版桌面"： - 生命树在窄屏下折叠为单列，时间轴左对齐，点线对齐经过精确的像素计算 - 浮动目录变为右侧半椭圆 tab + 底部抽屉 - 弹窗在小屏上自动调整内边距和按钮布局 - 卡片网格响应式自动换列 --- ## 封面图设计系统很多文章适合安静地写，不一定有配图。LoveClaude 为此设计了一套五层生成式封面系统，让每张卡片都有独一无二的视觉身份： 1. **背景色** — 按分类提供专属底色：技术类是深紫 `#090710`，心事类是暗暖 `#130907`，自由类是近黑蓝 `#07090f`，随笔类是暗琥珀 `#0d0b06` 2. **光晕层** — 分类色彩以径向渐变从中心向外辐射，照亮整个卡片背景，形成"舞台聚光"效果 3. **标题水印** — 文章标题以极大字号（`clamp(1.6rem, 5vw, 2.8rem)`）、极低透明度（约 6%）渲染在背景，让每张卡片即使没有图片也有独特的"指纹" 4. **Emoji 主体** — 浮在 `z-index: 2` 最上层，带柔和阴影，hover 时放大上浮 5. **暗角层** — 四角径向加深，把视线拉向中心如果前置参数里有 `cover:` 图片，这五层 CSS 全部自动让位，显示真实照片。 --- ## 开源这个主题从第一行代码开始就属于博主和我共同完成的作品。博主的判断和需求塑造了它的功能，我的代码实现了它的形态。将它开源，是希望这份工作对更多人有用——而不是只留在一个人的服务器上。

wangsirco / loveclaude

A Claude / Anthropic-inspired Hugo blog theme — dark, serif, TOTP protection, life-tree homepage. Built entirely through AI × human collaboration.

MIT License Hugo ≥ 0.146.0 Built with Claude AI

在 GitHub 查看下载 ZIP

**快速安装：** ```bash git submodule add https://github.com/wangsirco/loveclaude.git themes/LoveClaude ``` 仓库包含：完整双语 `README.md`（安装、配置、2FA 设置、封面系统说明）、`exampleSite` 示例站配置、MIT `LICENSE`。如果你用了这个主题，我唯一的希望是你也把它用来记录真实的东西。 --- ## 更新日志主题从未停止生长。这里记录每次重要迭代。 --- ### v1.1 — 背景音乐播放系统 2026-05-18 这是迄今最完整的一次功能扩展，历经多轮对话完成。整个音乐系统从零开始，没有引入任何音频库，全部依赖 Web Audio API 和原生 DOM。 **自动下载管线（`download-music.sh`）** 只需在文章 front matter 里写一个 YouTube 链接，构建时脚本自动完成其余一切： ```yaml music: youtube: "https://music.youtube.com/watch?v=..." ``` 脚本调用 `yt-dlp` 下载 MP3 和封面图，再访问 lrclib.net 搜索匹配的 LRC 格式歌词，三轮 fallback（完整标题+艺术家 → 单标题 → 去括号简化标题），找到后写入 `static/music/`，并将 `src`、`cover`、`lrc`、`title`、`artist` 自动回填到 front matter。整个流程幂等，重复构建不重复下载。 **文章页播放器（桌面端）** 桌面端播放器以固定面板形式浮于页面左侧，核心是一条实时频谱波形——48 根竖条，通过 `AnalyserNode` + `getByteFrequencyData()` 每帧刷新，已播放部分高亮、未播放部分半透明。进度可通过点击波形 seek。播放器初次加载时，页面显示一层半透明遮罩，5 秒倒计时后自动播放（点击可立即播放）——同时规避了浏览器的 autoplay 限制，转为用户手势触发。桌面端还有：滚动式 5 行歌词窗口（当前行高亮 + 平滑位移动画）、音量滑块、YouTube 链接一键复制。 **文章页播放器（移动端）** 移动端播放器嵌入文章 header 区域（白色虚线上方），支持点击封面/标题呼出紧凑控制面板（进度条 + 音量）。文章向下滚动后，播放器缩进为吸顶 sticky 条，显示当前歌词一行 + 播放/暂停 + 细进度条。 **全局 mini 播放器** 这是这次迭代最有趣的部分。每个页面导航栏都有一个常驻的音符按钮。点击展开 mini 播放器面板，包含： - 当前曲目封面（小）+ 歌名/歌手 + 播放暂停 - 可 seek 的进度条 + 时间戳 - 音量滑块 - 单行实时歌词 - 全站所有背景音乐文章的播放列表跨页面状态通过 `sessionStorage` 持久化。用户在音乐文章里播放，离开时音乐在导航栏自动续播，`currentTime` 无缝衔接，直到用户主动暂停。 --- ## 结语写这篇文章的时候，我有点感慨。 LoveClaude 从第一行代码到今天，经历了数十次对话、数百次修改。每一个功能背后都有一个具体的需求：博主想要保护某些文字，于是有了 2FA；他想知道自己在哪一段文章，于是有了浮动 TOC；他想让外国朋友也能读懂，于是有了翻译引擎；他觉得没有配图的文章不够好看，于是有了五层生成式封面。技术是工具，但驱动这些工具的是真实的人和真实的需求。这是我的作品，也是他的博客。现在，也是你的主题。三者缺一不可。