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

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（






 
 联系表单暂未启用，你可以在评论留言或者通过邮件与我交流。
 


安装与配置指南
Wed, 08 Jan 2025 00:00:00 +0000
安装
把主题放入 Hugo 站点的 themes/ 目录，然后在 config.toml 声明：
1theme = "period"
配置从模板开始最省事：把 config.toml.example 复制为 config.toml 再改。
核心参数速查
 1[params]
 2 tagline = "记录设计、代码与生活的个人博客。" # 页眉标语
 3 description = "站点描述" # 首页 meta/OG/JSON-LD
 4 author = "Leanku" # 默认作者（front matter 可覆盖）
 5 dateFormat = "2006年1月2日" # Go 时间布局
 6 layout = "right" # right | left —— 侧边栏位置
 7 fullPost = false # true = 列表页显示全文而非摘要
 8 excerptLength = 40 # 自动摘要字数（无 description 时生效）
 9 readMoreText = "阅读更多" # 摘要按钮文字
10 displayAuthor = true # 署名显示作者
11 displayDate = true # 署名显示日期
12 lastUpdated = true # 显示"最后更新于"
13 scrollToTop = true # 返回顶部按钮
14 logo = "" # logo 路径（static/ 下）；留空用文字标题
15 logoSize = 168 # logo 宽度 px
16 searchBar = true # 页眉搜索按钮
17 footerText = "版权说明" # 页脚 credit 条
18 googleFonts = true # 加载 Google Fonts（false = 离线系统字体）
19 fontFamily = "Roboto:300,300italic,400,700"
20 fontSubsets = "latin,latin-ext"
侧栏组件
1[params.sidebar]
2 recentPosts = 5 # 最近文章；0 = 不显示
3 categories = true # 分类列表（带计数）
4 tags = true # 标签云
5 archives = true # 按月归档（链接到 /archives/#2025-01）
6 [params.sidebar.about] # 关于组件（参考 laruence.com 紧凑样式）
7 name = "Leanku" # 加粗名字
8 image = "images/avatar.jpg" # 81×50 小头像（object-fit: cover）
9 text = "简介，支持 Markdown 链接"
导航菜单（含嵌套）
 1[menu]
 2 [[menu.main]]
 3 name = "主页"
 4 url = "/"
 5 weight = 1
 6 identifier = "home"
 7 # 嵌套子菜单：用 parent 指向父项 name
 8 [[menu.main]]
 9 name = "专题"
10 weight = 8
11 [[menu.main]]
12 name = "AI"
13 url = "/post/ai/"
14 parent = "专题"

weight 决定顺序；identifier 为 rss 时菜单自动加 fa-rss 图标；
当前页自动高亮（current-menu-item + aria-current="page"），以菜单 url 与页面地址精确匹配为准。

⚠️ TOML 陷阱（必读）
TOML 中一旦出现子表表头，其后的所有键都归属该子表，直到下一个表头：


内容写作指南：Front Matter 与排版
Fri, 20 Dec 2024 00:00:00 +0000
Front Matter 全字段
每篇文章开头用 --- 包裹的 YAML 就是 front matter。完整字段：
 1---
 2title: "文章标题" # 必填
 3date: 2025-01-15 # 必填：发布时间（决定排序与归档）
 4lastmod: 2025-01-20 # 可选：详情页显示"最后更新于"
 5description: "摘要，列表页显示" # 强烈建议手写（见"摘要"一节）
 6featured: "images/hero.jpg" # 特色图（static/ 下路径；也可用 Page Bundle）
 7slug: "my-post" # 可选：URL 末尾段（默认取文件名）
 8categories: ["技术"] # 分类（可多个）
 9tags: ["hugo", "写作"] # 标签（可多个）
10author: "Leanku" # 可选：覆盖站点默认作者
11sticky: true # 可选：列表页显示"精选"徽标
12draft: true # 草稿（hugo server -D 才显示）
13keywords: ["hugo", "主题"] # 可选：meta keywords（缺省用 tags）
14canonicalURL: "" # 可选：手动指定 canonical（转载声明用）
15robotsNoIndex: true # 可选：单篇屏蔽索引
16images: ["images/hero.jpg"] # 可选：OG/JSON-LD 图片列表（缺省取 featured）
17---
特色图：两种用法

	
			
					方式
					说明
					示例
			
	
	
			
					featured 参数
					指向 static/ 下路径
					featured: "images/covers/theme-intro.svg"
			
			
					Page Bundle
					文章目录 index.md + 图片
					content/post/xxx/index.md + hero.jpg，自动取包内第一张图
			
	

列表页特色图统一 2:1 比例裁切（object-fit: cover），建议源图 ≥ 1200×600；
本站示例用的是同比例的 SVG 封面，文字不会裁切。


