Skip to Main Content
网站版本 1.0 正式版Back to Top

网站版本 1.0 正式版

11 minutes
Featured

本文面向 访客与自建站参考者,说明本站 v1.0 正式版 的目录结构、设计架构,以及撰写博客时在 +++(TOML front matter)中可用的全部字段。技术栈为 Zola + Ametrine 主题;站点级定制在仓库根目录,不修改 themes/

更细的模板 / Markdown 写法见 Zola 模板开发要点与 Markdown 语法速查;本轮功能迭代见 Nanolog 更新总结


一、版本 1.0 能力总览

模块路径 / 入口说明
首页 Hub/个人介绍、徽章、联系方式
In - Reading/00Read_blog_Math/在读笔记(可加密)
Out - Writing/01Write_blog_CXX20/原创技术文
Out - Share/03Share_blog/工作流、工具分享
Debug/02Engineer_blog_Debug/排障记录
周计划看板/kanban/Trello 风格 + Markdown 规则引擎
Design/design/产品 / CLI / 插件展示
Nanolog/nanolog/站点开发短日志
BasB/basb/笔记树状整理
Archive/archive/全站文章归档 + 热力图
Umami 统计全站隐私友好访问量
文章加密按文启用构建期 AES-GCM + 管理员 / 访客双模式解密

构建命令:

./build-site.sh    # 加密 → zola build → 搜索索引补丁
zola serve         # 本地预览(加密解密需 localhost 或 HTTPS)

二、源码目录树

以下为 访客可见逻辑相关的仓库结构(省略 public/ 构建产物与主题内 demo 细节):

00BlogZola/
├── zola.toml                 # 全站配置(导航、CSP、统计、加密、分类…)
├── build-site.sh             # 正式构建入口
├── scripts/
│   ├── encrypt-content.mjs   # 构建前:加密标记文章 → static/encryption/pages/
│   ├── encryption-lib.mjs    # 加密路径 / front matter 解析共用库
│   └── patch-search-index.mjs
├── content/                  # 所有页面内容(Markdown)
│   ├── _index.md             # 首页
│   ├── 00Read_blog_Math/     # 在读 · 数学
│   ├── 00Read_blog_English/
│   ├── 01Write_blog_*/       # 写作各子专栏(CMake / CXX / 论文…)
│   ├── 02Engineer_blog_Debug/
│   ├── 03Share_blog/
│   ├── kanban/               # 周计划(列表 + 每周 .md)
│   ├── nanolog/              # 开发日志(单文件即一篇)
│   ├── design/               # Design 页 + apps/* 子应用
│   ├── basb/                 # 树状笔记
│   └── archive/
├── templates/                # 覆盖主题的 Tera 模板(优先级高于 theme)
│   ├── base.html             # 全站:加密配置 + admin.js 注入
│   ├── article.html          # 文章:普通 / 加密分支
│   ├── partials/
│   │   ├── encrypted_article.html
│   │   ├── encryption_config.html
│   │   └── heatmap_component.html
│   ├── kanban.html / kanban_list.html
│   ├── nanolog.html / nanolog_list.html
│   ├── design.html / design_app.html
│   ├── archive.html / basb.html
│   ├── shortcodes/           # Markdown 短代码
│   └── macros/encryption.html
├── static/                   # 原样拷贝到站点根 URL
│   ├── analytic/umami.js
│   ├── encryption/           # 加解密运行时(admin / visitor / crypto / article)
│   ├── js/                   # kanban、nanolog、热力图、滚动条…
│   └── kanban/ …
├── sass/                     # 站点 SCSS(编译为 CSS)
│   ├── kanban/ nanolog/ design/ home/ …
└── themes/ametrine/          # 上游主题(勿改;用 templates/ 扩展)

模板覆盖原则: templates/foo.html 与主题同名时 完全替换 主题文件;常用模式为 {%% extends "ametrine/templates/....html" %%} + {%% block %%} 扩展。


三、设计架构

3.1 分层示意

