工作原理

graph LR  A[push 到 main] --> B[GitHub Actions 触发]  B --> C[检出仓库]  C --> D[复制主题到 demo/themes]  D --> E[npm install + hexo generate]  E --> F[deploy-pages 发布]  F --> G[演示站更新]

1. 仓库内 demo/ 目录是完整的 Hexo 站点源文件（配置 + 文章）
2. workflow 把当前检出的主题代码复制进 demo/themes/tranquility，因此演示的永远是本次提交的主题版本
3. hexo generate 构建后经 actions/deploy-pages 发布到 GitHub Pages

关键配置片段

演示站启用了子路径部署（项目页），_config.yml 中：

1
2

url: https://zycwer.github.io/hexo-theme-tranquility
root: /hexo-theme-tranquility/

主题会基于 root 正确处理全部资源路径、manifest.json 与 Service Worker 作用域。

本地复现

1
2
3
4

cd demo
npm install
cp -r ../ demo/themes/tranquility   # 以本地主题构建
npx hexo server                     # http://localhost:4000 预览

完整的构建流水线见仓库 .github/workflows/deploy-demo.yml。

宁静致远 —— 不追热点，不加繁饰，只把每一个特性做到恰到好处。

特性速览

继续探索

• 首页向下滑动：项目、技能、时间线、最近更新等区块
• 点击右上角搜索图标体验本地搜索
• 切换深色模式，观察全站配色与一言、评论区联动
• 阅读 Markdown 基础排版 查看排版细节

1

npm install hexo-theme-tranquility

一行命令，把这份宁静带回你的博客。

流程图

graph LR  A[写作 Markdown] --> B{hexo generate}  B -->|渲染| C[静态 HTML]  B -->|主题处理| D[字体子集]  B -->|主题处理| E[资源指纹]  C --> F[部署 GitHub Pages]  D --> F  E --> F  F --> G[读者访问]

时序图

sequenceDiagram  participant U as 读者  participant B as 浏览器  participant S as Service Worker  participant N as 网络  U->>B: 首次访问  B->>N: 请求页面  N-->>B: 返回 HTML/CSS/JS  B->>S: 注册 SW 并预缓存  U->>B: 再次访问（离线）  B->>S: 请求页面  S-->>B: 缓存命中，秒开

饼图

pie title 演示站文章分类占比  "特性演示" : 3  "基础排版" : 2  "可视化" : 1

甘特图

gantt  title 主题版本迭代  dateFormat YYYY-MM-DD  section 1.6.x  无障碍与性能 :done, t1, 2026-07-20, 10d  section 1.7.0  个人主页特性 :done, t2, 2026-08-15, 4d  演示站上线 :active, t3, 2026-08-19, 3d

Mermaid 版本在主题配置中固定（默认 10.9.3），避免上游 breaking change 导致图表失效。

行内公式

质能方程 $E = mc^2$ 是物理学中最著名的公式之一；黄金分割比 $\varphi = \dfrac{1+\sqrt{5}}{2} \approx 1.618$ 常见于设计之中。

块级公式

高斯积分：

$$\int_{-\infty}^{\infty} e^{-x^2} \, \mathrm{d}x = \sqrt{\pi}$$

欧拉恒等式：

$$e^{i\pi} + 1 = 0$$

矩阵与方程组

$$\begin{pmatrix}a & b \\c & d\end{pmatrix}\begin{pmatrix}x \\ y\end{pmatrix}=\begin{pmatrix}1 \\ 0\end{pmatrix}$$

$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

多行推导

$$\begin{aligned}(a+b)^2 &= a^2 + 2ab + b^2 \\(a-b)^2 &= a^2 - 2ab + b^2\end{aligned}$$

提示：演示站的 MathJax 从 npmmirror（阿里国内镜像）加载，与主题默认配置一致，国内网络直连稳定；主题默认启用 $...$ 行内公式与 $$...$$ 块级公式。

文本样式

粗体、斜体、删除线、行内代码，以及站内链接与外部链接。

引用

引用可以有多行：

第二行引用文字。

嵌套引用。

列表

无序列表：

• 特性一
• 特性二
  • 嵌套项
• 特性三

有序列表：

1. 安装主题
2. 修改配置
3. 重新生成

表格

图片

代码高亮

JavaScript：

1
2
3
4
5
6
7
8

// 代码块标题：防抖
function debounce(fn, wait = 200) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

Python：

1
2
3
4
5

def fib(n: int):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

Shell：

1

hexo clean && hexo generate && hexo server

YAML：

1
2
3
4

theme_config:
  announcement:
    enable: true
    content: 欢迎访问演示站

分割线

以上就是全部基础排版元素。

这是演示站的第一篇文章，对应首页时间线的起点——主题 v1.6.x 系列发布之时。

万事开头难，然后中间难，最后结尾难。

欢迎按时间线筛选器按文章 / 应用 / 事件浏览首页时间线。