github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(doc): update zh-CN comment doc

pull/729/head
ppoffice 2020-05-06 01:44:57 -04:00
parent 983b1e3fdd
commit 4b1b0e08d1
2 changed files with 231 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
source/_posts/en/Comment-Plugins.md
View File

@ -40,7 +40,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
**Installation Guide**
1. First, register and log into [Changyan](http://changyan.kuaizhan.com). Get the comment HTML code by following
1. First, log into [Changyan](http://changyan.kuaizhan.com). Get the comment HTML code by following
[this article](http://changyan.kuaizhan.com/static/help/index.html).
2. Copy the value of `appid` and `conf` to the corresponding settings in the theme configurations.
@ -109,7 +109,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
settings in the theme configurations.
For example, the "Shortname" in the following screenshot is `my-hexo-blog-1`:
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-shortname.png 360 '"Shortname - Disqus" "Shortname - Disqus"' %}
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-shortname.png 360 '"Configure Disqus - Disqus" "Configure Disqus - Disqus"' %}
<br>
which maps to the following theme configuration:
@ -120,7 +120,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
shortname: my-hexo-blog-1
{% endcodeblock %}
7. (Optional) You can add `disqusId` in the front-matter of the post as the unique Disqus ID.
9. (Optional) You can add `disqusId` in the front-matter of the post as the unique Disqus ID.
Thereby, you can change the location of the post in the future without losing all your comments:
{% codeblock source/_post/some-post.md lang:markdown %}
@ -170,12 +170,12 @@ for the detailed configuration process of DisqusJS.
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-key.png 360 '"Application Details - Disqus" "Application Details - Disqus"' %}
<br>
maps to the following configuration:
maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqusjs
shortname: test-usildmkxo
shortname: my-hexo-blog-1
api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
api: https://disqus.skk.moe/disqus/ # Optional
admin: ppoffice # Optional
@ -228,7 +228,7 @@ for the detailed configuration process of DisqusJS.
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-application-settings.png 360 '"OAuth Application Settings - GitHub" "OAuth Application Settings - GitHub"' %}
<br>
For example, the following Client ID and Client Secret
For example, the following "Client ID" and "Client Secret":
{% codeblock GitHub OAuth Application %}
Client ID
@ -344,8 +344,7 @@ However, unlike the other services, Isso requires a web host for running the Iss
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-configure-service.png 360 '"Configure Service - LiveRe" "Configure Service - LiveRe"' %}
<br>
4. Copy the value inside the quotes of `data-uid="..."` to the corresponding setting in the theme's configuration
file.
4. Copy the value inside the quotes of `data-uid="..."` to the corresponding setting in the theme configurations.
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-get-code.png 360 '"Get Code - LiveRe" "Get Code - LiveRe"' %}
<br>
@ -409,7 +408,7 @@ However, unlike the other services, Isso requires a web host for running the Iss
5. You will be redirected to the [utterances official site](https://utteranc.es/) if the installation completes.
You can review each configuration option and customize your utterances setup.
6. When finished, move to the "Enable Utterances" and copy the attribute values from the utterances HTML code
6. When finished, move to the "Enable utterances" and copy the attribute values from the utterances HTML code
to the corresponding settings in your theme configurations.
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-get-code.png 360 '"Get Code - utterances" "Get Code - utterances"' %}

326
source/_posts/zh-CN/Comment-Plugins.md
View File

