Quartz 配置文件 (yaml) 逐行解析

这是一份用于配置静态博客或数字花园(如 Quartz 框架)的配置文件,常用于将类似 Obsidian 的本地笔记发布为网页。

1. 基础环境与全局设置

# yaml-language-server: $schema=./quartz/plugins/quartz-plugins.schema.json

  • 作用: 这是一行注释,告诉代码编辑器(如 VS Code)在编辑此 YAML 文件时,参考指定的 Schema 文件进行语法检查和自动补全。

configuration:

  • 作用: 核心配置块的开始标记,下方缩进的内容均为网站的全局配置。

pageTitle: Cisco Cert Blueprint
pageTitleSuffix: ""

  • pageTitle 网站的全局主标题,显示在浏览器标签页和网站导航栏左上角。
  • pageTitleSuffix 页面标题的后缀(当前为空)。若设置为 " - 笔记",则某篇名为 “OSPF” 的页面,其浏览器标签会显示为 “OSPF - 笔记”。

enableSPA: true
enablePopovers: true

  • enableSPA 开启单页应用(Single Page Application)模式。点击内部链接时内容平滑替换,无需重新加载整个网页,阅读体验极佳。
  • enablePopovers 开启悬浮窗预览。鼠标悬停在内部链接上时,会弹出小气泡预览该页面的内容。

analytics:
provider: plausible

  • 作用: 配置网站的流量统计服务。此处使用的是 Plausible(一个轻量、开源且注重隐私的 Google Analytics 替代品)。

locale: en-US
baseUrl: ciscoccie.pages.dev

  • locale 网站本地化语言区域设为美国英语(en-US),会影响日期格式和内置组件的语言显示。
  • baseUrl 网站发布后的基础域名(.pages.dev 通常表示你的网站部署在了 Cloudflare Pages 上)。

2. 发布过滤规则

ignorePatterns:
- private
- templates
- .obsidian

  • 作用: 定义在构建网页时,不要发布到公网的文件夹或文件。
    • - private 忽略名为 private 的文件夹(适合存放不宜公开的个人笔记)。
    • - templates 忽略模板文件夹。
    • - .obsidian 忽略 Obsidian 软件自身的系统配置文件夹。这一行极其关键,确保了你的本地工作区设置、插件配置和快捷键等隐私信息不会被一并打包上传。

3. 主题与外观 (Theme)

theme:
fontOrigin: googleFonts
cdnCaching: true

  • fontOrigin 网站字体来源,配置为从 Google Fonts 拉取。
  • cdnCaching 开启 CDN 缓存,加速全球访问者的网页加载和资源读取速度。

3.1 字体排版 (Typography)

typography:
header: Schibsted Grotesk
body: Source Sans Pro
code: IBM Plex Mono

  • header 各级标题(H1, H2 等)使用的字体。
  • body 正文段落使用的字体。
  • code 代码块使用的字体。IBM Plex Mono 是一款清晰的等宽字体,非常适合用来展示路由器的 CLI 配置命令。

3.2 颜色方案 (Colors)

颜色配置分为白天模式 (lightMode) 和暗黑模式 (darkMode),结构完全对称。

colors:
lightMode:
light: "#faf8f8" # 网站主背景色(极浅的灰白色)
lightgray: "#e5e5e5" # 边框、分割线或搜索框的背景色
gray: "#b8b8b8" # 辅助文字颜色(如日期、次要标签)
darkgray: "#4e4e4e" # 正文主要文字颜色(深灰,比纯黑更护眼)
dark: "#2b2b2b" # 标题或强调文字颜色(接近纯黑)
secondary: "#284b63" # 次要强调色(通常用作内部链接默认颜色)
tertiary: "#84a59d" # 第三强调色(鼠标悬停在链接上的变色)
highlight: rgba(143, 159, 169, 0.15) # 引用块或代码块背景的微亮色
textHighlight: "#fff23688" # 文本高亮色(类似黄色荧光笔)

  • 暗黑模式 (darkMode): 逻辑与白天模式完全一致,只需将颜色反转:背景变为深色(如 #161618),文字变为浅色(如 #ebebec),链接和高亮色进行适当的饱和度调整,确保在暗色背景下不会刺眼。