站点配置与个性化

站点配置与个性化

Clarity 的配置分为 blog.config.ts 与 app.config.ts 两层。本文说明两者的分工,并列本站的个性化改动。

两层配置

Clarity 把配置拆成两层,思路很清晰:

  • blog.config.ts:启动时需要的静态配置。
    • 站点标题、副标题、描述、作者、版权协议、域名
    • 分类表、文章版式、排序字段
    • 订阅源、<head> 脚本、统计范围、评论服务
  • app/app.config.ts:运行时可变的响应式配置。
    • 页脚导航、侧栏图标按钮、页脚版权
    • 左栏 Logo 与 Emoji、导航菜单
    • 分页、主题图标、组件行为

app.config.ts 会先把 blog.config 展开进来,因此两者的字段可以互相引用(例如页脚版权用站点标题拼接)。

本站的个性化改动

配置项位置本站取值
站点标题blog.configCreamClarityDEMO
站点域名blog.confighttps://cdemo.iicemeta.com/
作者邮箱blog.config[email protected]
分类表blog.config功能演示 / 写作指南 / 站点配置 / 关于
页脚版权app.config©2026 CreamClarityDEMO
页脚「探索」app.config仅保留 Atom 订阅
页脚「社交」app.configGitHub、邮箱
页脚「信息」app.config主题版本、备案号
侧栏底部app.config个人主页、GitHub、Atom 订阅
左栏导航app.config文章 / 合集 / 友链 / 归档

页脚

页脚由 app.config.ts 的 footer.nav 控制,按「分组 → 条目」渲染。本站:

  • 探索:只保留 Atom 订阅
  • 社交:GitHub(24works/clarity-example)与邮箱
  • 信息:主题版本(自动取 package.json 的版本号)与备案号
ts
footer: {
	copyright: `©2026 ${blogConfig.title}`,
	nav: [
		{ title: '探索', items: [{ icon: 'tabler:rss', text: 'Atom订阅', url: '/atom.xml' }] },
		// …社交、信息
	],
},

侧栏底部按钮

侧栏底部的图标按钮由 footer.iconNav 控制,本站保留三项:个人主页(指向本站)、GitHub、Atom 订阅。

左栏 Logo 与 Emoji

header.emojiTail 控制左栏 Logo 悬浮时浮现的 Emoji,header.showTitle 决定显示标题还是纯 Logo。本站的 Emoji 与站点气质呼应。

主题模式

themes 定义了「浅色 / 跟随系统 / 深色」三档及其图标,由 @nuxtjs/color-mode 实现,默认跟随系统、回退浅色。

改配置的顺序

新增一个站点前,建议先跑一遍上游的 pnpm init-project 清理示例内容,再按上面的清单逐项填写,最后对照变更文档确认没有遗漏。

订阅、搜索与评论
侧栏插槽与文章内插槽