单篇加密：保护你的私有内容

Mon, 10 Feb 2025 00:00:00 +0000

Period 主题内置单篇加密功能：正文加密后只显示密文，读者输入密码由浏览器端解密展示。适合私密内容、私人笔记等场景。

特性

真加密：构建产物与源码中均无明文，只有 AES-256-GCM 密文；
零依赖前端：解密用浏览器原生 Web Crypto，无第三方库；
算法：PBKDF2-SHA256（10 万次迭代）派生密钥 + AES-256-GCM 加密；
不影响 SEO：密文块自动加 data-pagefind-ignore，标题/描述照常索引；
不影响评论：Giscus 在正文外，加密与评论互不干扰。

快速开始（推荐：文章内标记 + 一键加密）

1. 在文章里直接写明文，用标记包裹

写作时，在需要加密的位置用 protect 标记包裹明文（Markdown 编辑器友好，所见即所得）：

1可见正文……
2
3{{% protect %}}
4这是要加密的明文内容，直接写在这里
5{{% /protect %}}
6
7可见正文……

2. 发布前原地加密

1cd themes/period
2node scripts/encrypt.mjs --lock content/post/xxx.md # 交互输入密码，原地替换为密文
3node scripts/encrypt.mjs --lock content/post/xxx.md 密码 # 或直接给密码
4node scripts/encrypt.mjs --lock content/post/ # 支持目录批量

执行后，文件里的明文标记被替换为密文 shortcode（提交到仓库的是密文，无明文）。

3. 修改已加密文章

1node scripts/encrypt.mjs --unlock content/post/xxx.md # 密文还原为明文标记，改完再 --lock

其他用法（命令行管道，简单场景）

1node scripts/encrypt.mjs "密码" < plain.txt > cipher.txt # 加密文本片段
2node scripts/encrypt.mjs --decrypt "密码" < cipher.txt # 解密验证

git pre-commit 钩子（可选，防明文泄漏）

将 themes/period/scripts/pre-commit.example 复制到 .git/hooks/pre-commit：提交时若检测到 content/ 下仍有未加密的明文标记，会阻止提交，提醒先跑 --lock。（本仓库的 .git/hooks/pre-commit 已启用。）

Period 主题简介与快速开始

Wed, 15 Jan 2025 00:00:00 +0000

Period 是把 Compete Themes 的 WordPress 博客主题复刻到 Hugo 的静态站点主题：深色页眉、浅灰背景、白色卡片，内容区上叠压住页眉下沿是它的标志性视觉。配色、字体、间距、断点均逐值移植自原版 v1.750 的 style.css，视觉相似度目标 ≥90%。

特性清单

特性	具体内容
布局	1300px 最大宽度；≥900px 双栏（主栏 62.5% + 侧栏 34.375%），`layout = "right"/"left"` 切换
响应式	600 / 900 / 1100px 三档断点；移动端汉堡菜单 + 子菜单手风琴
零依赖 JS	菜单/搜索/返回顶部/代码复制均为原生脚本，无 jQuery
代码高亮	Hugo Chroma（Atom One Dark），行号 + 一键复制
SEO	robots 索引控制、Open Graph、Twitter Cards、JSON-LD（Organization/BreadcrumbList/BlogPosting）
搜索	Pagefind 全文搜索（构建后 `npx pagefind --site public`）
评论	Giscus / Utterances（默认关闭，配置即用）
表单	Formspree / Netlify Forms（联系表单暂未启用，你可以在评论留言或者通过邮件与我交流。主题定制：设计令牌与样式 Fri, 15 Nov 2024 00:00:00 +0000 所有视觉属性都收敛在 themes/period/assets/scss/_variables.scss 这一个文件里——改颜色、字号、间距、断点不需要碰任何规则文件。设计令牌全量说明 1// ---- Colors（对应设计文档 §1.2）---- 2$c-page: #EDEDED; // 页面背景 3$c-text: #333333; // 正文 / 链接 / 标题 4$c-text-hover: #757575; // 正文链接悬停 5$c-header: #333333; // 页眉 / 页脚背景 6$c-header-text: #FFFFFF; // 页眉 / 菜单文字 7$c-header-text-hover: #D4D4D4; // tagline、页眉链接悬停 8$c-credit: #242424; // credit 条 / 归档标题 / 菜单选中态 9$c-card: #FFFFFF; // 卡片背景 10$c-card-shadow: rgba(58,58,58,0.2); 11$c-input-bg: #F7F7F7; // 输入框 / 代码背景 12$c-input-border: #D4D4D4; // 输入框描边 13$c-muted: #666666; // 次要文字 14 15// ---- Typography ---- 16$font-family: "Roboto", "Open Sans", sans-serif; 17$font-light: 300; $font-regular: 400; $font-bold: 700; 18$fs-base: 16px; 19$lh-base: 1.5; 20 21// ---- Layout ---- 22$max-width: 1300px; // 页面最大宽度 23$header-overlap: 5.25em; // 内容上叠压头高度（签名特征） 24$page-gutter: 5.5556%; // 页面左右留白 25$col-main: 62.5005%; $col-side: 34.375275%; $col-gap: 3.125025%; 26 27// ---- Breakpoints（对应原主题媒体查询）---- 28$bp-600: 37.5em; // 600px 29$bp-900: 56.25em; // 900px 30$bp-1100: 68.75em; // 1100px 示例：改成墨绿页眉 1$c-header: #1F3A34; 保存即生效：extended Hugo 用 Pipes 自动编译（hugo server 下改完刷新即可）；普通版 Hugo 用户需 npm run css 重新编译预编译 CSS。

主题 on Leanku 的博客