younisekai

你好，younisekai

Sun, 01 Mar 2026 00:00:00 GMT

欢迎来到这里。这是本站的第一篇文章，也是这套模板的自我介绍。

如果你刚刚把项目克隆下来，npm install 之后还不知道从哪下手，那么读完这一篇，你应该就能写出并发出自己的第一篇内容了。

younisekai 是什么

一句话：一个「写完 Markdown 就能发」的静态博客模板。

它用 Astro 做构建，用 Tailwind CSS 排版，用 Svelte 写交互组件，最终产出的是一堆纯静态文件——没有数据库，没有运行时服务端，dist/ 目录丢到任何静态托管上就能跑。

内容是文件：文章是 Markdown，项目、技能、历程、日记、相册是 JSON，全部放在 src/content/ 里，可以用 Git 管理、可以随时整体迁移。
自带后台：接上内容管理系统之后，可以在浏览器里直接写文章、改数据，不用装编辑器。
该有的细节都有：暗色模式、全站搜索、无限级目录树、代码高亮与折叠、文章加密、复制保护、阅读进度与字数统计。
零后端依赖：搜索索引在构建时生成，文章加密在浏览器端完成，评论等外部服务默认关闭、需要时再打开。

:::tip 这套模板是移植并改造自开源项目 Spr-Aachen/Twilight（MIT 许可），在此基础上重新设计了中文内容结构、数据集合页面与示例文档。协议与致谢写在关于页面里。 :::

目录结构

项目根目录/
├── public/                     # 直接拷贝进产物的静态资源
│   └── assets/images/          # 封面、头像、占位图、壁纸
├── src/
│   ├── components/             # 组件（卡片、侧栏挂件、评论……）
│   ├── content/                # 所有内容与数据
│   │   ├── posts/              # 文章（Markdown）
│   │   ├── projects/           # 项目（JSON + 封面图）
│   │   ├── skills/             # 技能（JSON）
│   │   ├── timeline/           # 历程（JSON）
│   │   ├── diary/              # 日记（JSON + 配图）
│   │   ├── albums/             # 相册（JSON + 图片）
│   │   ├── friends/            # 友链（JSON）
│   │   ├── about.md            # 「关于」页正文
│   │   └── friends.md          # 「友链」页正文
│   ├── layouts/                # 页面骨架
│   ├── pages/                  # 路由：文件即页面
│   ├── styles/                 # 样式与主题变量
│   └── utils/                  # 读取与整理内容的工具函数
├── astro.config.mjs            # 构建与插件配置
└── younisekai.config.yaml      # 站点、主题、侧栏、评论等总配置

内容集合速查

想改什么	去哪里改	一个文件对应
一篇文章	`src/content/posts/*.md`	一篇文章
一个项目	`src/content/projects/<目录>/intro.json`	一个项目卡片
一项技能	`src/content/skills/*.json`	一张技能卡
一段历程	`src/content/timeline/*.json`	时间线上的一个节点
一条日记	`src/content/diary/<目录>/*.json`	一条带图的短动态
一本相册	`src/content/albums/<目录>/*.json`	一个相册与其中的照片
一个友链	`src/content/friends/*.json`	友链页上的一张卡片
关于 / 友链页正文	`src/content/about.md`、`src/content/friends.md`	一个单页

:::note 页面是按目录约定生成的，所以文件名就是数据的一部分：文章的文件名决定它的网址，数据文件的名字决定它在列表里的 id。取名时用英文小写加连字符，最省心。 :::

十分钟发出第一篇

安装依赖：在项目根目录执行 npm install。
新建文件：在 src/content/posts/ 下建一个 Markdown 文件，例如 my-first-note.md——文件名会成为网址的一部分。
写 frontmatter：文件开头两行 --- 之间填写标题、日期、分类等信息，最少写 title、published、description 就够。
写正文：常规 Markdown 语法即可，需要图表、提示框、数学公式时参考排版速查与图表与公式。
本地预览：npm run dev，打开终端提示的地址，文章位于 /posts/my-first-note/。
构建发布：npm run build，把生成的 dist/ 上传到任意静态托管即可。

接下来看什么

想先把环境和部署跑通：快速上手：从本地到线上
想搞清楚每个 frontmatter 字段：写作指南：frontmatter 全解析
想知道正文能用哪些语法：排版速查表
想换主题色、改侧栏挂件：主题与站点配置

写博客最难的一步从来不是技术，而是「打开编辑器」。既然第一篇已经在这里了，第二篇就顺手写掉吧。

从一个静态博客的样式混乱，聊到一套撑得住的前端样式体系

Thu, 20 Aug 2026 00:00:00 GMT

这篇文章记录的是一次真实的返工：一个已经上线、文章也写了几十篇的静态站点，因为样式越改越乱，被迫停下来重新梳理整套前端样式体系。整个过程花了两周，其中一周在拆自己以前写的代码。

如果你也遇到过「改一个按钮的颜色，结果列表页的边框变了」这种事，这篇大概对你有用。

样式为什么会先崩

样式问题从来不是突然出现的，它有三个非常典型的前兆。

症状一：同一个颜色有四种写法

打开样式表，会看到 #7C3AED、#7c3aed、rgb(124 58 237) 和 hsl(262 83% 58%) 同时存在，都表示同一个紫。它们最初都来自同一个设计稿，只是每个人复制的时候顺手改了写法。

症状二：间距靠感觉

margin: 14px、padding: 13px、gap: 1.1rem 散落在各个组件里。数值本身不算错，但它们之间没有关系，所以页面上到处是「差两像素」的错位。

症状三：改一处影响一片

这是最危险的：某个类名被多个页面复用，但复用的方式各不相同。改动它就像拆炸弹——你永远不知道谁会跟着炸。

:::note 前两个症状只是难看，第三个症状才是必须重构的信号。当一个改动的影响范围无法预测时，样式体系就已经失效了。 :::

第一步：把设计变量收进一层

重构的第一步不是删代码，而是把所有裸值收进一层变量。原则很简单：组件里只允许出现变量，不允许出现具体的颜色值和尺寸值。

色板：一层色相加明度阶梯

与其定义二十个命名颜色，不如定义「一个色相 + 一套明度阶梯」。这样换主题时只改一个色相数值，整站配色会一起跟着走：