flowchart TB
  subgraph build [构建期]
    MD[content/*.md]
    ENC[scripts/encrypt-content.mjs]
    ZOLA[zola build]
    MD --> ENC
    ENC -->|密文 JSON| STATIC_ENC[static/encryption/pages/]
    MD --> ZOLA
    STATIC_ENC --> ZOLA
    ZOLA --> PUBLIC[public/ 静态站点]
  end

  subgraph runtime [浏览器运行时]
    PUBLIC --> HTML[HTML + textarea 配置]
    HTML --> ADMIN[admin.js 特权模式]
    HTML --> VISITOR[visitor.js 随机解密]
    HTML --> ARTICLE[article.js 解密渲染]
    ADMIN --> ARTICLE
    VISITOR --> ARTICLE
    HTML --> UMAMI[umami.js 统计]
    HTML --> KANBAN[kanban-board.js]
    HTML --> NANO[nanolog.js]
  end

  subgraph theme [Ametrine 主题层]
    BASE[base.html 骨架]
    SIDE[sidebar 导航]
    HEAD[head.html CSP/脚本]
  end

  HTML --> BASE
  BASE --> SIDE
  BASE --> HEAD

3.2 内容 → 模板绑定

内容类型front matter 关键字段渲染模板
专栏列表template = "article_list.html"文章卡片列表
普通文章page_template = "article.html"(section 默认)文章页 + 可选热力图
加密文章[extra.encryption] encrypt = truepartials/encrypted_article.html
周计划列表template = "kanban_list.html"周卡片 + 进度
周计划明细page_template = "kanban.html"五列看板
Nanolog 列表template = "nanolog_list.html"时间线短帖
Nanolog 单篇page_template = "nanolog.html"单条日志
Designtemplate = "design.html"产品网格
Archivetemplate = "archive.html"归档 + 热力图
BasBtemplate = "basb.html"树状笔记索引

3.3 安全与特权模型

stateDiagram-v2
  [*] --> Visitor: 默认
  Visitor --> Admin: 连点左上角图标 6 次
  Admin --> Visitor: admin_ttl_secs 到期
  Visitor --> LuckyDecrypt: 同文刷新 9~20 次 session
  LuckyDecrypt --> Visitor: 关闭标签页 / 新 session
  Admin --> Decrypted: 全部加密文可读
  LuckyDecrypt --> Decrypted: 单篇可读

四、Front matter(+++)字段速查

Zola 使用 TOML 作为 front matter。以下汇总 本站实际可用 的字段;未列出的键也可写入 [extra],但需自行在模板中读取才会生效。

4.1 顶层通用字段(Page / Section 均可)

字段类型必填说明
titlestring推荐标题;侧边栏、<title>、列表卡片
descriptionstring推荐摘要;SEO、og:description
datedate文章推荐发布日期,如 2026-06-24
updateddate可选更新日期,显示在文章元信息
draftbool可选true 时默认不构建;需 zola build --drafts
weightint可选排序权重(配合 sort_by = "weight"
sort_bystringSection子页排序:date / weight / title
templatestringSection当前页使用的模板文件名
page_templatestringSection子页面默认模板
paginate_byintSection列表分页条数,如 10
generate_feedsboolSection是否生成 atom/rss
aliases[string]可选URL 别名,如 ["home"]["Dev_log"]
authors[string]可选多作者(主题支持时显示)
transparentbool可选用于 Archive / BasB 等透明背景布局

Section _index.md 示例:

+++
title = "效率-工作流"
sort_by = "date"
template = "article_list.html"
page_template = "article.html"
paginate_by = 10
generate_feeds = true
[extra]
no_header = true
scripts = ["analytic/umami.js"]
+++

4.2 [taxonomies] 分类法

本站 zola.toml 启用:

taxonomies = [
  { name = "tags", feed = true, paginate_by = 10 },
  { name = "categories", feed = true },
]
字段类型说明
tags[string]自由标签,如 ["Zola", "CXX"]
categories[string]分类;枚举值见下表

categories 可选枚举(zola.toml[[extra.categories]]):

含义主题色
Archived归档文purple
Featured精选yellow
Hot热门red

4.3 [extra] — 页面 / 专栏扩展(Ametrine + 本站)

继承规则:页面 page.extra.* 优先,否则回退 section.extra.*,再回退 config.extra.*

布局与展示

字段类型枚举 / 格式作用
no_headerbooltrue / false不渲染正文顶部 <h1>
backlinksbooltrue / false文末显示反向链接(需全局 show_backlinks
tocbooltrue / false侧栏目录(实际由文内标题 + Zola page.toc 生成)
accent_colorstring 或 [string, string]见下方 强调色枚举页面主题色 / theme-color
accent_color_darkstringHSL 或预设名仅深色模式强调色(可选)
bannerstring文件名index.md 同目录的横幅图
banner_positionstringCSS 值,如 center top列表缩略图裁剪位置
banner_pixelsbooltrue横幅像素风渲染

accent_color 枚举与格式(主题文档):

写法示例说明
预设名(双色同用)"blue"浅色/深色各用主题预设
预设数组["red", "blue"]浅色 red、深色 blue
单色 HSL"hsl(270 50% 60%)"两模式同色
HSL 数组["hsl(26 25% 34%)", "hsl(27 31% 53%)"]浅色 / 深色各一

预设名可选:red · orange · yellow · green · blue · purple

元数据与社交卡片 [extra.meta]

字段类型说明
meta.cardstring自定义 OG 卡片图(相对页面路径)
meta.faviconstring页级 favicon
meta.apple_touch_iconstring / bool页级 Apple 图标

声明块(文章顶部提示)

字段类型说明
archivestring (markdown)归档说明条
triggerstring (markdown)内容预警条
disclaimerstring (markdown)免责声明条

资源加载

字段类型格式说明
styles[string]相对 static/ 或 sass 输出额外 CSS,如 ["kanban/style.css"]
scripts[string]相对 static/额外 JS;页面级覆盖 section

常用 scripts 值:

用途
analytic/umami.jsUmami 统计
js/nanolog.jsNanolog 发布 / 编辑
js/kanban-rules.js看板规则引擎
js/kanban-board.js看板明细交互
js/kanban-list.js看板列表
js/design-apps.jsDesign 应用网格
encryption/*.jsbase.html 全站注入,一般无需手写

功能开关

字段类型说明
copy_buttonbool代码块复制按钮(可覆盖全站 copy_button
audio_buttonbool文章朗读按钮

Fediverse 评论 [extra.fediverse]

字段类型说明
hoststring实例域名,如 vmst.io
userstring用户名
idstring帖子 ID;三者齐全时加载评论线程

侧栏媒体 [extra.music] / [extra.weather]

music — 数组,每项:

类型枚举 / 说明
typestringalbum · track
mbidstringMusicBrainz ID(可选)
artiststring艺术家名
namestring曲名 / 专辑名

weather — 表:

类型枚举 / 说明
conditionstring描述文字
stylestringcloudy · showers · snowing
iconstringPhosphor 图标名
tempstring温度数值
unitstringC(默认)或 F

4.4 [extra.encryption] — 本站加密(单篇文章)

字段类型说明
encryptbooltrue 时构建期加密正文

站点级开关与密钥在 zola.toml[extra.encryption]不要写在单篇文章里。


4.5 看板专用 [extra]content/kanban/*.md

字段类型说明
week_startstring周一开始 YYYY-MM-DD
week_endstring周日结束 YYYY-MM-DD
core_tasksstring列表页 / 明细页核心任务一行摘要
importanceint1–5 重要等级(列表五星)
statstable{ total, done, todo, doing, progress_pct } 预计算进度

4.6 Design 页专用 [extra]content/design/index.md

字段类型说明
cliarray of tables{ name, icon, repo, summary }
pluginsarray of tables同上
appsarray of tables{ name, slug, icon, summary, description }

子应用页:content/design/apps/<slug>/index.md 使用 template = "design_app.html"


4.7 首页专用 [extra]content/_index.md

字段类型子键说明
graphicsarrayname, text, url?顶部图形徽章
badgesarrayname, url?88×31 风格徽章 GIF
contactsarrayname, url, favorite?联系方式
socialsarray同上社交网络
forgesarray同上代码托管 / 部署链接

4.8 Nanolog 单篇

可为空 front matter:

+++
+++

正文直接写 Markdown;日期由 文件名 YYYY-MM-DDTHH:MM:SSZ.md 决定。


4.9 完整文章示例(含常用字段)

+++
title = "文章标题"
description = "摘要,用于 SEO 与列表"
date = 2026-06-24
updated = 2026-06-24
draft = false
[taxonomies]
tags = ["Zola", "CXX"]
categories = ["Featured"]
[extra]
accent_color = ["hsl(254 44% 55%)", "hsl(290 20% 71%)"]
banner = "cover.webp"
no_header = false
copy_button = true
[extra.encryption]
encrypt = false
[extra.fediverse]
host = "vmst.io"
user = "username"
id = "113295812044964246"
+++

五、zola.toml 站点级配置(非单篇 front matter)

访客了解全站行为时可查阅:

关键字段说明
[extra.analytics]servicegoatcounter · umami · plausible
id各平台追踪 ID
self_hosted_url自托管根 URL;Umami Cloud 留空
exclude_hash / exclude_search / do_not_trackUmami 选项
[extra.encryption]enabled, key, algorithm全站加密开关(AES-GCM
admin_ttl_secs管理员特权秒数
visitor_refresh_min / max访客随机解密刷新次数区间
[extra.csp]directive + domainsCSP 白名单扩展
[extra.nav]links侧栏导航树
[extra.categories]name, color, icon分类元数据
[extra]scripts, source_url, replog_url全站脚本与编辑链接

六、Markdown 与 Shortcode(正文内)

正文除标准 Markdown 外,常用扩展包括:

能力写法
站内链接[文字](@/03Share_blog/xxx/index.md)
GitHub Alerts> [!NOTE] / WARNING / TIP
图片 URL 样式![](pic.png#transparent#pixels#no-hover)
Shortcode{%% youtube(id="…") %%}{%% crt() %%}…{%% end %%}

本站 templates/shortcodes/ 额外提供:badges · polaroid · window · masonry · todo · now_playing · online · games · age · icons · beeper


七、参考链接


v1.0 正式版:在「毛坯房但够用」的基础上,补齐统计、加密、看板与文档化;后续版本将在此基础上迭代,而不推翻目录结构。