Commit d324d46

HPCesia <me@hpcesia.com>
2025-02-07 08:48:02
feat: support giscus comment
1 parent b86393c
Changed files (5)
src/components/comment/Giscus.astro
@@ -0,0 +1,31 @@
+---
+import { commentConfig, siteConfig } from '@/config';
+import { CDN } from '@constants/cdn';
+
+const giscusConfig = commentConfig.giscus!;
+
+const giscusConfigData = {
+  'data-repo': giscusConfig.repo,
+  'data-repo-id': giscusConfig.repoId,
+  'data-category': giscusConfig.category,
+  'data-category-id': giscusConfig.categoryId,
+  ...(typeof giscusConfig.mapping === 'string'
+    ? {
+        'data-mapping': giscusConfig.mapping,
+      }
+    : {
+        'data-mapping': giscusConfig.mapping.type,
+        'data-term': giscusConfig.mapping.term,
+      }),
+  'data-strict': '1',
+  'data-theme': giscusConfig.theme || 'preferred_color_scheme',
+  'data-input-position': giscusConfig.inputPosition || 'bottom',
+  'data-reactions-enabled': giscusConfig.reactionsEnabled ? '1' : '0',
+  'data-emit-metadata': giscusConfig.emitMetadata ? '1' : '0',
+  'data-lang': siteConfig.lang.replace('_', '-'),
+  ...(giscusConfig.lazyLoad ? { 'data-loading': 'lazy' } : {}),
+  crossorigin: 'anonymous',
+};
+---
+
+<script is:inline src={CDN.giscus} {...giscusConfigData} data-astro-rerun></script>
src/components/Comment.astro
@@ -1,6 +1,7 @@
 ---
 import { commentConfig } from '@/config';
-import Twikoo from './comment/Twikoo.astro';
+import Giscus from '@components/comment/Giscus.astro';
+import Twikoo from '@components/comment/Twikoo.astro';
 ---
 
 <div id="page-comment">
@@ -9,6 +10,8 @@ import Twikoo from './comment/Twikoo.astro';
       switch (commentConfig.provider) {
         case 'twikoo':
           return <Twikoo />;
+        case 'giscus':
+          return <Giscus />;
       }
     })()
   }
src/constants/cdn.ts
@@ -1,3 +1,4 @@
 export const CDN = {
-  twikoo: 'https://lib.baomitu.com/twikoo/1.6.41/twikoo.all.min.js',
+  twikoo: 'https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.nocss.js',
+  giscus: 'https://giscus.app/client.js',
 };
src/types/config.ts
@@ -300,13 +300,11 @@ export type CommentConfig = {
    */
   enable: boolean;
   /**
-   * `'twikoo'`.
+   * The provider of the comments.
    *
-   * Twikoo is the only comment provider supported yet.
-   *
-   * Twikoo 是目前唯一支持的评论系统。
+   * 评论的提供者。
    */
-  provider: 'twikoo';
+  provider: 'twikoo' | 'giscus';
   /**
    * The configuration of Twikoo.
    *
@@ -328,4 +326,110 @@ export type CommentConfig = {
      */
     region?: string;
   };
+  /**
+   * The configuration of Giscus.
+   *
+   * Giscus 的配置。
+   *
+   * @see https://giscus.app/
+   */
+  giscus?: {
+    /**
+     * The repo used by Giscus.
+     *
+     * Giscus 使用的 repo。
+     */
+    repo: `${string}/${string}`;
+    /**
+     * The repo ID generated by Giscus.
+     *
+     * Giscus 生成的 repo ID。
+     *
+     * @see https://giscus.app/
+     */
+    repoId: string;
+    /**
+     * The category used by Giscus.
+     *
+     * Giscus 使用的 discussion 分类。
+     *
+     * @suggest Announcement
+     */
+    category: string;
+    /**
+     * The category ID generated by Giscus.
+     *
+     * Giscus 生成的分类 ID。
+     *
+     * @see https://giscus.app/
+     */
+    categoryId: string;
+    /**
+     * The mapping of the discussion.
+     *
+     * 讨论的映射。
+     *
+     * @suggest 'og:title'
+     * @see https://giscus.app/
+     */
+    mapping:
+      | 'pathname'
+      | 'url'
+      | 'title'
+      | 'og:title'
+      | {
+          type: 'specific' | 'number';
+          term: string | number;
+        };
+    /**
+     * The theme of Giscus.
+     *
+     * Giscus 的主题。
+     *
+     * @default 'preferred_color_scheme'
+     * @see https://giscus.app/
+     */
+    theme?: string;
+    /**
+     * The position of the comment box.
+     *
+     * 评论框的位置
+     *
+     * @default 'bottom'
+     */
+    inputPosition?: 'top' | 'bottom';
+    /**
+     * Whether to enable reactions.
+     *
+     * 是否启用表情。
+     *
+     * @default false
+     */
+    reactionsEnabled?: boolean;
+    /**
+     * Whether to enable metadata emit.
+     *
+     * 是否启用元数据输出。
+     *
+     * @default false
+     * @see https://giscus.app/
+     */
+    emitMetadata?: boolean;
+    /**
+     * The language setting of Giscus.
+     *
+     * Giscus 的语言设置。
+     *
+     * @default siteConfig.lang
+     */
+    lang?: string;
+    /**
+     * Whether to lazy load the comment area.
+     *
+     * 是否懒加载评论区
+     *
+     * @default true
+     */
+    lazyLoad?: boolean;
+  };
 };
src/config.ts
@@ -120,9 +120,16 @@ export const searchConfig: SearchConfig = {
 };
 
 export const commentConfig: CommentConfig = {
-  enable: true,
+  enable: false,
   provider: 'twikoo',
   twikoo: {
-    envId: 'https://comment.hpcesia.com/.netlify/functions/twikoo',
+    envId: 'your-env-id',
+  },
+  giscus: {
+    repo: 'your/repo',
+    repoId: 'your-repo-id',
+    category: 'your-category',
+    categoryId: 'your-category-id',
+    mapping: 'og:title',
   },
 };