:root {
    /* 主色：一个色相，若干明度 */
    --primary-hue: 255;
    --primary: hsl(var(--primary-hue) 70% 55%);
    --primary-hover: hsl(var(--primary-hue) 70% 48%);
    --primary-light: hsl(var(--primary-hue) 70% 92%);

    /* 中性色：同一色相、低饱和度，比纯灰更耐看 */
    --text-90: hsl(var(--primary-hue) 12% 12%);
    --text-75: hsl(var(--primary-hue) 10% 30%);
    --text-50: hsl(var(--primary-hue) 8% 50%);
    --line-divider: hsl(var(--primary-hue) 12% 88%);
}

关键在于中性色也带上色相：纯灰（hsl(0 0% 50%)）放在有色调的界面上会显得脏，而带一点点主色相的中性色会自然很多。

间距与圆角：给一套有限的台阶

间距不要自由取值，给一套 6–8 个台阶就够，所有间距从台阶里挑：

变量	数值	典型用途
`--space-1`	4px	图标与文字的间隙
`--space-2`	8px	标签内边距
`--space-3`	12px	卡片内元素间距
`--space-4`	16px	卡片内边距
`--space-6`	24px	区块之间的间距
`--space-8`	32px	页面大区块间距
`--space-12`	48px	首屏与页脚

圆角同理：--radius-sm（6px）、--radius-md（10px）、--radius-lg（14px）、--radius-full。台阶之外不允许出现新数值，这条纪律比变量本身更重要。

在 Tailwind 里落地

用 Tailwind 的话，不必放弃实用类，只要把变量接到主题配置里：

// tailwind.config 里的关键部分
export default {
    theme: {
        extend: {
            colors: {
                primary: "var(--primary)",
                "primary-hover": "var(--primary-hover)",
            },
            spacing: {
                // 把台阶映射成 Tailwind 的间距刻度
                13: "var(--space-13, 3.25rem)",
            },
            borderRadius: {
                lg: "var(--radius-lg)",
            },
        },
    },
};

这样写有两个好处：组件里仍然用 bg-primary p-4 rounded-lg 这样直观的类名；颜色的真实来源只有一个变量，换主题时不必全站替换。

第二步：断点与栅格

断点不是越多越好

见过最夸张的项目定义了九个断点，结果每个断点都要单独调一次布局，维护成本直接翻倍。实际上大部分内容型站点只需要三到四个：

断点	宽度	覆盖的设备
默认	0 起	手机竖屏
`sm`	640px	手机横屏、小平板
`md`	768px	平板竖屏
`lg`	1024px	桌面

再往上通常不需要新的断点，只需要限制内容的最大宽度——让正文宽度保持在 65–75 个字符之间，比给他加断点更有效。

内容优先的调整顺序

调整布局时，按这个顺序改，返工最少：

先让内容能读：正文行宽、行高、段落间距；
再让结构能站：栅格换列、侧栏折叠；
最后调装饰：圆角、阴影、动效。

反过来先调阴影和圆角，内容一改就又得重来。

:::tip 测试时不要只拖浏览器宽度，一定要在真机上看一遍。手机上最常见的两个问题是：横向滚动条（多半是某个固定宽度元素溢出）和被虚拟键盘顶起来的输入框。 :::

第三步：组件样式的三条纪律

纪律一：组件内不写魔法数字

/* 不好：14px 是从哪来的？没人知道 */
.card__title {
    margin-bottom: 14px;
}

/* 好：来自间距台阶，改台阶就能全站同步 */
.card__title {
    margin-bottom: var(--space-3);
}

纪律二：状态成组出现

一个交互元素至少有四种状态：默认、悬停、激活、禁用；如果它是链接，还有访问过；如果支持键盘，还要有焦点态。写样式时把这几种状态一次写完，不要等出问题再补：

.button {
    background: var(--primary);
    color: white;
    transition: background-color 150ms ease;
}

