Commit d324d46
Changed files (5)
src
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',
},
};