配置

所有选项都通过 vite.config.ts 中的 blogTheme() 传入。

BlogThemeOptions

选项类型默认值说明
titlestring站点标题。用于 <title>、侧边栏品牌名、OG 标签和 RSS。
descriptionstring站点描述。用于 meta 和 OG。
basestring站点的完整 URL(例如 https://example.com),用于生成绝对 RSS 链接与 OG 图片 URL。
author AuthorProfile 显示在侧边栏的作者信息。
about{ html: string }渲染在侧边栏作者信息下方的原始 HTML(请保持简短——"关于"页已不再独立存在)。
navbarArray<{ title, to }>作者信息下方的导航链接。to 会自动拼接 SvelteKit 的 base
themeColor ThemeColor Ember 配色深色模式调色板覆盖。
themeColorLight ThemeColor 暖色奶油浅色模式调色板覆盖。
defaultMode'system' | 'dark' | 'light''system'用户切换前的初始颜色模式。
postsDirstring'src/posts'扫描 *.md 文章的目录。
pageSizenumber12首页每页展示的文章数。
highlighter HighlighterOptions Shiki/Twoslash 选项。
rss{ enabled, limit, copyright }开启,20RSS 生成。写入 static/rss.xml
ogImage{ enabled, fontPath, tagline }开启通过 Satori 为每篇文章生成 OG 图片。
giscus GiscusConfig 设置后启用基于 GitHub Discussions 的评论。

AuthorProfile

interface AuthorProfile {
  : string
  ?: string // 绝对 URL 或 /-开头的 static/ 路径
  ?: string
  ?: {
    ?: string // 用户名,非 URL
    ?: string // 用户名,非 URL
    ?: string // 完整的资料页 URL
    ?: string // 形如 'name.bsky.social' 的 handle
    ?: string
    ?: string // 完整 URL
    ?: string // 完整 URL 或 /-开头的路径
  }
}
ts

ThemeColor

interface ThemeColor {
  ?: string // 默认 '#fb923c'
  ?: string // 默认 '#dc2626'
  ?: string // 默认 '#1a0a00'
  ?: string // 默认 '#2d1200'
}
ts

HighlighterOptions

interface HighlighterOptions {
  ?: string // Shiki 主题,默认 'night-owl'
  ?: string // Shiki 主题,默认 'vitesse-light'
  ?: string[] // 额外语言,会与默认合并
  ?: boolean // 启用 Twoslash TypeScript 悬浮信息
}
ts

GiscusConfig

interface GiscusConfig {
  : `${string}/${string}`
  : string
  : string
  : string
  ?: 'pathname' | 'url' | 'title' | 'og:title' | 'specific' | 'number'
  ?: boolean
  ?: 'top' | 'bottom'
  ?: string
}
ts

giscus.app 获取这些字段。设置 giscus 后,每篇文章下方会自动渲染一个 GiscusComments 组件,主题切换(浅/深色)会自动同步。

环境变量

示例站点在构建时会读取两个环境变量:

变量作用
BASE_PATHSvelteKit 的 paths.base。部署到子路径时设置。
SITE_URL覆盖 blogTheme()base,用于生成 OG/RSS 的绝对 URL。

主题本身不会读取这两个变量——它们通过你的 svelte.config.jsvite.config.ts 接入。

最后更新于: 2026/04/17 03:36:00