Comments

quartz_comments:

• external providers

Note

plugins:

• configuration: Configuration

bundled_providers:

• Giscus

Providers

Giscus

Prerequisites

requirements:

• GitHub repository: public
• giscus app: installed
• Discussions: enabled

Setup

steps:

• get repoId and categoryId: Giscus site
• Discussion category: Announcements

Note

install:

• npx quartz plugin add github:quartz-community/comments

configuration:

• YAML: quartz.config.yaml
• TS override: quartz.ts

quartz.config.yaml

plugins:
  - source: github:quartz-community/comments
    enabled: true
    options:
      provider: giscus
      options:
        repo: jackyzha0/quartz
        repoId: MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg
        category: Announcements
        categoryId: DIC_kwDOFxRnmM4B-Xg6
        lang: en
    layout:
      position: afterBody
      priority: 10

quartz.ts (override)

import { loadQuartzConfig, loadQuartzLayout } from "./quartz/plugins/loader/config-loader"
 
const config = await loadQuartzConfig()
export default config
export const layout = await loadQuartzLayout({
  defaults: {
    afterBody: [
      ExternalPlugin.Comments({
        provider: "giscus",
        options: {
          repo: "jackyzha0/quartz",
          repoId: "MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg",
          category: "Announcements",
          categoryId: "DIC_kwDOFxRnmM4B-Xg6",
          lang: "en",
        },
      }),
    ],
  },
})

Customization

options_schema:

type Options = {
  provider: "giscus"
  options: {
    repo: `${string}/${string}`
    repoId: string
    category: string
    categoryId: string
    themeUrl?: string // URL to custom themes folder. Default: 'https://${cfg.baseUrl}/static/giscus'
    lightTheme?: string // Light theme .css filename. Default: 'light'
    darkTheme?: string // Dark theme .css filename. Default: 'dark'
    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname" // Default: 'url'
    strict?: boolean // Default: true
    reactionsEnabled?: boolean // Default: true
    inputPosition?: "top" | "bottom" // Default: 'bottom'
    lang?: string // Default: 'en'
  }
}

Custom CSS theme

theme_files:

• path: quartz/static/giscus/
• configure:
  • themeUrl
  • lightTheme
  • darkTheme

quartz.config.yaml

plugins:
  - source: github:quartz-community/comments
    enabled: true
    options:
      provider: giscus
      options:
        # Other options...
        themeUrl: "https://example.com/static/giscus"
        lightTheme: light-theme # resolves to light-theme.css
        darkTheme: dark-theme # resolves to dark-theme.css

quartz.ts (override)

import { loadQuartzConfig, loadQuartzLayout } from "./quartz/plugins/loader/config-loader"
 
const config = await loadQuartzConfig()
export default config
export const layout = await loadQuartzLayout({
  defaults: {
    afterBody: [
      ExternalPlugin.Comments({
        provider: "giscus",
        options: {
          // Other options...
          themeUrl: "https://example.com/static/giscus",
          lightTheme: "light-theme",
          darkTheme: "dark-theme",
        },
      }),
    ],
  },
})

Conditionally display comments

display:

• default: global on
• per-page off: frontmatter comments: false

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