评论功能

Quartz 提供了集成多种评论服务的功能，方便读者在您的网站上留言评论。

截至目前，Quartz 已内置支持 Giscus 评论系统。我们欢迎通过 Pull Request 提交对其他评论服务的支持！

支持的服务

Giscus

首先，请确保您用于 Quartz 的 GitHub 仓库 满足以下要求：

1. 仓库必须设为公开状态，否则访客将无法查看讨论内容。
2. 已安装 giscus 应用，否则访客将无法发表评论和互动。
3. 已启用 Discussions 功能，具体操作请参考为仓库启用讨论功能指南。

接下来，通过 Giscus 官网 获取您的 repoId 和 categoryId 参数。请确保在讨论分类中选择 Announcements 类型。

当您正确输入仓库信息并选择讨论分类后，Giscus 会自动生成所需的配置参数。您无需手动添加脚本代码，Quartz 会为您自动处理这部分，但需要将生成的参数值填入下一步配置中！

最后，在 quartz.layout.ts 文件中，编辑 sharedPageComponents 的 afterBody 字段，填入以下配置项（请替换为您实际获取的参数值）：

sharedPageComponents: {
  afterBody: [
    // ...
    "<script src=\"https://giscus.app/client.js\" \
      data-repo=\"[在此输入仓库名]\"
      data-repo-id=\"[在此输入仓库ID]\" \
      data-category=\"Announcements\" \
      data-category-id=\"[在此输入分类ID]\" \
      data-mapping=\"pathname\" \
      data-strict=\"0\" \
      data-reactions-enabled=\"1\" \
      data-emit-metadata=\"0\" \
      data-input-position=\"top\" \
      data-theme=\"preferred_color_scheme\" \
      data-lang=\"zh-CN\" \
      crossorigin=\"anonymous\" \
      async> \
    </script>",
    // ...
  ],
  // ...
}

quartz.layout.ts

afterBody: [
  Component.Comments({
    provider: 'giscus',
    options: {
      // from data-repo
      repo: 'jackyzha0/quartz',
      // from data-repo-id
      repoId: 'MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg',
      // from data-category
      category: 'Announcements',
      // from data-category-id
      categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
    }
  }),
],

自定义

Quartz 还公开了其他一些 Giscus 配置选项，你可以通过相同的方式提供这些参数，就像提供 repo、repoId、category 和 categoryId 一样。

type Options = {
  provider: "giscus"
  options: {
    repo: `${string}/${string}`
    repoId: string
    category: string
    categoryId: string
 
    // Url to folder with custom themes
    // defaults to 'https://${cfg.baseUrl}/static/giscus'
    themeUrl?: string
 
    // filename for light theme .css file
    // defaults to 'light'
    lightTheme?: string
 
    // filename for dark theme .css file
    // defaults to 'dark'
    darkTheme?: string
 
    // how to map pages -> discussions
    // defaults to 'url'
    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
 
    // use strict title matching
    // defaults to true
    strict?: boolean
 
    // whether to enable reactions for the main post
    // defaults to true
    reactionsEnabled?: boolean
 
    // where to put the comment input box relative to the comments
    // defaults to 'bottom'
    inputPosition?: "top" | "bottom"
  }
}

自定义 CSS 主题

Quartz 支持为 Giscus 评论系统配置自定义主题。要使用自定义 CSS 主题，请将 .css 文件放置在 quartz/static 目录下，并进行相应配置。

例如，如果您有一个浅色主题 light-theme.css 和一个深色主题 dark-theme.css，且您的 Quartz 站点部署在 https://example.com/：

afterBody: [
  Component.Comments({
    provider: 'giscus',
    options: {
      // Other options
 
      themeUrl: "https://example.com/static/giscus", // corresponds to quartz/static/giscus/
      lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/giscus/
      darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/giscus/
    }
  }),
],

有条件地显示评论

Quartz 可以根据 frontmatter 中的 comments 字段有条件地显示评论框。默认情况下，所有页面都会显示评论，若需要为特定页面禁用此功能，请将 comments 设为 false。

---
title: Comments disabled here!
comments: false
---