.button:hover { background: var(--primary-hover); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.button:disabled { opacity: .5; cursor: not-allowed; }

纪律三：样式随组件走

样式写在组件文件里（scoped style），而不是在全局样式表里按类名遥控组件的内部结构。全局样式表只应该做三件事：定义变量、重置默认样式、处理跨组件的排版规则（例如 Markdown 正文）。

第四步：暗色模式怎么收尾

暗色模式做起来快，做对慢。核心思路是用变量推导，而不是逐个元素覆盖。

只在变量层切换

:root {
    --card-bg: hsl(var(--primary-hue) 30% 99%);
    --text-90: hsl(var(--primary-hue) 12% 12%);
}

.dark {
    --card-bg: hsl(var(--primary-hue) 18% 10%);
    --text-90: hsl(var(--primary-hue) 10% 92%);
}

这样一来，组件层完全不需要知道当前是哪种模式。

两件最容易漏的事

对比度：暗色模式下把深色文字换成浅色文字时，很容易忽略「次级文字」——它在浅色模式下是 60% 灰，直接搬到暗色背景上会低到看不清。次级文字的对比度建议不低于 4.5:1。
媒体素材：纯白背景的图片、透明度为 1 的壁纸、亮色主题的代码高亮，都会在暗色模式下显得刺眼。处理方式是给图片容器加一层极淡的遮罩、给壁纸加上可配置的不透明度，代码高亮则直接切换主题。

:::caution 不要用 CSS 滤镜去「反色」处理图片——肤色、品牌色和截图里的 UI 都会变得诡异。宁可给图片加遮罩，也不要整体反色。 :::

维护：让体系活下来

重构完成只是开始，体系能不能撑住要看后面几个月的维护。

每周一次的样式巡检

花十分钟做三件事，收益极高：

搜一遍裸色值（# 开头的十六进制）与裸像素值，看有没有新出现的漏网之鱼；
检查是否有新的类名重复定义（同一组件两处样式互相覆盖）；
在暗色模式下把主要页面点一遍，重点是表格、代码块和表单。

什么时候该重构

出现下面任意一条，就该安排重构了：

改一个样式需要同时动三处以上；
无法回答「这个颜色变量到底影响哪些页面」；
新页面的样式要靠复制旧页面再删改来产出；
每次改完都要在四个断点、两种主题下手工检查一遍。

重构不等于重写。这次我做的是「先建立变量层、再逐页替换」，全程没有推翻任何页面结构，也就没有出现长期无法发布的分支。能小步走的重构，不要用大爆炸的方式做。

回头看，样式问题本质上是约定问题：变量只有一个来源、间距只有一套台阶、状态一次写完、样式跟着组件走。这四条守住之后，代码量其实差不多，但改动的可预测性完全不同——你终于能回答「改这里会影响什么」这个问题了。

复制保护四种开关

Wed, 22 Jul 2026 00:00:00 GMT

你正在看的这一页，四项复制保护全部开启。可以顺手试一下：拖选这段文字、按 Ctrl+C、点右键、按 F12——四种操作都会被拦下来。

怎么配置

copyProtection:
    blockSelection: true      # 禁止选中文本
    blockClipboard: true      # 拦截复制、剪切、粘贴
    blockContextMenu: true    # 禁止右键菜单
    blockDevTools: true       # 屏蔽 F12、Ctrl+U、Ctrl+S

四个开关互相独立，默认全部为 false。按需要逐项开启，比「一键全开」更好：全开之后读者想复制一段代码示例都做不到，体验会明显变差。

四项开关分别做什么

开关	实际行为	生效方式
`blockSelection`	全站禁用文本选中（`user-select: none`），但输入框与文本域保持可选中	注入一条全局样式
`blockClipboard`	拦截 `copy`、`cut`、`paste` 三个事件并阻止默认行为	注册事件监听
`blockContextMenu`	拦截 `contextmenu` 事件，右键不再弹出菜单	注册事件监听
`blockDevTools`	拦截 `F12`，以及按下 `Ctrl` 时的 `U`（查看源代码）与 `S`（保存页面）	注册键盘监听

:::note 这些保护都是浏览器端的。只要愿意关掉 JavaScript，或者直接在源码层面抓取，任何前端限制都能被绕过。它的定位是「提高随手复制的成本」，而不是「防止内容被拿走」。 :::

逐项验证

打开本页后可以按下面的方式自检：

选中：试着用鼠标拖选这段话（包括代码块与表格），选中高亮不会出现；但页面上的搜索框仍可正常输入与选中。
复制：按 Ctrl+C 不会把内容写进剪贴板；Ctrl+X、Ctrl+V 同样被拦截。
右键：右键单击页面任意位置都不会出现菜单。
开发者工具：按 F12、Ctrl+U、Ctrl+S 都不会触发对应动作。

// 被拦截的就是这三类事件，核心只有几行
document.addEventListener("copy", (e) => e.preventDefault());
document.addEventListener("contextmenu", (e) => e.preventDefault());
document.addEventListener("keydown", (e) => {
    if (e.key === "F12") e.preventDefault();
});

该不该开

场景	建议
原创长文、连载小说、需要防搬运的稿件	可以开 `blockClipboard` 与 `blockContextMenu`
教读者复制代码的技术文章	只开 `blockContextMenu`，不要开 `blockClipboard`
加密后的私人笔记	四项全开，配合 `encrypted` 使用
想让内容被引用、被分享的公开文章	保持默认全关，复制与引用都是好事

:::tip 开了 blockSelection 之后，读者的浏览体验影响最大——没法选取文字，就没法用翻译插件、也没法做笔记。如果不是明确不想被复制的内容，建议保留默认值。 :::

与加密的分工

加密（encrypted + password）：管「能不能读」，正文在解锁前是密文；
复制保护（copyProtection）：管「读了之后能不能带走」，作用于整个页面。

两者可以叠加，也可以只用一种。加密的用法与注意事项见给文章加一把锁。

主题与站点配置：改一个 YAML 就够了

Mon, 08 Jun 2026 00:00:00 GMT

这套模板的设计原则是：日常调整不碰源码。站点长什么样、导航有几级、侧栏放哪些卡片、要不要开评论，都由项目根目录下的一个 YAML 文件决定。

配置文件在哪

项目	说明
文件位置	项目根目录的 `younisekai.config.yaml`
谁在读它	`src/config.ts` 用 `?raw` 读入，做归一化后导出给页面与组件使用
生效时机	构建时读取，改完请重启开发服务器（或重新构建），热更新不会重新解析 YAML
敏感信息	不放这里。后台登录用的 GitHub OAuth 凭据走 `.env`（见 `.env.example`），YAML 只放可以公开的站点配置

:::warning 不要在 YAML 里随意增删层级。每一项的位置都是有意义的，写错层级时要么该字段被忽略，要么直接抛出配置错误。 :::

站点基础信息

字段	示例值	说明
`site.siteURL`	`https://younisekai.example.com/`	站点根地址，必须以斜杠结尾；RSS、Atom、站点地图与分享卡片都依赖它，部署前务必改成自己的域名
`site.title`	`younisekai`	站点标题，显示在导航栏左上角与浏览器标签页
`site.subtitle`	`异世界手记`	站点副标题，用于默认描述与页脚
`site.lang`	`zh_CN`	站点语言，可选 `en` / `ja` / `zh_hans` / `zh_hant`；`zh_CN`、`zh_TW` 这类地区写法会自动归一化
`site.keywords`	字符串数组	站点关键词，用于生成 `<meta name="keywords">`
`site.timeZone`	`8`	UTC 偏移小时数（-12 ~ 12），用于「几小时前」这类相对时间
`site.defaultTheme`	`dark`	默认主题：`system` 跟随系统、`light` 浅色、`dark` 深色
`site.favicon`	见下	站点图标数组，留空则使用内置默认图标

字体与图标的写法：

site:
    font:
        # 标识会用于生成 .font-<标识> 工具类，请勿包含空格
        NotoSansSC:
            src: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
            family: "Noto Sans SC"
    favicon:
        - src: "/favicon/icon-light.svg"   # 路径相对 /public 目录
          theme: "light"                   # 适用主题：light / dark
          sizes: "any"                     # SVG 矢量图写 any
        - src: "/favicon/icon-dark.svg"
          theme: "dark"
          sizes: "any"

主题色：只改一个色相

整套配色由 site.themeColor.hue 一个数字推导出来，取值 0–360：

色相	大致观感	适合的站点气质
`0`	红	强烈、有攻击性
`30`	橙	温暖、有食欲
`150`	绿	自然、平静
`200`	青	清爽、偏科技
`265`	蓝紫	冷静、偏理性（本站默认值）
`300`	紫	神秘、偏创作
`345`	粉	柔和、偏生活

site:
    themeColor:
        hue: 265

明度与饱和度由主题在 CSS 变量层统一处理，浅色与暗色模式都会自动得到可用的对比度，不需要你手调具体颜色值。

壁纸与首屏

字段	可选值	说明
`site.wallpaper.mode`	`banner` / `fullscreen` / `none`	横幅、全屏壁纸、纯色背景
`site.wallpaper.src.desktop`	路径或数组	桌面壁纸，路径相对 `/public`；数组长度大于 1 时自动轮播
`site.wallpaper.src.mobile`	路径或数组	移动端壁纸，规则同上
`site.wallpaper.position`	`top` / `center` / `bottom`	壁纸的裁切重心
`site.wallpaper.carousel.enable`	布尔	是否轮播；关闭时多图会随机显示一张
`site.wallpaper.carousel.interval`	秒	轮播间隔
`site.wallpaper.carousel.kenBurns`	布尔	缓慢推近的 Ken Burns 效果
`site.wallpaper.banner.homeText.enable`	布尔	是否只在首页显示横幅文字
`site.wallpaper.banner.homeText.title`	字符串	横幅大标题
`site.wallpaper.banner.homeText.subtitle`	字符串或数组	副标题，数组会依次轮播
`site.wallpaper.banner.homeText.typewriter.enable`	布尔	副标题打字机效果（含 `speed`、`deleteSpeed`、`pauseTime`）
`site.wallpaper.banner.credit.enable`	布尔	是否显示横幅图片来源（`text`、`url`）
`site.wallpaper.banner.navbar.transparentMode`	`semi` / `full` / `semifull`	导航栏透明策略：半透明加圆角、完全透明、滚动时动态变化
`site.wallpaper.banner.waves.enable`	布尔	横幅底部水波纹效果；`performanceMode` 可简化动画以省性能
`site.wallpaper.fullscreen.opacity`	0–1	全屏壁纸模式下内容面板的不透明度
`site.wallpaper.fullscreen.blur`	像素	全屏壁纸的模糊程度
`site.wallpaper.fullscreen.zIndex`	整数	全屏壁纸的层级

首屏加载页由 site.loadingOverlay 控制：enable 开关、waitForFonts（等字体加载）、waitForImages（等首图解码）、maxWait（最长等待秒数），标题与转圈动画各自有 enable 与 interval。

导航菜单

navbar.links 是一个数组，每一项可以是预设名（字符串），也可以是自定义对象。

可用的预设名：Home、Archive、Projects、Skills、Timeline、Diary、Albums、Friends、About（定义在 src/constants/link-presets.ts）。

navbar:
    links:
        - "Home"                 # 一级：预设
        - "Archive"
        - # 一级：自定义，点击后进入中转页
          name: "展览"
          url: "/exhibition/"
          icon: "material-symbols:person"
          description: "收藏我的创作、技能与旅途片段"
          children:              # 子链接可以是预设名，也可以是自定义对象，层级不限
              - "Projects"
              - "Skills"
              - "Timeline"
              - "Diary"
              - "Albums"
        - "Friends"
        - "About"

自定义字段	说明
`name`	导航显示名
`url`	目标地址；填 `/exhibition/` 这类站内地址时会自动生成一个中转页，点击后进入卡片式入口
`icon`	Iconify 图标名，例如 `material-symbols:person`
`description`	中转页卡片上的说明文字
`external`	是否为站外链接（站外会在新标签页打开）
`children`	子链接数组，可继续嵌套

:::caution 预设名写错（多一个空格、大小写不一致、引用了不存在的预设）会在启动时直接抛出 Unknown LinkPreset 并中断构建。改完导航先用 npm run dev 跑一次最保险。 :::

侧边栏挂件

侧栏分左右两栏，每一栏都是一个挂件数组。可用类型：

`type`	作用	常用附加字段
`directory`	按内容集合自动生成的目录树	`position`
`categories`	文章分类树	`depth`（展开层数）、`responsive.collapseThreshold`
`tags`	标签云	`responsive.collapseThreshold`
`toc`	当前文章的目录	`depth`（1–6）
`statistics`	站点统计	`visibility`
`profile`	资料卡（内容来自 `profile` 段）	`visibility`
`announcement`	公告卡（内容来自 `announcement` 段）	`visibility`

每一项都支持下面三个通用字段：

sidebar:
    components:
        left:
            - type: "categories"
              position: "sticky"        # top 跟随内容顶部 | sticky 吸顶
              depth: 3                  # 展开到第三层
              responsive:
                  collapseThreshold: 5  # 超过 5 项时默认折叠
        right:
            - type: "profile"
              position: "top"
              visibility:
                  mode: "exclude"       # include 只在匹配页面显示 / exclude 只在非匹配页面显示
                  paths: ["^/posts/", "^/archive"]   # 正则字符串

:::tip visibility.paths 里填的是正则字符串：^/$ 表示只在首页显示，^/posts/ 表示所有文章页。想让某个挂件只在文章页出现，用 mode: include 配合 ["^/posts/"]。 :::

资料卡与公告

profile:
    avatar: "/assets/images/avatar.svg"        # 相对 /public 目录
    name: "younisekai"
    bio: "在异世界的间隙里，写点代码，也写点故事。"
    links:
        - name: "GitHub"
          icon: "fa6-brands:github"
          url: "https://github.com/yourname/younisekai"
        - name: "RSS"
          icon: "fa6-solid:rss"
          url: "/rss.xml"

announcement:
    title: "异世界公告"
    content: "欢迎来到 younisekai，这里记录着我的代码、文字与旅途。"
    closable: true          # 允许访客关闭公告
    link:
        enable: true
        text: "了解更多"
        url: "/about/"
        external: false

资料卡的社交链接支持站内地址（如 /rss.xml）与站外地址，图标同样是 Iconify 名称。

文章卡片、许可与评论

字段	说明
`post.card.cover.side`	列表卡片里封面的位置：`left` 或 `right`
`post.card.cover.width`	封面占卡片宽度的比例
`post.card.cover.showContent`	封面上是否叠加标题、标签与摘要
`post.card.cover.showDefaultCover`	文章没写封面时是否显示默认封面
`post.card.titleSize`	卡片标题字号，Tailwind 文本类，例如 `text-2xl`
`post.showLastModified`	是否显示「最后编辑」卡片
`post.expressiveCode.theme`	代码高亮主题
`post.license.enable`	是否在文章底部显示版权卡片
`post.license.name` / `url`	全站默认许可协议，可被文章的 `licenseName` / `licenseUrl` 覆盖
`post.comment.enable`	评论总开关
`post.comment.provider`	`waline` 或 `twikoo`；留空则自动选择已填好必填项的那个
`post.comment.waline.serverURL`	Waline 服务端地址
`post.comment.twikoo.envId`	Twikoo 环境 ID

:::note 评论是唯一依赖外部服务的功能：要么把服务端地址与 enable 一起配好，要么保持关闭。关闭时页面上不会留下任何占位区域。 :::

其它开关

配置段	作用
`footer.enable`	是否注入自定义页脚 HTML（备案号之类），内容写在 `footer.customHtml`
`particle.enable`	背景粒子：`particleNum` 数量、`size` / `opacity` / `speed` 的取值范围、`limitTimes` 越界次数、`zIndex` 层级

改配置的推荐流程

只改 YAML，不动 src/ 里的源码——升级模板时会轻松很多。
改完先 npm run dev 看效果，再 npm run build 验证一次构建。
站点地址、站点标题、导航、侧栏这四项是「先定下来」的配置项，越早改越省事。
用 Git 记录每次配置改动，出问题能一键回退。

配置之外的东西（新增挂件类型、改配色算法、加新页面）属于源码级定制，建议单独开分支，并在提交信息里写清动机，方便日后与上游对照。

图表与数学公式：Mermaid 与 KaTeX

Mon, 11 May 2026 00:00:00 GMT

图表和公式是「技术文章值得写下来」的重要原因之一：一张图能替掉三段解释，一个公式能让「大概是这样」变成「就是这样」。

为什么用文本画图

Mermaid 的输入是纯文本，输出由浏览器现场渲染。好处很实际：

图可以进 Git，改动可 diff、可回溯；
换主题、换配色不用重画；
不用打开任何绘图软件，写文章时顺手就画了。

写法就是在代码块上标注 mermaid：

```mermaid
graph LR
    A[写作] --> B[构建]
```

流程图

从写作到上线，这条链路值得画出来——它解释了为什么「本地能跑」和「线上能跑」是两件事。

graph TD
    A[写 Markdown] --> B{frontmatter 是否合法}
    B -->|否| C[构建报错并指出字段]
    B -->|是| D[渲染正文与扩展语法]
    D --> E[生成页面与数据集合页]
    E --> F[生成 Pagefind 搜索索引]
    F --> G{是否生产构建}
    G -->|是| H[跳过 draft 文章]
    G -->|否| I[草稿也一起预览]
    H --> J[输出 dist 目录]
    I --> J
    J --> K[部署到静态托管]

:::tip 节点文字里出现 {} [] () 时要用引号包起来，例如 A["带括号的 (文字)"]，否则 Mermaid 会把括号当成形状语法。 :::

时序图

带交互的功能适合用时序图说清楚「谁在什么时候做了什么」。以访问一篇加密文章为例：

sequenceDiagram
    participant U as 读者
    participant B as 浏览器
    participant S as 静态页面

    U->>B: 打开文章地址
    B->>S: 请求页面
    S-->>B: 返回加密后的正文（密文）
    B-->>U: 显示密码输入框
    U->>B: 输入密码并解锁
    B->>B: 本地 AES 解密
    alt 密码正确
        B-->>U: 展开正文并渲染图表
    else 密码错误
        B-->>U: 提示「密码不正确」
    end

关键结论写在图里了：解密发生在浏览器本地，服务端从头到尾只发密文。

状态图

文章的「一生」其实是个状态机，用状态图画出来，draft 与 updated 的作用就一目了然：

stateDiagram-v2
    [*] --> Draft
    state "草稿" as Draft
    state "待发布" as Ready
    state "已发布" as Published
    state "已更新" as Updated
    Draft --> Ready : 补全 frontmatter
    Ready --> Published : draft 改为 false
    Published --> Updated : 修改正文并更新 updated
    Updated --> Published : 重新构建
    Published --> Draft : 撤回修改
    Published --> [*] : 删除文件

甘特图

给内容排期的时候，甘特图比待办清单直观：

gantt
    title 站点内容建设排期
    dateFormat YYYY-MM-DD
    axisFormat %m/%d

    section 基础设施
    目录与数据集合           :done, a1, 2026-03-01, 10d
    搜索索引接入             :done, a2, after a1, 6d

    section 内容
    示例文章与写作指南       :active, b1, 2026-03-12, 20d
    图表与公式专题           :b2, after b1, 8d
    长文示例与归档整理       :b3, after b2, 10d

    section 收尾
    上线前检查               :c1, after b3, 5d
    正式上线                 :milestone, after c1, 0d

饼图

数据占比这种一眼就懂的东西，交给饼图：

pie title 文章分类占比（示例数据）
    "内容创作" : 4
    "主题定制" : 3
    "入门指南" : 1
    "站点公告" : 1
    "技术笔记" : 1

可以放心的是，Mermaid 支持的类型远不止这五种，类图、实体关系图、思维导图、时间线都能写，语法都是同一套「文字描述结构」的思路。

数学公式

行内公式写在单个美元符号之间，例如质能方程 $E = mc^2$、求根公式 $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$，或者站点里更常见的阅读时长估算 $t = \lceil w / 300 \rceil$。

独立成行的公式用两个美元符号，会居中并单独占一行：

$$ \text{阅读时长（分钟）} = \left\lceil \frac{\text{正文字数}}{300} \right\rceil $$

多行对齐

用 aligned 环境可以让等号对齐，推导过程会好读很多：

$$ \begin{aligned} S(n) &= \sum_{i=1}^{n} i \ &= \frac{n(n+1)}{2} \ &= \frac{n^2 + n}{2} \end{aligned} $$

矩阵与分段函数

$$ A = \begin{pmatrix} a_{11} & a_{12} \ a_{21} & a_{22} \end{pmatrix} \qquad f(x) = \begin{cases} x^2, & x \ge 0 \ -x, & x < 0 \end{cases} $$

常用符号速查

想要的效果	写法
分式	`\frac{a}{b}`
求和、连乘	`\sum_{i=1}^{n}`、`\prod_{i=1}^{n}`
积分	`\int_{0}^{\infty} e^{-x}\,dx`
极限	`\lim_{x \to 0}`
希腊字母	`\alpha \beta \gamma \Delta \Omega`
上下标	`x_i^2`、`a_{n+1}`
向量与范数	`\vec{v}`、`\lVert v \rVert`
文本混排	`\text{说明文字}`

例如把上面几个符号拼起来：

$$ \lim_{n \to \infty} \prod_{k=1}^{n} \left(1 + \frac{1}{k}\right)^{k} \quad \text{与} \quad \int_{0}^{1} x^{\alpha-1}(1-x)^{\beta-1},dx = B(\alpha, \beta) $$

几个容易踩的坑

:::warning 美元符号会被当成公式定界符。 想写出「价格 100 美元」这种句子时，请写 100 美元 而不是 100$，否则后面的文字会被解析成公式。 :::

:::note 公式里的反斜杠在 Markdown 中是转义字符，命令行之类的场合请放到行内代码里（`\frac`），不要直接裸写。 :::

组合建议

一篇文章最多两三张图，超过就说明结构需要重新组织。
公式能简就简：能一句话说清的结论，不必写成三重积分。
图表要给标题或上下文，脱离正文的图对读者和搜索引擎都不友好。
图和公式都是纯文本，改动时优先改文字，别去调整间距——渲染效果由主题统一控制。

排版速查表：Markdown 能写成什么样

Mon, 06 Apr 2026 00:00:00 GMT

这一页是写给自己的备忘录：需要哪种排版，直接从这里复制写法。文中所有示例都是真实渲染的，不是截图。

标题层级

正文用 ## 起步比较合适——文章标题本身已经占掉了最高一级。

三级标题

四级标题

标题会自动生成锚点，鼠标悬停时右侧出现 #，侧栏目录也会按层级同步展开。

文本与强调

加粗、斜体、~~删除线~~、行内代码、普通链接、上标式写法如 H~2~O 与 x^2^（部分语法取决于渲染器，不保证全部生效）。

需要打断行时，行尾两个空格即可，例如这一行结尾有两个空格，
所以这一句出现在了新的一行。

列表

无序列表：

第一项
第二项
- 嵌套一层
- 再嵌套一层
第三项

有序列表：

收集素材
写出草稿
通读一遍并删掉三分之一

任务列表（GitHub 风格）：

[x] 建好目录结构
[x] 接入搜索
[ ] 补齐示例内容
[ ] 换个自己的域名

引用

引用适合放别人的观点、规范原文或需要特别强调的一段话。

引用内部同样支持行内样式与列表：

一个要点

另一个要点

表格

列名	类型	说明
`title`	字符串	左对齐是默认值
`pinned`	布尔	居中对齐
`published`	日期	右对齐

表格支持对齐语法（:---、:---:、---:），单元格里可以用行内代码与链接。

代码块

多语言示例

// JavaScript：把文章按发布时间倒序排列
export function sortByPublished(posts) {
    return [...posts].sort((a, b) => new Date(b.published) - new Date(a.published));
}

// TypeScript：给内容集合的字段加上类型
interface PostFrontmatter {
    title: string;
    published: Date;
    tags: string[];
    pinned?: boolean;
}

export function isPinned(post: PostFrontmatter): boolean {
    return post.pinned === true;
}

# Python：粗略统计每个标签出现的次数
from collections import Counter

def tag_cloud(posts):
    counter = Counter(tag for post in posts for tag in post["tags"])
    return counter.most_common(10)

{
    "title": "示例条目",
    "tags": ["Markdown", "排版"],
    "visible": true
}

/* CSS：给引用块加一条左侧色带 */
blockquote {
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: 1rem;
}

# 构建并在本地预览产物
npm run build
npm run preview

标题、行号与文本高亮

给代码块加上 title 会显示文件名栏，showLineNumbers=true 打开行号，ins / del / mark 可以标记新增、删除与重点行：

```js title="sort-posts.js" showLineNumbers=true ins={4} del={2} mark={6}
```

渲染效果如下：

function sortPosts(posts) {
    return posts.sort((a, b) => a.date - b.date);
    const items = [...posts];
    return items.sort((a, b) => new Date(b.published) - new Date(a.published));
    // 下面这一行是这次改动的重点
    console.log("排序完成", items.length);
}

可折叠代码段

内容很长的代码块可以折叠起来，读者点一下「展开」再看细节。语法是在代码块信息串里写 collapse={起始行-结束行}：

```ts collapse={2-6}
```

实际效果：

export const siteMeta = {
    name: "younisekai",
    version: "1.0.0",
    generator: "Astro",
    search: "pagefind",
    comments: false,
};

export function describe() {
    return `${siteMeta.name} v${siteMeta.version}`;
}

脚注

脚注适合放补充说明和引用出处^1。定义可以写在文章任意位置，渲染时会自动收到文末[^docs]。

[^docs]: 官方文档通常是最靠得住的参考资料，例如 Astro 文档。

链接与图片

行内链接：Astro 官方文档、Pagefind 搜索。

图片可以直接引用 public 目录下的占位图：

也可以引用与文章放在一起的图片，写法是 ./路径（相对于当前 Markdown 文件）：

:::tip 相对路径（./xxx.png）适合会跟着文章一起搬家的素材；public 目录下的绝对路径（/assets/...）适合全站复用的封面与头像。注意相对路径引用的是图片文件本身，构建时会被一并处理；一旦路径写错，构建会直接报 ImageNotFound 而不是静默跳过。 :::

GitHub 仓库卡片

写一行指令就能得到一张会实时拉取数据的仓库卡片：

::github{repo="withastro/astro"}

::github{repo="withastro/astro"}

:::note 卡片里的 star 数、协议、语言等信息由访客浏览器现场请求 GitHub API 获取，所以第一次打开时会短暂显示「Waiting...」。仓库名必须写成 作者/仓库 的格式。 :::

提示框

五种类型

:::note note：需要读者留意、但即使跳读也不该错过的信息。 :::

:::tip tip：能让人少走弯路的可选建议。 :::

:::important important：完成某件事所必需的关键信息。 :::

:::warning warning：存在风险、需要立刻注意的内容。 :::

:::caution caution：某个操作可能带来的负面后果。 :::

如上所示，写法是三个冒号包住一段内容：

:::note
需要读者留意的信息。
:::

自定义标题

在类型后面接方括号即可覆盖默认标题：

:::note[这里的标题是我自己写的] 标题支持中英文与行内样式，正文部分照常支持 Markdown。 :::

:::note[这里的标题是我自己写的]
标题支持中英文与行内样式。
:::

GitHub 风格提示框

习惯 GitHub 写法的话，用引用块加类型标记也可以：

[!TIP] 这种写法在 GitHub 上能正确渲染，在本站同样会被识别成提示框。

> [!TIP]
> 这种写法在本站同样会被识别成提示框。

隐藏文本

需要防剧透或者放一点小彩蛋时，用行内指令：

这段内容的结论是 :spoiler[其实答案就在下一段，但我先藏起来了]。

这段内容的结论是 :spoiler[其实答案就在这里]。

组合使用的建议

少即是多：一篇文章里提示框超过五个，读者就会开始忽略它们。
代码块给语言名：bash、json、ts 这些标记不仅有配色，也让复制按钮与语言角标更准确。
长代码折叠：超过 20 行的示例，用 collapse 折叠，把注意力留给结论。
图片要写替代文本：方括号里的描述对无障碍阅读与 RSS 都很重要，别留空。

语法速查就到这里。图表与公式见图表与数学公式。

写作指南：frontmatter 全解析

Wed, 18 Mar 2026 00:00:00 GMT

一篇文章的开头两行 --- 之间，就是 frontmatter：它不参与正文排版，却决定了文章出现在哪里、长什么样、给谁看。

一篇文章的最小结构

---
title: 我的第一篇笔记
published: 2026-03-18
description: 一句话说清这篇写的是什么。
---

正文从这里开始。

只写这三个字段就能发布。其余字段按需添加，全部缺省值都是「不启用」。

字段总览

字段	类型	默认值	作用
`title`	字符串	必填	文章标题，同时用于列表页、RSS 与浏览器标题
`directoryTitle`	字符串	空	侧栏目录树中显示的名字；留空时回退为 `title`
`published`	日期	空	发布日期，用于排序；留空时回退到文件的 Git 首次提交时间
`updated`	日期	空	更新日期；填写后会显示「上次编辑」卡片与文章底部的差异信息
`description`	字符串	空	摘要，显示在列表卡片、分享卡片与搜索结果里
`cover`	字符串	空	封面图，见下方「封面怎么填」
`coverInContent`	布尔	`false`	是否在正文顶部再渲染一次封面大图
`category`	字符串或数组	空	分类，数组即嵌套分类
`tags`	数组或逗号分隔字符串	空	标签，用于标签云与归档筛选
`lang`	字符串	空	内容语言，例如 `zh_CN`；用于 RSS 与 HTML 的语言标记
`pinned`	布尔	`false`	是否置顶到文章列表最前
`author`	字符串	空	作者名，显示在版权卡片里；留空则用站点资料页的名字
`sourceLink`	字符串	空	原文或来源链接，填写后版权卡片会指向它
`licenseName`	字符串	空	本篇文章的许可协议名称，例如 `CC BY 4.0`
`licenseUrl`	字符串	空	许可协议链接
`comment`	布尔	`true`	这篇文章是否允许评论；实际是否显示还取决于站点配置里的评论总开关
`draft`	布尔	`false`	草稿标记，生产构建会跳过草稿
`encrypted`	布尔	`false`	是否对正文加密
`password`	字符串	空	解锁密码，与 `encrypted: true` 配对使用
`copyProtection`	对象	全部 `false`	页面级复制保护开关，见下文
`routeName`	字符串	空	额外的自定义地址（不替换默认地址）

:::tip prevTitle、prevSlug、nextTitle、nextSlug 这四个字段由构建过程自动填充，用来生成文章底部的上一篇/下一篇跳转，不要在 frontmatter 里手写。 :::

日期怎么写

推荐 ISO 8601 的 YYYY-MM-DD，需要精确到时间就写 YYYY-MM-DDTHH:mm:ss。published 决定排序，updated 只影响「最后修改于多久之前」的展示：

published: 2026-03-18
updated: 2026-05-06

:::note 没有写 published 时，构建会依次尝试读取该文件的 Git 首次提交时间、文件创建时间。为了排序稳定，公开发布的文章建议都显式写上日期。 :::

分类与标签

分类是「树」，标签是「云」，两者用途不同：分类回答「这篇属于哪个板块」，标签回答「这篇讲到了哪些点」。

# 单层分类
category: 内容创作

# 嵌套分类：写在数组里，用「 / 」连接展示
category: [技术笔记, 前端]

# 标签可以写成数组
tags: [Markdown, 排版]

# 也可以写成逗号分隔的字符串，效果相同
tags: Markdown, 排版

嵌套分类在本站的表现：侧栏的「文章类别」会按层级展开，点击后跳转到归档页的筛选结果，地址形如 /archive/?category=技术笔记%20%2F%20前端。也就是说嵌套分类是整体匹配的，点「技术笔记 / 前端」只会筛出同时属于这两层的文章。

封面怎么填

cover 支持三种写法，按前缀区分：

cover: /assets/images/covers/cover-01.svg   # 以 / 开头：public 目录下的文件
cover: ./cover.svg                          # 以 ./ 开头：与文章同目录的文件
cover: https://example.com/cover.png        # 以 http 开头：网络图片

至于 coverInContent：

coverInContent: false（默认）：封面只出现在列表卡片上，正文里不会再出现一次大图。
coverInContent: true：封面额外渲染在正文标题与元信息之下，形成「题图」效果，适合长文。

两者可以同时给，也可以只给 cover，甚至完全不给——没封面时列表卡片会使用默认封面。

草稿机制

draft: true

开发模式下草稿照常显示，方便你边写边预览。
生产构建（npm run build）会跳过所有草稿，RSS、站点地图、搜索结果与侧栏目录树里都不会出现它们。
想让人在看得到、但暂时不想进列表，可以用 pinned + 不写 description 之类的组合，不过那属于权宜之计，正式做法仍是草稿开关。

加密与复制保护

正文加密只需要两个字段：

encrypted: true
password: "younisekai"

构建时会把渲染好的正文用 AES 加密后写进页面，只有在访客输入正确密码时才会在浏览器端解密展开。演示与注意事项见给文章加一把锁。

复制保护是四个互不影响的小开关：

copyProtection:
    blockSelection: true      # 禁止选中文本
    blockClipboard: true      # 拦截复制、剪切、粘贴
    blockContextMenu: true    # 禁止右键菜单
    blockDevTools: true       # 屏蔽 F12、Ctrl+U、Ctrl+S

四项默认都是 false，按需开启；每一项的具体行为见复制保护四种开关。

作者、来源与许可

author: 游音
sourceLink: https://example.com/original
licenseName: CC BY 4.0
licenseUrl: https://creativecommons.org/licenses/by/4.0/

版权卡片会优先使用这里填的值，licenseName 留空时则回落到站点配置里的默认协议。转载、翻译或引用他人内容时，把 sourceLink 填上是最基本的礼貌。

被忽略的文件

src/content/posts/ 下以 _ 开头的文件不会生成页面，可以放心用来放模板、素材说明和草稿片段。本仓库里的 _frontmatter-template.md 就是这么一份可直接复制的模板。

快速上手：从本地到线上

Mon, 09 Mar 2026 00:00:00 GMT

这一篇只讲「怎么把它跑起来并发布出去」。所有命令都在项目根目录执行。

环境准备

依赖	版本要求	说明
Node.js	`>= 20.3.0`	构建、脚本与 Astro 都依赖它，版本写在 `package.json` 的 `engines` 里
包管理器	npm / pnpm / yarn 任选	仓库内附带 `package-lock.json`，用 npm 最省事
Git	任意较新版本	文章的发布日期在缺省时会回退到文件的 Git 首次提交时间

:::note 搜索索引、图片处理这些都跑在本地构建阶段，不需要额外安装数据库或服务端环境。真正需要联网的只有两处：Mermaid 图表（运行时从 CDN 取库）与 GitHub 卡片（运行时请求 GitHub API）。 :::

安装与启动

# 1. 安装依赖
npm install

# 2. 启动本地开发服务器（默认 http://localhost:4321/）
npm run dev

开发服务器带热更新：改 Markdown、改 JSON、改样式，浏览器里会立刻反映出来。文章出现在 /posts/<文件名>/，数据集合分别对应 /projects/、/skills/、/timeline/、/diary/、/albums/。

常用脚本速查

命令	作用
`npm run dev`	生成图标数据后启动开发服务器
`npm run build`	先生成图标数据，再执行 Astro 构建并调用 Pagefind 生成搜索索引
`npm run preview`	本地预览构建产物（建议每次发版前跑一遍）
`npm run check`	Astro 官方检查：内容集合 schema、组件引用、类型问题
`npm run type-check`	只跑 TypeScript 类型检查，不产出文件
`npm run new-post -- "文章标题"`	按 schema 生成一篇带完整 frontmatter 的空文章
`npm run assets`	重新生成资源配置相关的产物
`npm run check-stylus`	检查内联 Stylus 样式能否正常编译

用脚本新建一篇文章

手写 frontmatter 容易漏字段，所以仓库里准备了一个小脚本：

# 在 posts 根目录建一篇文章
npm run new-post -- "我的第一篇笔记"

# 放在子目录里（目录不存在会自动创建）
npm run new-post -- "guide/写作速查"

# 顺便把标签也写好
npm run new-post -- "读书笔记" --tags 读书,随笔

# 也可以显式指定扩展名
npm run new-post -- "随笔.mdx"

脚本会把文件写到 src/content/posts/ 下，并填好与内容集合 schema 一致的全部字段，接着你只要改内容即可。

目录与命名约定

文章：src/content/posts/ 下的 .md 或 .mdx 文件，文件名就是网址。放在子目录里网址也会带上子目录，例如本文件位于 posts/guide/getting-started.md，默认地址是 /posts/guide/getting-started/。
数据：项目、技能、历程、日记、相册、友链各占一个目录，文件名就是条目的 id，请保持唯一。
以 _ 开头的文件会被忽略：src/content/posts/_草稿模板.md 不会生成页面，适合放模板、片段和素材说明。
目录名与文件名建议用英文小写加连字符，避免网址里出现需要转义的中文。

侧栏目录树里的显示名

侧栏目录树会用两种方式取名：目录节点直接用目录名，文章节点则优先用 frontmatter 里的 directoryTitle，没写就回退到 title。所以「目录名保持英文、显示名交给 directoryTitle」是推荐做法：

---
title: 快速上手：从本地到线上
directoryTitle: 快速上手
---

自定义文章地址

给文章加上 routeName 之后，它在默认地址之外额外多出一个更短的地址：

---
title: 快速上手：从本地到线上
routeName: "start"
---

上面这段配置会让这篇同时可以通过 /posts/start/ 访问（默认的 /posts/guide/getting-started/ 依然有效）。适合把常被引用的文章挂一个短地址，比如 /posts/start/、/posts/faq/。

构建与部署

npm run build      # 产出 dist/，并在其中生成 pagefind/ 搜索索引
npm run preview    # 用本地服务器预览 dist/ 的实际效果

构建脚本会自动识别部署平台并把索引写进对应的产物目录：GitHub Actions、Cloudflare Pages、Netlify 用 dist/，Vercel 用 .vercel/output/static/。纯静态部署时，dist/ 整个目录丢到任意静态托管（对象存储 + CDN、Nginx、GitHub Pages 都行）即可。

:::tip 如果部署平台支持缓存，记得把 dist/pagefind/ 一起上传。少了它，页面还在，但搜索框会一直转圈。 :::

仓库里还带了 Dockerfile 与 docker-compose.yml，想自建服务器的话可以直接构建镜像运行。

上线前检查清单

[ ] npm run check 没有报错
[ ] 站点的 siteURL 已改成自己的域名（影响 RSS、站点地图与分享卡片）
[ ] npm run new-post 建的那几篇示例文章已替换成自己的内容
[ ] 想隐藏的示例文章加上 draft: true，或直接删掉文件
[ ] cover 指向的图片确实存在（本地相对路径用 ./xxx.svg，public 目录里的用 /assets/...）
[ ] 需要加密的文章同时设置了 encrypted: true 与 password
[ ] 评论等外部服务要么配置好，要么在配置里显式关掉

常见问题

构建成功但文章不见了？ 先看 draft。生产构建会跳过所有 draft: true 的文章，开发模式则仍然显示，方便边写边看。

封面图没显示？ 检查路径写法：以 / 开头表示 public 目录下的文件，以 ./ 开头表示与文章同目录的文件，以 http 开头表示网络图片。

想换主题色、改侧栏组件顺序？ 这些都在站点总配置文件里，字段说明见主题与站点配置。