From cdd0be2aa8c6e0a6d97779f3db3072952b54bf13 Mon Sep 17 00:00:00 2001
From: Jiangnan Li <lijn101@nenu.edu.cn>
Date: Sun, 08 Jun 2025 09:23:01 +0000
Subject: [PATCH] feat(giscus): expose language option for Comments component (#2012)
---
docs/features/comments.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 50 insertions(+), 0 deletions(-)
diff --git a/docs/features/comments.md b/docs/features/comments.md
index 92ea754..6e5a25c 100644
--- a/docs/features/comments.md
+++ b/docs/features/comments.md
@@ -45,6 +45,8 @@
category: 'Announcements',
// from data-category-id
categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
+ // from data-lang
+ lang: 'en'
}
}),
],
@@ -63,6 +65,18 @@
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"
@@ -78,6 +92,42 @@
// where to put the comment input box relative to the comments
// defaults to 'bottom'
inputPosition?: "top" | "bottom"
+
+ // set your preference language here
+ // defaults to 'en'
+ lang?: string
}
}
```
+
+#### Custom CSS theme
+
+Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
+
+For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
+
+```ts
+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/
+ }
+ }),
+],
+```
+
+#### Conditionally display comments
+
+Quartz can conditionally display the comment box based on a field `comments` in the frontmatter. By default, all pages will display comments, to disable it for a specific page, set `comments` to `false`.
+
+```
+---
+title: Comments disabled here!
+comments: false
+---
+```
--
Gitblit v1.10.0