chore(doc): Giscus Comment Plugin
PJ568
parent
7b098d4888
commit
31a120b63e
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -205,6 +205,82 @@ 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>
|
||||
|
|
|
|||
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