upd: Giscus Comment Plugin

PJ-568 · Jun 5, 2024 · 68eaba2 · 68eaba2
1 parent 531c051
commit 68eaba2
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 2 deletions.
diff --git a/source/_posts/demo/comment/Giscus.md b/source/_posts/demo/comment/Giscus.md
@@ -0,0 +1,19 @@
+title: Giscus Comment Plugin
+date: 2024-06-05
+tags:
+- Demo
+comment:
+    type: giscus
+    repo: ppoffice/hexo-theme-icarus
+    repoId: ?????
+    categoryId: ?????
+    strict: true
+---
+
+<article class="message message-immersive is-warning">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>This page is for demonstration only.
+Please report your issues with this plugin to 
+<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
+</div>
+</article>
diff --git 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).
+
+<div>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Giscus %}">Preview</a>
+</div>
+
+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"' %}
+   <br>
+
+3. (Optional) Select the user to install giscus to on the next page if you also have organizations under your account.
+
+   <!-- {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-select-user.png 360 '"Select User - giscus" "Select User - giscus"' %} -->
+   <br>
+
+4. On the next page, you can choose to install giscus to "All repositories" or "Only select repositories".
+   Then, click the "Install" button.
+
+   <!-- {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-select-repo.png 360 '"Select Repository - giscus" "Select Repository - giscus"' %} -->
+   <br>
+
+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"' %}
+   <br>
+
+   For example, the giscus code below:
+
+   {% codeblock "giscus Installation Code" lang:html >folded %}
+   <script src="https://giscus.app/client.js"
+         data-repo="usr/repo"
+         data-repo-id="X_xxxxxxxxxx"
+         data-category="Announcements"
+         data-category-id="XXX_xxxxxxxxxxxxxxxx"
+         data-mapping="pathname"
+         data-strict="0"
+         data-reactions-enabled="0"
+         data-emit-metadata="0"
+         data-input-position="top"
+         data-theme="noborder_light"
+         data-lang="en"
+         data-loading="lazy"
+         crossorigin="anonymous"
+         async>
+   </script>
+   {% 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
 
 <div>
@@ -260,7 +343,7 @@ for the detailed configuration process of DisqusJS.
 <article class="message message-immersive is-danger">
 <div class="message-body">
 <i class="fas fa-exclamation-triangle mr-2"></i>The maintenance of Gitment seems to be discontinued.
-You can choose Gitalk or utterances as an alternative GitHub Issue-based comment system.
+You can choose Giscus, Gitalk or utterances as an alternative GitHub Issue-based comment system.
 </div>
 </article>
 

diff --git a/source/_posts/zh-CN/Comment-Plugins.md b/source/_posts/zh-CN/Comment-Plugins.md
@@ -205,6 +205,81 @@ providers:
     {% endcodeblock %}
 
 
+## Giscus
+
+利用 [GitHub Discussions](https://docs.github.com/en/discussions) 实现的评论系统。
+
+<div>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Giscus %}">在线预览</a>
+</div>
+
+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"' %}
+   <br>
+
+3. (可选)如果你的账号下有组织账号，在下一页中选择需要安装 giscus 的用户。
+
+   <!-- {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-select-user.png 360 '"选择用户 - giscus" "选择用户 - giscus"' %} -->
+   <br>
+
+4. 在下一页面选择将 giscus 安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。
+   然后点击“安装”(Install)按钮。
+
+   <!-- {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/giscus-select-repo.png 360 '"选择仓库 - giscus" "选择仓库 - giscus"' %} -->
+   <br>
+
+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"' %}
+   <br>
+
+   例如下面的 giscus 代码：
+
+   {% codeblock "giscus 安装代码" lang:html >folded %}
+   <script src="https://giscus.app/client.js"
+         data-repo="usr/repo"
+         data-repo-id="X_xxxxxxxxxx"
+         data-category="Announcements"
+         data-category-id="XXX_xxxxxxxxxxxxxxxx"
+         data-mapping="pathname"
+         data-strict="0"
+         data-reactions-enabled="0"
+         data-emit-metadata="0"
+         data-input-position="top"
+         data-theme="noborder_light"
+         data-lang="zh-CN"
+         data-loading="lazy"
+         crossorigin="anonymous"
+         async>
+   </script>
+   {% 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
 
 <div>
@@ -262,7 +337,7 @@ providers:
 
 <article class="message message-immersive is-danger">
 <div class="message-body">
-<i class="fas fa-exclamation-triangle mr-2"></i>Gitment似乎已停止维护。你可以选择Gitalk或utterances作为基于GitHub Issues的评论系统的替代。
+<i class="fas fa-exclamation-triangle mr-2"></i>Gitment似乎已停止维护。你可以选择Giscus、Gitalk或utterances作为基于GitHub Issues的评论系统的替代。
 </div>
 </article>
 

diff --git a/source/gallery/screenshots/giscus-get-code.png b/source/gallery/screenshots/giscus-get-code.png
diff --git a/source/gallery/screenshots/giscus-github-app.png b/source/gallery/screenshots/giscus-github-app.png