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

所有视觉属性都收敛在 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。

示例：加宽页面

1$max-width: 1440px;

示例：调整断点

1$bp-900: 62.5em;   // 双栏从 1000px 才开始

样式文件结构

 1assets/scss/
 2├── main.scss          # 入口，按序引入
 3├── _variables.scss    # ★ 设计令牌（改这里）
 4├── _mixins.scss       # 断点/阴影/过渡混合
 5├── _base.scss         # 基础样式、代码块
 6├── _layout.scss       # 网格、内容上叠
 7├── _header.scss       # 页眉、社交图标、搜索
 8├── _nav.scss          # 菜单（移动手风琴 + 桌面下拉）
 9├── _cards.scss        # 文章卡片、特色图、归档标题
10├── _single.scss       # 详情页、归档页
11├── _sidebar.scss      # 侧栏组件（含关于组件）
12├── _pagination.scss   # 分页
13├── _footer.scss       # 页脚、返回顶部
14├── _forms.scss        # 表单
15└── _utilities.scss    # 无障碍辅助类

改 logo 与字体

1[params]
2  logo      = "images/my-logo.png"        # static/ 下路径；留空用文字标题
3  logoSize  = 168                         # logo 宽度 px
4  googleFonts = true
5  fontFamily  = "Noto Sans SC:300,400,700"   # 换成任意 Google Fonts
6  fontSubsets = "latin,latin-ext"

界面文案（i18n）

中文文案：themes/period/i18n/zh-cn.toml；英文：en.toml；
切换语言：改 config.toml 的 locale（旧版 Hugo 用 languageCode）；
新增文案键：在两个文件同步加同键条目。

代码块配色

代码高亮配色在 themes/period/assets/css/chroma.css（Chroma 生成物），换风格方法见代码高亮与 Markdown 进阶排版。

定制原则

优先改参数（config.toml）而非模板：菜单、侧栏、社交、评论、搜索、表单都有开关；
视觉改令牌（_variables.scss）而非规则：颜色、字号、断点全覆盖；
需要改结构时才动 layouts/：partials 已按职责拆分，单点修改互不影响。