Ruipeng Zhang
GitHub
commit
6e2368ab5a
|
|
@ -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
|
||||
---
|
||||
|
||||
<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>
|
||||
|
|
@ -63,7 +63,7 @@ Please refer to it for a complete list of supported plugins and their configurat
|
|||
## Disqus
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Disqus %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Disqus %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. First, log into [Disqus](https://disqus.com/). Click the "GET STARTED" button on the
|
||||
|
|
@ -131,7 +131,7 @@ You can refer to [https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/
|
|||
for the detailed configuration process of DisqusJS.
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/DisqusJS %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/DisqusJS %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Log into Disqus and visit [here](https://disqus.com/api/applications/).
|
||||
|
|
@ -189,7 +189,7 @@ for the detailed configuration process of DisqusJS.
|
|||
</article>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Facebook %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Facebook %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. To enable Facebook comment, set the `type` of `comment` to `facebook`:
|
||||
|
|
@ -200,10 +200,93 @@ 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>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Gitalk %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Gitalk %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Log into GitHub and [click here](https://github.com/settings/applications/new) to register a new OAuth
|
||||
|
|
@ -379,7 +462,7 @@ Unlike other third-party comment services, the Twikoo backend needs to be deploy
|
|||
environment before being configured and used by Icarus.
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Twikoo %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Twikoo %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Follow the [Twikoo documentation](https://twikoo.js.org/en/) to deploy the Twikoo cloud function
|
||||
|
|
@ -399,7 +482,7 @@ environment before being configured and used by Icarus.
|
|||
## utterances
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Utterances %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Utterances %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Prepare a public GitHub repository.
|
||||
|
|
@ -457,7 +540,7 @@ environment before being configured and used by Icarus.
|
|||
## Valine
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Valine %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Valine %}">Preview</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
|
@ -503,7 +586,7 @@ services until this issue has been fixed.
|
|||
## Waline
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Waline %}">Preview</a>
|
||||
<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Waline %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Create a LeanCloud application and a Vercel project following the [Get Started](https://waline.js.org/en/guide/get-started.html) guide.
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ providers:
|
|||
## Disqus
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Disqus %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Disqus %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 首先，登录[Disqus](https://disqus.com/)。
|
||||
|
|
@ -139,7 +139,7 @@ providers:
|
|||
关于DisqusJS的配置过程可参考[https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/DisqusJS)。
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/DisqusJS %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/DisqusJS %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 登录Disqus并访问[此链接](https://disqus.com/api/applications/)。
|
||||
|
|
@ -194,7 +194,7 @@ providers:
|
|||
</article>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Facebook %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Facebook %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 如要开启Facebook评论服务，将`comment`的`type`设置为`facebook`即可。
|
||||
|
|
@ -205,10 +205,86 @@ 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>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Gitalk %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Gitalk %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 登录GitHub并[点此注册](https://github.com/settings/applications/new)一个新的OAuth应用。
|
||||
|
|
@ -377,7 +453,7 @@ Twikoo是一个基于云函数的自建评论系统。
|
|||
不同于其他第三方评论服务，在Icarus中设置和使用Twikoo之前，你需要将它的后端部署到云环境上。
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Twikoo %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Twikoo %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 按照[Twikoo文档](https://twikoo.js.org/)，将Twikoo云函数部署到你指定的云服务商之上。
|
||||
|
|
@ -396,7 +472,7 @@ Twikoo是一个基于云函数的自建评论系统。
|
|||
## utterances
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Utterances %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Utterances %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 准备一个公开的GitHub仓库(Repository)。
|
||||
|
|
@ -453,7 +529,7 @@ Twikoo是一个基于云函数的自建评论系统。
|
|||
## Valine
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Valine %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Valine %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
|
@ -497,7 +573,7 @@ IP地址 (<a href="https://github.com/xCss/Valine/issues/336" target="_blank" re
|
|||
## Waline
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Waline %}">在线预览</a>
|
||||
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path hexo-theme-icarus/demo/comment/Waline %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 按照[快速上手](https://waline.js.org/guide/get-started.html)创建LeanCloud应用和Vercel项目。
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Loading…
Reference in New Issue