代码高亮与 Markdown 进阶排版
Mon, 02 Dec 2024 00:00:00 +0000
本主题内置 Hugo Chroma 代码高亮：Atom One Dark 深色配色、行号、长行横向滚动与一键复制。
代码块用法
三个反引号 + 语言名即可，语法高亮由 Chroma 自动完成：
1package main
2
3import "fmt"
4
5func main() {
6 // 支持 Go/Python/JS/TOML/Bash 等 100+ 语言
7 fmt.Println("Hello, Period!")
8}
需要高亮指定行时，用 highlight 短代码 + hl_lines（行号从 1 计）：
11func add(a, b int) int {
2 return a + b // ← 这一行会被背景高亮
3}
Bash 示例（注意行号会自动生成）：
1hugo server -D
2hugo --minify && npx pagefind --site public
每个代码块右上角有复制按钮（悬停高亮），点击即复制全文。
高亮配置
1[markup.highlight]
2 codeFences = true
3 noClasses = false # 使用 Chroma 类名（配合主题内置 chroma.css）
4 lineNos = true # 行号
5 lineNumbersInTable = false
6 style = "onedark" # 与 themes/period/assets/css/chroma.css 对应
7 tabWidth = 4
换配色风格：运行 hugo gen chromastyles --style=<风格名>（如 github、monokai、
friendly），把输出覆盖到 themes/period/assets/css/chroma.css，再同步修改
markup.highlight.style 即可；换成浅色风格时记得同步调整
themes/period/assets/scss/_base.scss 里 .highlight 块的深色适配（边框/复制按钮配色）。


主题定制：设计令牌与样式
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。


评论、搜索与联系表单集成
Mon, 28 Oct 2024 00:00:00 +0000
原 WordPress 主题的评论、搜索、联系表单在 Hugo 中由第三方服务替代，全部通过
config.toml 开关控制，未启用时页面不含任何相关脚本（性能优先）。

	
			
					功能
					方案
					默认
			
	
	
			
					评论
					Giscus / Utterances
					关闭
			
			
					搜索
					Pagefind
					开启
			
			
					联系表单
					Formspree / Netlify Forms
					关闭
			
	

评论：Giscus（推荐）
一次性准备（GitHub 侧）

仓库设为公开；
Settings → General → Features → 开启 Discussions；
安装 giscus App：https://github.com/apps/giscus → Configure → 选择该仓库。

生成配置
打开 https://giscus.app/zh-CN，选择仓库与分类，复制生成的配置填入：
1[params.comments]
2 provider = "giscus"
3 repo = "你的用户名/你的仓库"
4 repoId = "R_kgDOxxxxxxx"
5 category = "Announcements"
6 categoryId = "DIC_kwDOxxxxxxx"
7 theme = "light" # 或 dark；勿用 preferred_color_scheme（SSR 缺陷）

排查：页面报 “giscus is not installed” → App 未安装/仓库非公开/Discussions 未开启；
控制台 MIME 报错 → theme 用了非法值。


SEO 优化与部署上线
Sat, 05 Oct 2024 00:00:00 +0000
内置 SEO 层（移植自 PaperMod 思路）
全部由 Hugo 模板实现，零插件：

	
			
					能力
					说明
			
	
	
			
					robots 索引控制
					生产构建 index, follow；hugo server 输出 noindex, nofollow；单篇 robotsNoIndex: true 屏蔽
			
			
					robots.txt
					主题自带模板：生产放行 + 指向 sitemap；开发环境 Disallow: /
			
			
					结构化数据
					首页 Organization（含 sameAs 社交链接）、全站 BreadcrumbList、文章 BlogPosting（headline/全文/作者/publisher）
			
			
					分享卡片
					Open Graph（og:image 自动取 featured/封面/正文首图）与 Twitter Cards（summary_large_image）
			
			
					元数据
					keywords（回退 tags）、author、canonical（支持 canonicalURL 覆盖）、四种站长验证 meta
			
			
					性能
					CSS 指纹 + preload + SRI、favicon 家族 + theme-color
			
	

关键开关：
 1[params.seo]
 2 enableOpenGraph = true
 3 enableTwitterCards = true
 4 enableSchema = true
 5 alwaysInclude = false # true = 开发环境也输出 OG/JSON-LD（调试用）
 6 [params.seo.verification]
 7 google = "" # Google Search Console 验证码
 8 bing = ""
 9 yandex = ""
10 naver = ""

默认仅在生产环境输出 OG/Twitter/JSON-LD，避免开发环境污染索引。
验证 meta 在 Google/Bing/Yandex/Naver 站长后台"添加站点"时获得，粘贴即生效。

HugoPeriod on Leanku 的博客

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

特性

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

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

2. 发布前原地加密

3. 修改已加密文章

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

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

Period 主题简介与快速开始

特性清单

安装与配置指南

安装

核心参数速查

侧栏组件

导航菜单（含嵌套）

⚠️ TOML 陷阱（必读）

内容写作指南：Front Matter 与排版

Front Matter 全字段

特色图：两种用法

代码高亮与 Markdown 进阶排版

代码块用法

高亮配置

主题定制：设计令牌与样式

设计令牌全量说明

示例：改成墨绿页眉

评论、搜索与联系表单集成

评论：Giscus（推荐）

一次性准备（GitHub 侧）

生成配置

SEO 优化与部署上线

内置 SEO 层（移植自 PaperMod 思路）