diff --git a/source/_posts/demo/comment/Giscus.md b/source/_posts/demo/comment/Giscus.md new file mode 100644 index 0000000..4530ea9 --- /dev/null +++ b/source/_posts/demo/comment/Giscus.md @@ -0,0 +1,20 @@ +title: Giscus Comment Plugin +date: 2024-06-05 +tags: +- Demo +comment: + type: giscus + repo: ppoffice/hexo-theme-icarus + repoId: R_kgDOMFXZew + category: Q&A + categoryId: DIC_kwDOMFXZe84Cf4ta + strict: true +--- + +
+
+This page is for demonstration only. +Please report your issues with this plugin to +ppoffice/hexo-component-inferno. +
+
diff --git a/source/_posts/en/Comment-Plugins.md b/source/_posts/en/Comment-Plugins.md index fab0fc3..84f01cf 100644 --- a/source/_posts/en/Comment-Plugins.md +++ b/source/_posts/en/Comment-Plugins.md @@ -200,6 +200,89 @@ for the detailed configuration process of DisqusJS. {% endcodeblock %} +## Giscus + +A comments system powered by [GitHub Discussions](https://docs.github.com/en/discussions). + +
+Installation GuidePreview +
+ +1. Prepare a public GitHub repository. + +2. Go to [GitHub Apps - giscus](https://github.com/apps/giscus) and click "Install". + + {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-github-app.png 360 '"GitHub App Page - giscus" "GitHub App Page - giscus"' %} +
+ +3. (Optional) Select the user to install giscus to on the next page if you also have organizations under your account. + + +
+ +4. On the next page, you can choose to install giscus to "All repositories" or "Only select repositories". + Then, click the "Install" button. + + +
+ +5. You will be redirected to the [giscus official site](https://giscus.app) if the installation completes. + You can review each configuration option and customize your giscus setup. + +6. When finished, move to the "Enable giscus" and copy the attribute values from the giscus HTML code + to the corresponding settings in your theme configurations. + + {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-get-code.png 360 '"Get Code - giscus" "Get Code - giscus"' %} +
+ + For example, the giscus code below: + + {% codeblock "giscus Installation Code" lang:html >folded %} + + {% endcodeblock %} + + maps to the following theme configuration: + + {% codeblock _config.icarus.yml lang:yaml %} + comment: + type: giscus + repo: Your-GitHub-Username/Your-Public-Repo-Name + issue_term: pathname # Required if issue_number is not set + issue_number: 100 # Required if issue_term is not set. Every post can be mapped to a separate, manually-created GitHub issue. + label: some-issue-label # Optional + theme: github-light # Optional + comment: + type: giscus + repo: usr/repo # Required + repoId: X_xxxxxxxxxx # Required + category: Announcements # Optional, default: Announcements + categoryId: XXX_xxxxxxxxxxxxxxxx # Required + mapping: pathname # Optional, default: pathname + strict: false # Optional + reactionsEnabled: false # Optional + emitMetadata: false # Optional + inputPosition: top # Optional, default: top + theme: noborder_light # Optional + lang: en # Optional, default: en + lazy: true # Optional, default: false + {% endcodeblock %} + + ## Gitalk
diff --git a/source/_posts/zh-CN/Comment-Plugins.md b/source/_posts/zh-CN/Comment-Plugins.md index 2a5bf50..20a9b72 100644 --- a/source/_posts/zh-CN/Comment-Plugins.md +++ b/source/_posts/zh-CN/Comment-Plugins.md @@ -205,6 +205,82 @@ providers: {% endcodeblock %} +## Giscus + +利用 [GitHub Discussions](https://docs.github.com/en/discussions) 实现的评论系统。 + +
+安装指南在线预览 +
+ +1. 准备一个公开的 GitHub 仓库（Repository）。 + +2. 访问[GitHub Apps - giscus](https://github.com/apps/giscus)并点击”安装“(Install)。 + + {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-github-app.png 360 '"GitHub应用页 - giscus" "GitHub应用页 - giscus"' %} +
+ +3. (可选)如果你的账号下有组织账号，在下一页中选择需要安装 giscus 的用户。 + + +
+ +4. 在下一页面选择将 giscus 安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。 + 然后点击“安装”(Install)按钮。 + + +
+ +5. 若安装成功，网页将跳转到 [giscus 官网](https://giscus.app)。 + 你可以阅读每个的配置项的说明，并按照配置你的 giscus 安装。 + +6. 完成配置后，转到页面上的”启用 giscus “(Enable giscus)并从 giscus 的 HTML 代码中复制属性值到主题配置的对应配置项中。 + + {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-get-code.png 360 '"获取代码 - giscus" "获取代码 - giscus"' %} +
+ + 例如下面的 giscus 代码： + + {% codeblock "giscus 安装代码" lang:html >folded %} + + {% endcodeblock %} + + 对应下面的主题配置： + + {% codeblock _config.icarus.yml lang:yaml %} + comment: + type: giscus + repo: usr/repo # 必填项 + repoId: X_xxxxxxxxxx # 必填项 + category: Announcements # 可选填，默认为 Announcements + categoryId: XXX_xxxxxxxxxxxxxxxx # 必填项 + mapping: pathname # 可选填，默认为 pathname + strict: false # 可选填 + reactionsEnabled: false # 可选填 + emitMetadata: false # 可选填 + inputPosition: top # 可选填，默认为 top + theme: noborder_light # 可选填 + lang: zh-CN # 可选填，默认为 en + lazy: true # 可选填，默认为 false + {% endcodeblock %} + + + ## Gitalk
diff --git a/source/gallery/screenshots/giscus-get-code.png b/source/gallery/screenshots/giscus-get-code.png new file mode 100644 index 0000000..c8390f0 Binary files /dev/null and b/source/gallery/screenshots/giscus-get-code.png differ diff --git a/source/gallery/screenshots/giscus-github-app.png b/source/gallery/screenshots/giscus-github-app.png new file mode 100644 index 0000000..6b6a44e Binary files /dev/null and b/source/gallery/screenshots/giscus-github-app.png differ