xiaobuhui

第一步：站点身份（config/site.yaml）#

打开内容仓的 config/site.yaml，要动的就几项：

themeColor.hue 这一项值得多试几组值。它是个 0 到 360 的数字，拖一圈站点气质能变好几种，改完刷新就见效，很适合在还没想清楚要什么风格的时候瞎试。

第二步：个人资料（config/profile.yaml）#

name、bio、avatar，加上 links。

links 是侧栏那排社交图标，默认挂着主题作者的 GitHub。这里有两个细节。

图标名走 Iconify 命名法，比如 fa6-brands:github、simple-icons:bilibili、material-symbols:mail-outline。想找图标去 icon-sets.iconify.design 搜。构建时会本地生成，不用联网。

还有个我自己的做法：还没填的社交链接，我统一先写 "/wip/" 这个站内占位页。这样侧栏图标点进去不会 404，也不至于留一个别人的链接，等有真实地址了再换掉就行。

第三步：换字体#

如果只能改一样东西来提升观感，我会选字体。

config/font.yaml 能配置正文字体、中文字体和代码字体。中文字体对阅读手感的影响比想象中大，尤其是长文章。

这里有个和构建有关的点：主题会在构建时对字体做子集化，只打包文章里真正用到的字形。我这站上用的中文字体，源文件 14.52 MB，子集化之后是 360 KB，缩了 97.6%。所以别因为“中文字体动辄十几兆”就不敢用。

其余配置，当参考清单看#

内容仓里其余 20 多个 config/*.yaml 我全部保持注释状态，要用哪项就解注释。重点几个：

nav-bar.yaml 还有它自己的脾气：它是整体替换模式。你写了 links，主题默认那套按条件注入的导航菜单就整个被接管了。想换某一项的链接又保留图标，用 preset 加 url 局部覆盖。

内容替换：文章#

文章在 content/posts/。支持两种放法：

1
content/posts/
2
├── my-post.md              # 单文件
3
└── image-grid-demo/
4
    ├── index.md            # 目录式，图片和文章放一起
5
    └── cover.webp

单文件适合纯文字，目录式适合要配图的。

frontmatter 最小可用这一组就够：

1
---
2
title: "标题"
3
published: 2026-10-14
4
description: "一句话摘要，会出现在文章卡片和搜索结果里"
5
tags: [标签一, 标签二]
6
category: "分类名"
7
draft: false
8
---

published 是 YYYY-MM-DD。要精确到时刻用 publishedAt，它会按 site.yaml 里的时区解析，写本地时间即可，但必须落在 published 当天。

draft: true 的文章在 dev 下会显示、在正式构建里会被排除。这个差异坑过我一次：有篇草稿漏写了 category，分类列表里就多出来一个“未分类”，而它在线上根本不存在，因为正式构建把这个草稿排掉了。只在 dev 里看到的现象，先想想是不是草稿。

内容替换：说说#

content/moments/ 下每条一个 md，文件名建议 YYYY-MM-DD-短标题.md，配图放 public/images/moments/，正文里用 /images/moments/xxx.webp 引用。缩略图构建时自动生成，不用自己做。

站上的“动态”页读的就是这里。写起来比文章轻，适合放没长成文章的想法。

内容替换：关于页和数据列表#

content/spec/about.md 是访客最常翻的页面之一，值得多花点时间写。

data/ 下那批 .ts 文件是各个列表页的数据源，主题自带的全是作者的演示数据，得换：

friends.ts（友链）、projects.ts（项目）、skills.ts（技能）、timeline.ts（时间线）、devices.ts（设备）、music.ts（歌单）、anime.ts（追番）、compass.ts（站点罗盘）。

图片素材：规格给你，图自己找#

这部分我给不了你图，但能把要求写清楚。按这个交，能省掉几轮返工。

按需开功能#

这些默认都是关的，开了会引入外部依赖（账号、第三方服务、额外请求）。关着的时候不产生任何网络请求和 DOM，所以“先不开”零成本，不用纠结。

开完记得在生产构建下也验一遍，不只测 dev。

检查清单#

这一轮做完，pnpm dev 起来之后：

1. 首页横幅的大字、副标题、背景图都是你的
2. 侧栏社交图标点进去是你的主页，没有“别人的 GitHub”
3. 标签页标题和副标题是你写的
4. 文章列表、归档、分类里只剩你的文章
5. 关于页、友链、项目、时间线里找不到主题作者的演示数据
6. 全站搜一遍，没有不认识的图

到这里，站点的“内里”和“气质”已经是你的了。下一篇讲真正需要动源码的那几处，以及怎么让这些改动在主题升级后活下来。