@ -13,20 +13,21 @@ providers:
iconcdn: loli
---
<div class="notification is-success is-size-6">
本文同时提供以下语言的翻译：<a href="{% post_path en/Comment-Plugins %}">English</a>。
</div>
本文介绍Icarus 3支持的一些用户评论插件的安装配置。
<article class="message message-immersive is-primary">
<div class="message-body">
<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/Comment-Plugins %}">English</a>。
</div>
</article>
<!-- more -->
<div class="notification is-link is-size-6">
Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
提供，具体提供的插件种类与配置以其为准。
<article class="message message-immersive is-primary">
<div class="message-body">
<i class="fas fa-info-circle mr-2"></i>下面的用户评论插件由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持插件列表和配置详情以其为准。
</div>
</article>
<style>
.content ol:not([type]) {
@ -36,15 +37,22 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
## 畅言
<article class="message message-immersive is-danger">
<div class="message-body">
<i class="fas fa-exclamation-triangle mr-2"></i>畅言云评要求站长对使用其评论服务的网站进行备案，详情请参阅
<a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP备案</a>。
</div>
</article>
**安装指南**
1. 首先，注册并登录[畅言云评](http://changyan.kuaizhan.com)，
并按照[PC端通用代码接入](http://changyan.kuaizhan.com/static/help/index.html)的帮助文档获取代码。
1. 首先，登录[畅言云评](http://changyan.kuaizhan.com)，
并按照[PC端通用代码接入](http://changyan.kuaizhan.com/static/help/index.html)文档获取评论HTML代码。
2. 从获取的PC端代码中复制`appid`与`conf`值到Icarus主题配置文件的评论配置项中。
例如，获取到的如下的PC端代码：
2. 复制`appid`与`conf`的值到主题配置的对应配置项中。
例如，如下的HTML代码：
```html
{% codeblock "畅言安装代码" lang:html >folded %}
<!--PC版-->
<div id="SOHUCS" sid="..."></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
@ -54,8 +62,9 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
});
</script>
```
对应到主题配置文件中的配置项为：
{% endcodeblock %}
对应到主题配置为：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -63,50 +72,67 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
app_id: ????appid????
conf: prod_xxxxxxxxxxxxxxxxxxxxxxx
{% endcodeblock %}
3. 另外，畅言云评要求站长对使用其评论服务的网站进行备案，详情请参阅
[ICP备案](http://changyan.kuaizhan.com/static/help/o-beian.html)文档。
## Disqus
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Disqus %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Disqus %}">在线预览</a>
</div>
1. 首先，注册并登录[Disqus](https://disqus.com/)，点击首页的“开始”(GET STARTED)按钮或者访问
1. 首先，登录[Disqus](https://disqus.com/)。
点击首页的“开始”(GET STARTED)按钮或者访问
[此处](https://disqus.com/profile/signup/intent/)并点击“我想要将Disqus安装到我的站点”
(I want to install Disqus on my site)来创建新的站点评论服务。
2. 在创建新站点页面中填写网站名称(Website Name)以及网站类型(Category)，然后点击“创建站点”(Create Site)。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-started.png 360 '"开始页面 - Disqus" "开始页面 - Disqus"' %}
<br>
3. 下一步，选择Disqus的安装平台。此处选择最下方的“上面没有列出我使用的平台，使用通用代码安装”
2. 在创建新站点页面中填写“网站名称”(Website Name)以及“网站类型”(Category)，然后点击“创建站点”(Create Site)。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-create-site.png 360 '"创建站点 - Disqus" "创建站点 - Disqus"' %}
<br>
3. 如果你愿意的话，选择一个付费订阅。
你也可以点击左侧的“安装Disqus”(Install Disqus)来跳过此步。
4. 下一步，选择Disqus的安装平台。
此处选择页面底部的“上面没有列出我使用的平台，使用通用代码安装”
(I don't see my platform listed, install manually with Universal Code)。
4. 点击最下方的“配置”(Configure)按钮跳过通用代码安装指南(Universal Code install instructions)页面。
在“配置Disqus”(Configure Disqus)页面中按需填写Disqus个性化配置。点击“完成安装”(Complete Setup)
和“关闭配置”(Dismiss Setup)来结束配置。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-select-platform.png 360 '"选择平台 - Disqus" "选择平台 - Disqus"' %}
<br>
5. 最后，在评论站点首页的右上角点击“编辑配置”(Edit Settings)，进入到站点配置页面。
在页面上找到Shortname配置值并复制到主题配置文件相应的评论配置项中(`comment`下的`shortname`)。
例如，下图中的Shortname为`test-usildmkxo`
5. 点击页面底部的“配置”(Configure)按钮跳过“通用代码安装指南”(Universal Code install instructions)。
![General Settings - Disqus Admin](/hexo-theme-icarus/gallery/screenshots/disqus-general-settings.png)
6. 在“配置Disqus”(Configure Disqus)页面中按需填写Disqus个性化配置。
然后，点击“完成安装”(Complete Setup)和“关闭配置”(Dismiss Setup)按钮来结束配置。
复制到配置文件中为
7. 下一步，在评论服务首页的右上角点击“编辑配置”(Edit Settings)按钮。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-service-homepage.png 360 '"评论服务首页 - Disqus" "评论服务首页 - Disqus"' %}
<br>
8. 在“为你的站点配置Disqus”(Configure Disqus for Your Site)页面上找到“Shortname”的值，
复制到主题配置的评论配置项中。
例如，下面截图中的“Shortname”为`my-hexo-blog-1`：
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-shortname.png 360 '"配置Disqus - Disqus" "配置Disqus - Disqus"' %}
<br>
对应的主题配置为：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqus
shortname: test-usildmkxo
shortname: my-hexo-blog-1
{% endcodeblock %}
6. （可选）你可以在文章的头部加入`disqusId`来为文章添加Disqus唯一标识。这样如果文章之后被移动或者链接更改，其
评论也不会随之丢失。
9. （可选）你可以在文章的front-matter中加入`disqusId`来为文章添加Disqus唯一标识。
这样，你可以在未来更改文章的位置而不会丢失所有评论。
{% codeblock source/_post/some-post.md lang:markdown %}
title: My first post
title: 我的第一篇文章
date: 2015-01-01 00:00:01
disqusId: some-disqus-id
---
@ -116,30 +142,45 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
## DisqusJS
DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS的配置过程可参考
[https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/DisqusJS)。
在Disqus服务访问受限的地区可使用DisqusJS作为替代。
关于DisqusJS的配置过程可参考[https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/DisqusJS)。
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/DisqusJS %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/DisqusJS %}">在线预览</a>
</div>
1. 登录Disqus并打开[此链接](https://disqus.com/api/applications/)，点击“注册新应用”(Register new
application)或者“注册应用”(registering an application)。
1. 登录Disqus并访问[此链接](https://disqus.com/api/applications/)。
点击“注册新应用”(Register new application)或者“注册应用”(registering an application)来创建新的Disqus应用。
2. 在打开的页面中填写应用名称(Label)，介绍(Description)，以及网站地址(Website)，然后点击“注册我的应用”
(Register my application)。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-applications.png 360 '"应用 - Disqus" "应用 - Disqus"' %}
<br>
3. 应用创建完毕后进入设置界面(Settings)，在域名(Domains)输入框中填入你的网站域名，例如ppoffice.github.io。
点击页面下方的“保存设置”(Save Changes)按钮。
2. 在下一页面中填写”应用名称“(Label)，”介绍“(Description)，以及”网站地址“(Website)。
然后点击“注册我的应用”(Register my application)。
4. 点击页面中上放的“详情”(Details)链接切换到当前应用的主页，从下方OAuth设置(OAuth Settings)中复制API Key
到相应的主题配置项(`comment`下的`api_key`)中。下面是示例配置：
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-register-application.png 360 '"注册应用 - Disqus" "注册应用 - Disqus"' %}
<br>
3. 应用创建完毕后，进入应用的”设置“(Settings)界面，在”域名“(Domains)输入框中填入你Hexo站点的域名，例如ppoffice.github.io。
然后点击页面底部的“保存更改”(Save Changes)按钮。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-application-settings.png 360 '"应用设置 - Disqus" "应用设置 - Disqus"' %}
<br>
4. 点击当前页面中的“详情”(Details)链接切换到当前应用的主页。
从”OAuth设置“(OAuth Settings)部分中复制”API Key“到相应的主题配置项中。
例如，下面截图中的”API Key“：
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-key.png 360 '"应用详情 - Disqus" "应用详情 - Disqus"' %}
<br>
对应为下面的主题配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqusjs
shortname: test-usildmkxo
shortname: my-hexo-blog-1
api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
api: https://disqus.skk.moe/disqus/ # 可选填
admin: ppoffice # 可选填
@ -147,22 +188,23 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
nesting: 4 # 可选填
{% endcodeblock %}
3. 关于上述配置的含义和可选值，请参考[SukkaW/DisqusJS官方文档](https://github.com/SukkaW/DisqusJS)或
hexo-component-inferno中的[配置项描述](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json)。
5. 如要更多了解DisqusJS和它的配置，请访问[SukkaW/DisqusJS文档](https://github.com/SukkaW/DisqusJS)或
[hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json)。
## Facebook
<div class="notification is-warning is-size-6">
此评论插件可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
<article class="message message-immersive is-danger">
<div class="message-body">
<i class="fas fa-exclamation-triangle mr-2"></i>此评论插件可能会被部分广告拦截扩展拦截，请酌情使用。
</div>
</article>
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Facebook %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Facebook %}">在线预览</a>
</div>
1. Facebook的评论服务配置较为简单，仅需在主题配置中将`comment`的`type`设置为`facebook`即可。
1. 如要开启Facebook评论服务，将`comment`的`type`设置为`facebook`即可。
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -173,25 +215,32 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
## Gitalk
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Gitalk %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Gitalk %}">在线预览</a>
</div>
1. 登录GitHub并[点此注册](https://github.com/settings/applications/new)一个新的OAuth应用。在填写相应的应用名称
(Application name)，应用主页(Homepage URL)，应用描述(Application description)后，在认证回调地址(Authorization
callback URL)填写你的博客的根URL地址。
1. 登录GitHub并[点此注册](https://github.com/settings/applications/new)一个新的OAuth应用。
填写”应用名称“(Application name)，”应用主页“(Homepage URL)，”应用描述“(Application description)。
然后，在”认证回调地址“(Authorization callback URL)填写你的博客的根URL地址。
点击“注册应用”(Register application)按钮来跳转到应用详情界面。
2. 点击“注册应用”(Register application)后，在应用详情界面复制Client ID与Client Secret并填入主题配置的相应配置项中。
例如，对于下面的Client ID和Client Secret
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-register-application.png 360 '"注册OAuth应用 - GitHub" "注册OAuth应用 - GitHub"' %}
<br>
{% codeblock GitHub OAuth Application %}
2. 复制”Client ID“与”Client Secret“的值并填入主题配置的相应配置项中。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-application-settings.png 360 '"OAuth应用设置 - GitHub" "OAuth应用设置 - GitHub"' %}
<br>
例如，对于下面的”Client ID“和”Client Secret“：
{% codeblock GitHub OAuth应用 %}
Client ID
xxxxxxxxxxxxxxxxxxxx
Client Secret
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{% endcodeblock %}
Gitalk在Icarus的配置为
对应如下的Gitalk的配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -211,19 +260,24 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
enable_hotkey: true # 可选填
{% endcodeblock %}
3. 关于上述配置的含义和可选值，请参考[Gitalk官方文档](https://github.com/gitalk/gitalk)或hexo-component-inferno
中的[配置项描述](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitalk.json)。
3. 关于上述配置的含义和可选值，请参考[Gitalk文档](https://github.com/gitalk/gitalk)或
[hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitalk.json)。
## Gitment
<div class="notification is-warning is-size-6">
Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于GitHub Issues的评论系统的替代。
<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的评论系统的替代。
</div>
</article>
**安装指南**
1. 参照上面Gitalk中关于注册GitHub OAuth应用的步骤注册应用，并将Client ID与Client Secret并填入主题配置的相应配置项中。
1. 参照Gitalk中的步骤注册GitHub OAuth应用。
2. 复制”Client ID“与”Client Secret“的值到主题配置的相应配置项中。
下面是Gitment的示例配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
@ -238,21 +292,21 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
max_comment_height: 250 # 可选填
{% endcodeblock %}
3. 关于上述配置的含义和可选值，请参考[Gitment官方文档](https://github.com/imsun/gitment)或hexo-component-inferno
中的[配置项描述](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitment.json)。
3. 关于上述配置的含义，请参考[Gitment文档](https://github.com/imsun/gitment)或
[hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitment.json)。
## Isso
如果你不希望以来第三方评论服务而自建评论系统的话，可考虑选用Isso。
当然，不同于第三方评论系统，你需要准备一个服务器用来运行Isso服务端程序。
如果你希望自己搭建一个评论系统而不是依赖第三方的评论服务时，Isso是一个可行的选择。
然而，不同于第三方评论系统，你需要准备一个Web服务器用来运行Isso服务端程序。
**安装指南**
1. 请参照[Isso官方文档](https://posativ.org/isso/docs/install/)安装并启动Isso服务。
1. 请参照[Isso文档](https://posativ.org/isso/docs/install/)安装并启动Isso服务器。
2. 编辑主题配置文件并填入Isso服务的HTTP URL。例如，你的Isso服务地址为https://posativ.org/isso/api/，
则需在主题评论配置填写为：
2. 将Isso服务器的HTTP URL填入到主题配置的相应配置项中。
例如，如果你的Isso服务地址为`https://posativ.org/isso/api/`，你会有如下的评论配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -263,26 +317,60 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
## LiveRe
<div class="notification is-warning is-size-6">
此评论插件可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
<article class="message message-immersive is-danger">
<div class="message-body">
<i class="fas fa-exclamation-triangle mr-2"></i>此评论插件可能会被部分广告拦截扩展拦截，请酌情使用。
</div>
</article>
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
</div>
1. 首先，注册并登录[LiveRe](https://livere.com/)。登录后，点击导航栏上的“安装”(Install)链接，进入安装界面。
1. 首先，登录[LiveRe](https://livere.com/)。
点击导航栏上的“安装”(Install)链接，进入安装界面。
2. 在安装界面选择免费(City)选项下方的“现在安装”(Install Now)按钮。在获取LiveRe City代码(Get LiveRe City code)界面
填入站点地址(Site URL)，网站名称(Name of website)，和网站类别(Choose site category)，勾选“同意广告协议后”并点击
获取代码后，跳转到LiveRe代码页面。
2. 选择免费”City“选项下方的“现在安装”(Install Now)按钮。
3. 复制代码中`data-uid="..."`引号内的编号，填写到主题配置中的相应选项中。例如，下方的LiveRe代码
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-select-plan.png 360 '"选择付费方案 - LiveRe" "选择付费方案 - LiveRe"' %}
<br>
![LiveRe - Install](/hexo-theme-icarus/gallery/screenshots/livere-code.png)
3. 在”获取LiveRe City代码“(Get LiveRe City code)页面填写”站点地址“(Site URL)，”网站名称“(Name of website)，
和”网站类别“(Choose site category)。
勾选“同意广告协议”(I have check the advertising terms...)并点击”获取代码“(Get code)按钮来跳转到LiveRe HTML代码页面。
对应的主题配置为
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-configure-service.png 360 '"配置服务 - LiveRe" "配置服务 - LiveRe"' %}
<br>
4. 复制`data-uid="..."`引号内的值到主题配置中的相应配置项中。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-get-code.png 360 '"获取代码 - LiveRe" "获取代码 - LiveRe"' %}
<br>
例如，下方的LiveRe代码：
{% codeblock "LiveRe安装代码" lang:html >folded %}
<!-- LiveRe City install code -->
<div id="lv-container" data-id="city" data-uid="ABCD1234O0OxxxxXXXX000==">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript> Please activate JavaScript for write a comment in LiveRe</noscript>
</div>
<!-- completed City install code -->
{% endcodeblock %}
对应的主题配置为：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -291,21 +379,51 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
{% endcodeblock %}
## Utterances
## utterances
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Utterances %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Utterances %}">在线预览</a>
</div>
1. 准备一个公开的GitHub仓库(Repository)。
2. 访问[GitHub Apps - utterances](https://github.com/apps/utterances)页面来将utterances安装至准备好的仓库。
点击“配置”(Configure)按钮，在下一页面中选择需要安装utterances的用户。在安装页面，你可以选择将其安装到所有仓库(All repositories)
或是选定的一些仓库(Only select repositories)。点击“安装”(Install)。
2. 访问[GitHub Apps - utterances](https://github.com/apps/utterances)并点击”安装“(Install)。
3. 若安装成功，网页跳转到[utterances官网](https://utteranc.es/)。之后可以阅读页面上的配置项的说明，并按照说明将对应配置值填入到
主题配置中。下方为示例配置：
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-github-app.png 360 '"GitHub应用页 - utterances" "GitHub应用页 - utterances"' %}
<br>
3. (可选)如果你的账号下有组织账号，在下一页中选择需要安装utterances的用户。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-select-user.png 360 '"选择用户 - utterances" "选择用户 - utterances"' %}
<br>
4. 在下一页面选择将utterances安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。
然后点击“安装”(Install)按钮。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-select-repo.png 360 '"选择仓库 - utterances" "选择仓库 - utterances"' %}
<br>
5. 若安装成功，网页将跳转到[utterances官网](https://utteranc.es/)。
你可以阅读每个的配置项的说明，并按照配置你的utterances安装。
6. 完成配置后，转到页面上的”开启utterances“(Enable Utterances)并从utterances的HTML代码中复制属性值到主题配置的对应配置项中。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-get-code.png 360 '"获取代码 - utterances" "获取代码 - utterances"' %}
<br>
例如下面的utterances代码：
{% codeblock "utterances安装代码" lang:html >folded %}
<script src="https://utteranc.es/client.js"
repo="Your-GitHub-Username/Your-Public-Repo-Name"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
{% endcodeblock %}
对应下面的主题配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -321,14 +439,14 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
## Valine
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Valine %}">在线预览</a>
<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Valine %}">在线预览</a>
</div>
1. 按照Valine官方的[快速开始文档](https://valine.js.org/quickstart.html)创建LeanCloud应用。
1. 按照[快速开始文档](https://valine.js.org/quickstart.html)创建LeanCloud应用。
2. 将App ID和App Key复制并填入主题配置的对应配置项中，并按照官方网站上的[配置项](https://valine.js.org/configuration.html)
说明按需填写其他配置项。下面是示例配置：
2. 将你LeanCloud应用的”App ID“和”App Key“复制到主题配置的对应配置项中。
此外，你可以参考[配置项](https://valine.js.org/configuration.html)来了解可选配置项的详情和可能的配置值。
下面是示例配置：
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@ -348,6 +466,8 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
{% endcodeblock %}
<div class="notification is-warning is-size-6">
文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Comment-Plugins.md">此处</a>提交修改。
<article class="message message-immersive is-warning">
<div class="message-body">
<i class="fas fa-question-circle mr-2"></i>文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Comment-Plugins.md">此处</a>提交修改。
</div>
</article>