Quartz配置

字体配置

1. quartz/components/Head.tsx中引入字体文件

<link
          rel="stylesheet"
          href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreen.css"/>

2. 在quartz.config.ts中QuartzConfig.configuration.theme.typography中可配置字体，设置为LXGW WenKai Screen

3. 可在quartz/styles/custom.scss中修改字体大小，例如

body {
  font-size: large;
}

标签页优化

具体参考Commit d0271a4和Commit 3878907中提交的代码

feat(components): 添加标签云组件

• 新增 TagCloud 组件，用于展示标签云
• 在 components/index.ts 中导出 TagCloud 组件
• 更新 i18n 文件，添加标签云组件的国际化支持
• 在 tagPage.tsx 中添加 TagCloud 组件到标签页面布局中

---

style(quartz): 隐藏 popover 中的 tag cloud

• 在 custom.scss 文件中添加 CSS 样式，隐藏 popover 中的 tag cloud 元素
• 使用了 !important 声明，确保样式优先级

1. 预览窗口（popover）内容的生成机制

• 悬浮预览窗口的内容，是通过 JS 动态 fetch 目标页面的 HTML，然后只提取 .popover-hint 这个 class 的内容，插入到弹窗中。
• 也就是说，popover 只会显示页面中带有 popover-hint class 的那一部分内容，而不是整个页面。

2. TagCloud 的渲染位置

• 在 tagPage 的 emitter 里，TagCloud 组件被放在 beforeBody，而 beforeBody 会被包裹在 <div class="popover-hint"> 里（见 renderPage.tsx）。
• 这意味着，TagCloud 组件会被包含在 popover 预览内容中。

3. 如何让 TagCloud 不出现在 popover 里？

Info

方案一：在 TagCloud 组件内判断“当前是否为 popover 渲染”

由于 popover 渲染时，TagCloud 组件的 props 没有任何特殊标记（如 isPreview、preview、context 等），但你可以用“环境检测”来判断：

• 在浏览器端，window.parent !== window 通常表示当前页面被嵌入在 iframe 中，但 Quartz 的 popover 不是 iframe。
• 但 popover 的 HTML 结构是：只会渲染 .popover-hint 里的内容。**你可以通过 JS 检查自己是否在 popover 里

方案二：用 CSS 隐藏

你可以在 quartz/components/styles/popover.scss 里加一条规则，专门隐藏 popover 里的 TagCloud：

.popover .tag-cloud {
  display: none !important;
}

这样，主页面正常显示 TagCloud，popover 预览窗口自动隐藏 TagCloud，无需改动任何 TS/JS 代码，也不会影响 SSR 或静态页面生成。

推荐做法

项目为我们预留了自定义样式的位置，我们应该在quartz/styles/custom.scss中添加

.popover .tag-cloud {
  display: none !important;
}

这样即可完美实现：

• 主页面有 tagCloud
• 预览窗口（popover）不显示 tagCloud