feat(doc): add zh-CN comment plugin guide & demos

pull/701/head
ppoffice 2020-04-07 02:13:33 -04:00
parent 42f07d8a72
commit ac5cad0d56
19 changed files with 460 additions and 170 deletions

View File

@ -1,19 +0,0 @@
title: Changyan Comment Plugin
date: 2015-01-01 00:00:59
categories:
- Plugins
- Comment
comment:
type: changyan
app_id: cyrDUlCiF
conf: prod_43aadda874910d8f86160e62e6a1ade7
---
[Installation instructions](http://changyan.kuaizhan.com/install/code/pc)
{% codeblock lang:yaml _config.yml %}
comment:
type: changyan
appid: xxxxxxxx # (required)
conf: prod_xxxxxxxx # (required)
{% endcodeblock %}

View File

@ -1,26 +0,0 @@
title: Disqus Comment Plugin
date: 2015-01-01 00:00:01
categories:
- Plugins
- Comment
tags:
- Getting Started
comment:
type: disqus
shortname: hexo-theme-icarus
---
[Installation instructions](https://disqus.com/admin/install/platforms/universalcode/)
{% codeblock lang:yaml _config.yml %}
comment:
type: disqus
shortname: xxxxxxxx # (required)
{% endcodeblock%}
{% codeblock lang:yaml post.md %}
# (optional) a unique id to identify the post in Disqus system
disqusId: xxxxxxxx
---
Post content...
{% endcodeblock%}

View File

@ -1,15 +0,0 @@
title: Facebook Comment Plugin
date: 2015-01-01 00:00:58
categories:
- Plugins
- Comment
comment:
type: facebook
---
[Installation instructions](https://developers.facebook.com/docs/plugins/comments/)
{% codeblock lang:yaml _config.yml %}
comment:
type: facebook
{% endcodeblock%}

View File

@ -1,30 +0,0 @@
title: Gitalk Comment Plugin
date: 2015-01-01 00:00:02
categories:
- Plugins
- Comment
comment:
type: gitalk
owner: ppoffice
repo: Public-Gitment-Repo
client_id: 4828a94319a33c305063
client_secret: 5ea20158d656eaf0141dbb4eb38dd91737e3ca7d
admin:
- ppoffice
---
[Installation instructions](https://github.com/gitalk/gitalk)
{% codeblock lang:yaml _config.yml %}
comment:
type: gitalk
owner: xxxxxxxx # (required) GitHub user name
repo: xxxxxxxx # (required) GitHub repository name
client_id: xxxxxxxx # (required) OAuth application client id
client_secret: xxxxxxxx # (required) OAuth application client secret
admin: xxxxxxxx # (required) GitHub repo owner and collaborators who can initialize github issues
# Can either be a string or an array.
# admin:
# - xxxxxx1
# - xxxxxx2
{% endcodeblock%}

View File

@ -1,23 +0,0 @@
title: Gitment Comment Plugin
date: 2015-01-01 00:00:04
categories:
- Plugins
- Comment
comment:
type: gitment
owner: ppoffice
repo: Public-Gitment-Repo
client_id: 4828a94319a33c305063
client_secret: 5ea20158d656eaf0141dbb4eb38dd91737e3ca7d
---
[Installation instructions](https://github.com/imsun/gitment)
{% codeblock lang:yaml _config.yml %}
comment:
type: gitment
owner: xxxxxxxx # (required) GitHub user name
repo: xxxxxxxx # (required) GitHub repository name
client_id: xxxxxxxx # (required) OAuth application client id
client_secret: xxxxxxxx # (required) OAuth application client secret
{% endcodeblock%}

View File

@ -1,14 +0,0 @@
title: Isso Comment Plugin
date: 2015-01-01 00:00:57
categories:
- Plugins
- Comment
---
[Installation instructions](https://posativ.org/isso/docs/quickstart/#integration)
{% codeblock lang:yaml _config.yml %}
comment:
type: isso
url: isso.service/path # (required) url of your Isso service
{% endcodeblock%}

View File

@ -1,17 +0,0 @@
title: LiveRe Comment Plugin
date: 2015-01-01 00:00:05
categories:
- Plugins
- Comment
comment:
type: livere
uid: MTAyMC8zNTExMS8xMTY0Ng==
---
[Installation instructions](https://livere.com/insight/myCode)
{% codeblock lang:yaml _config.yml %}
comment:
type: livere
uid: xxxxxxxx # (required) application id of your site
{% endcodeblock%}

View File

@ -1,25 +0,0 @@
title: Valine Comment Plugin
date: 2015-01-01 00:00:03
categories:
- Plugins
- Comment
comment:
type: valine
app_id: QuQK82UpN8gNkXIaKIszbPUY-gzGzoHsz
app_key: B0D5cYRcXrwNGnBoQdRoDTqw
notify: false
verify: false
placeholder: Valine Comment
---
[Installation instructions](https://valine.js.org/quickstart.html)
{% codeblock lang:yaml _config.yml %}
comment:
type: valine
app_id: xxxxxxxx # (required) LeanCloud application id
app_key: xxxxxxxx # (required) LeanCloud application key
notify: false # (optional) receive email notification
verify: false # (optional) show verification code
placeholder: xxxxxxxx # (optional) comment box placeholder text
{% endcodeblock%}

View File

@ -0,0 +1,14 @@
title: Disqus Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: disqus
shortname: hexo-theme-icarus
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,19 @@
title: DisqusJS Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: disqusjs
shortname: hexo-theme-icarus
api_key: 4BrFFpTF5UKSlRMxETS07XhA621NZxoyBUsNiIW441dyUngS7QuPnXJnadMmzkdY
api: https://disqus.skk.moe/disqus/
admin: ppoffice
admin_label: Admin
nesting: 4
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,13 @@
title: Facebook Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: facebook
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,19 @@
title: Gitalk Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: gitalk
owner: ppoffice
repo: Public-Gitment-Repo
client_id: 4828a94319a33c305063
client_secret: 5ea20158d656eaf0141dbb4eb38dd91737e3ca7d
admin:
- ppoffice
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,14 @@
title: LiveRe Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: livere
uid: MTAyMC8zNTExMS8xMTY0Ng==
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,17 @@
title: Utterances Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: utterances
repo: ppoffice/Public-Gitment-Repo
label: icarus-utterances
theme: github-light
issue_term: pathname
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,25 @@
title: Valine Comment Plugin
date: 2015-01-01
tags:
- Demo
comment:
type: valine
app_id: QuQK82UpN8gNkXIaKIszbPUY-gzGzoHsz
app_key: B0D5cYRcXrwNGnBoQdRoDTqw
placeholder: ""
notify: false
verify: false
avatar:
avatar_force: false
meta: ["nick", "mail", "link"]
page_size: 10
visitor: false
highlight: true
record_ip: false
---
<div class="notification is-warning">
This 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>

View File

@ -0,0 +1,338 @@
title: Icarus用户指南 - 评论系统
date: 2017-01-31 21:55:37
categories:
- Plugins
- Comment
tags:
- Icarus用户指南
language: zh-CN
toc: true
---
本文介绍Icarus 3支持的一些用户评论插件的安装配置。
<div class="notification is-info is-size-6">
Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
提供,具体提供的插件种类与配置以其为准。
</div>
<!-- more -->
<style>
.content ol:not([type]) {
list-style-type: simp-chinese-informal;
}
</style>
## 畅言
**安装指南**
1. 首先,注册并登录[畅言云评](http://changyan.kuaizhan.com)
并按照[PC端通用代码接入](http://changyan.kuaizhan.com/static/help/index.html)的帮助文档获取代码。
2. 从获取的PC端代码中复制`appid`与`conf`值到Icarus主题配置文件的评论配置项中。
例如获取到的如下的PC端代码
```html
<!--PC版-->
<div id="SOHUCS" sid="..."></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: '????appid????',
conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
});
</script>
```
对应到主题配置文件中的配置项为:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: changyan
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>
</div>
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)。
3. 下一步选择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)来结束配置。
5. 最后,在评论站点首页的右上角点击“编辑配置”(Edit Settings),进入到站点配置页面。
在页面上找到Shortname配置值并复制到主题配置文件相应的评论配置项中(`comment`下的`shortname`)。
例如下图中的Shortname为`test-usildmkxo`
{% asset_img disqus-general-settings.png "General Settings - Disqus Admin" %}
复制到配置文件中为
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqus
shortname: test-usildmkxo
{% endcodeblock %}
6. (可选)你可以在文章的头部加入`disqusId`来为文章添加Disqus唯一标识。这样如果文章之后被移动或者链接更改
评论也不会随之丢失。
{% codeblock source/_post/some-post.md lang:markdown %}
title: My first post
date: 2015-01-01 00:00:01
disqusId: some-disqus-id
---
# Hello world
{% endcodeblock %}
## DisqusJS
DisqusJS适用于原版Disqus服务访问受限的地区使用。关于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>
</div>
1. 登录Disqus并打开[此链接](https://disqus.com/api/applications/),点击“注册新应用”(Register new
application)或者“注册应用”(registering an application)。
2. 在打开的页面中填写应用名称(Label),介绍(Description),以及网站地址(Website),然后点击“注册我的应用”
(Register my application)。
3. 应用创建完毕后进入设置界面(Settings),在域名(Domains)输入框中填入你的网站域名例如ppoffice.github.io。
点击页面下方的“保存设置”(Save Changes)按钮。
4. 点击页面中上放的“详情”(Details)链接切换到当前应用的主页从下方OAuth设置(OAuth Settings)中复制API Key
到相应的主题配置项(`comment`下的`api_key`)中。下面是示例配置:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqusjs
shortname: test-usildmkxo
api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
api: https://disqus.skk.moe/disqus/ # 可选填
admin: ppoffice # 可选填
admin_label: Admin # 可选填
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)。
## Facebook
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Facebook %}">在线预览</a>
</div>
1. Facebook的评论服务配置较为简单仅需在主题配置中将`comment`的`type`设置为`facebook`即可。
需要注意的是部分广告拦截插件会将Facebook评论拦截请酌情使用。
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: facebook
{% endcodeblock %}
## Gitalk
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" 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地址。
2. 点击“注册应用”(Register application)后在应用详情界面复制Client ID与Client Secret并填入主题配置的相应配置项中。
例如对于下面的Client ID和Client Secret
{% codeblock GitHub OAuth Application %}
Client ID
xxxxxxxxxxxxxxxxxxxx
Client Secret
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{% endcodeblock %}
Gitalk在Icarus的配置为
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: gitalk
client_id: xxxxxxxxxxxxxxxxxxxx
client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
repo: Some-of-Your-GitHub-Repo
owner: you_github_name
admin:
- you_github_name
per_page: 20 # 可选填
distraction_free_mode: false # 可选填
pager_direction: last # 可选填
create_issue_manually: false # 可选填
proxy: # 可选填
flip_move_options: # 可选填
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)。
## Gitment
<div class="notification is-warning is-size-6">
Gitment项目似乎已停止维护建议使用Gitalk或utterances作为基于GitHub Issues的评论系统的替代。
</div>
**安装指南**
1. 参照上面Gitalk中关于注册GitHub OAuth应用的步骤注册应用并将Client ID与Client Secret并填入主题配置的相应配置项中。
下面是Gitment的示例配置
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: gitment
owner: you_github_name
repo: Some-of-Your-GitHub-Repo
client_id: xxxxxxxxxxxxxxxxxxxx
client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
theme: gitment.defaultTheme # 可选填
per_page: 20 # 可选填
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)。
## Isso
如果你不希望以来第三方评论服务而自建评论系统的话可考虑选用Isso。
当然不同于第三方评论系统你需要准备一个服务器用来运行Isso服务端程序。
**安装指南**
1. 请参照[Isso官方文档](https://posativ.org/isso/docs/install/)安装并启动Isso服务。
2. 编辑主题配置文件并填入Isso服务的HTTP URL。例如你的Isso服务地址为https://posativ.org/isso/api/
则需在主题评论配置填写为:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: isso
url: posativ.org/isso/api
{% endcodeblock %}
## LiveRe
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
</div>
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代码页面。
3. 复制代码中`data-uid="..."`引号内的编号填写到主题配置中的相应选项中。例如下方的LiveRe代码
{% asset_img livere-code.png "LiveRe - Install" %}
对应的主题配置为
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: livere
uid: ABCD1234O0OxxxxXXXX000==
{% endcodeblock %}
## Utterances
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" 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)。
3. 若安装成功,网页跳转到[utterances官网](https://utteranc.es/)后。之后可以阅读页面上的配置项的说明,并按照说明将对应配置值填入到
主题配置中。下方为示例配置:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: utterances
repo: Your-GitHub-Username/Your-Public-Repo-Name
issue_term: pathname # 必填项与issue_number二选一填写
issue_number: 100 # 必填项与issue_term二选一填写每篇文章对应一个issue填写前需要手动创建issue
label: some-issue-label # 可选填
theme: github-light # 可选填
{% endcodeblock %}
## Valine
<div>
<strong>安装指南</strong>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Valine %}">在线预览</a>
</div>
1. 按照Valine官方的[快速开始文档](https://valine.js.org/quickstart.html)创建LeanCloud应用。
2. 将App ID和App Key复制并填入主题配置的对应配置项中并按照官方网站上的[配置项](https://valine.js.org/configuration.html)
说明按需填写其他配置项。下面是示例配置:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: valine
app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
app_key: xxxxxxxxxxxxxxxxxxxxxx
placeholder: "" # 可选填
notify: false # 可选填
verify: false # 可选填
avatar: # 可选填
avatar_force: false # 可选填
meta: ["nick", "mail", "link"] # 可选填
page_size: 10 # 可选填
visitor: false # 可选填
highlight: true # 可选填
record_ip: false # 可选填
{% 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>提交修改。
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

@ -1 +1 @@
Subproject commit 06a10cca3c38b4361c2cd9d862e25de8acac2058
Subproject commit e538fa8c316f4411c8059a538122e0d04be9d84d