feat(doc): add English comment user guide
ppoffice
parent
2b498f2188
commit
78ecd4b530
|
|
@ -0,0 +1,378 @@
|
|||
title: Icarus User Guide - Comment Plugins
|
||||
date: 2017-01-31
|
||||
categories:
|
||||
- Plugins
|
||||
- Comment
|
||||
tags:
|
||||
- Icarus User Guide
|
||||
language: en
|
||||
toc: true
|
||||
---
|
||||
|
||||
<div class="notification is-success is-size-6">
|
||||
This article is also available in: <a href="{% post_path zh-CN/Comment-Plugins %}">简体中文</a>.
|
||||
</div>
|
||||
|
||||
This article covers some comment plugins supported by Icarus 3.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
The comment plugins of Icarus are provided by
|
||||
[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
|
||||
Please refer to it for a complete list of supported plugins and their configurations.
|
||||
|
||||
</div>
|
||||
|
||||
## Changyan
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
1. First, register and 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's configuration file.
|
||||
For example, the following HTML code
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
can be mapped to the following theme configuration
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: changyan
|
||||
app_id: ????appid????
|
||||
conf: prod_xxxxxxxxxxxxxxxxxxxxxxx
|
||||
{% endcodeblock %}
|
||||
|
||||
3. Additionally, you are required to obtain an ICP license from the Chinese government if you are going to
|
||||
use Changyan. Please refer to [ICP Licensing](http://changyan.kuaizhan.com/static/help/o-beian.html) for
|
||||
details.
|
||||
|
||||
|
||||
## Disqus
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Disqus %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. First, register and log into [Disqus](https://disqus.com/). Click the "GET STARTED" button on the
|
||||
front page or visit [here](https://disqus.com/profile/signup/intent/) and click "I want to install Disqus
|
||||
on my site" to create a new Disqus comment service.
|
||||
|
||||
2. On the create new site page, fill in the "Website Name" and "Category", then click the "Create Site" button.
|
||||
|
||||
3. Next, select the platform where Disqus is to be installed.
|
||||
Select the "I don't see my platform listed, install manually with Universal Code" on the bottom of the page.
|
||||
|
||||
4. Click the "Configuration" button on the bottom of the page to skip the "Universal Code install instructions"
|
||||
page.
|
||||
Fill in the right configuration for Disqus on the "Configure Disqus" page.
|
||||
Then, click the "Complete Setup" and "Dismiss Setup" buttons to finish setup.
|
||||
|
||||
5. Finally, click the "Edit Settings" button on the top right corner of the comment service home page.
|
||||
Find the value of "Shortname" and copy it to the comment settings in the theme's configuration file
|
||||
(`comment` > `shortname`).
|
||||
For example, the "Shortname" in the following screenshot is `test-usildmkxo`
|
||||
|
||||
|
||||
|
||||
which can be mapped into the following theme configuration:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: disqus
|
||||
shortname: test-usildmkxo
|
||||
{% endcodeblock %}
|
||||
|
||||
6. (Optional) You can add `disqusId` in the front-matter of the post as the unique Disqus ID.
|
||||
By doing this, you can change the location of the post without losing all your comments.
|
||||
|
||||
{% 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 is a Disqus alternative in areas where Disqus is restricted.
|
||||
You can refer to [https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/DisqusJS)
|
||||
for detailed configration process of DisqusJS.
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/DisqusJS %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Log into Disqus and visit [here](https://disqus.com/api/applications/).
|
||||
Click the "Register new application" button or "registering an application" to create a new Disqus application.
|
||||
|
||||
2. Fill in the "Label", "Description", and "Website" on the next page.
|
||||
Then, click "Register my application".
|
||||
|
||||
3. After creating the application, go to the "Settings" tab of the application, fill in the domain name
|
||||
of your Hexo site, e.g., ppoffice.github.io, in the "Domains" field.
|
||||
Then, click the "Save Changes" button on the bottom of the page.
|
||||
|
||||
4. Click the "Details" link on the current page to go to the home page of current application.
|
||||
Copy the "API Key" in the "OAuth Settings" section to the corresponding setting in the theme's
|
||||
configuration file (`comment` > `api_key`). Here is an example:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: disqusjs
|
||||
shortname: test-usildmkxo
|
||||
api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
api: https://disqus.skk.moe/disqus/ # Optional
|
||||
admin: ppoffice # Optional
|
||||
admin_label: Admin # Optional
|
||||
nesting: 4 # Optional
|
||||
{% endcodeblock %}
|
||||
|
||||
5. Please read through [SukkaW/DisqusJS documentation](https://github.com/SukkaW/DisqusJS) or
|
||||
[the configuration description](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json)
|
||||
from the hexo-component-inferno project.
|
||||
|
||||
|
||||
## Facebook
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This comment plugin may be blocked by some ad blocking browser extensions.
|
||||
Please use with caution.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Facebook %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. The configuration of Facebook comment plugin is relatively simple.
|
||||
You only need to set the `type` of the `comment` to `facebook`.
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: facebook
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## Gitalk
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Gitalk %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Log into GitHub and [click here](https://github.com/settings/applications/new) to register a new OAuth
|
||||
application.
|
||||
Then, fill in the "Application name", "Homepage URL", and "Application description".
|
||||
Finally, type in the root URL of your Hexo site in the "Authorization callback URL" field.
|
||||
|
||||
2. Click the "Register application" button to go to the application details page.
|
||||
Copy the values of "Client ID" and "Client Secret" to the corresponding settings in the theme's
|
||||
configuration file.
|
||||
For example, the following Client ID and Client Secret
|
||||
|
||||
{% codeblock GitHub OAuth Application %}
|
||||
Client ID
|
||||
xxxxxxxxxxxxxxxxxxxx
|
||||
Client Secret
|
||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
{% endcodeblock %}
|
||||
|
||||
can be mapped into the following Gitalk configuration
|
||||
|
||||
{% 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 # Optional
|
||||
distraction_free_mode: false # Optional
|
||||
pager_direction: last # Optional
|
||||
create_issue_manually: false # Optional
|
||||
proxy: # Optional
|
||||
flip_move_options: # Optional
|
||||
enable_hotkey: true # Optional
|
||||
{% endcodeblock %}
|
||||
|
||||
3. You can review the description and possible values of the above configuration at
|
||||
[Gitalk documentation](https://github.com/gitalk/gitalk) or
|
||||
[the configuration description](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json)
|
||||
from the hexo-component-inferno project.
|
||||
|
||||
|
||||
## Gitment
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
The maintenance of Gitment seems to be discontinued.
|
||||
You can choose Gitalk or utterances as an alternative GitHub Issue-based comment system.
|
||||
</div>
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
1. Please following the steps in the Gitalk section to register a GitHub OAuth application and copy
|
||||
the values of Client ID and Client Secret to the corresponding settings in the theme's configuration file.
|
||||
Here is an example of the Gitment configuration
|
||||
|
||||
{% 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 # Optional
|
||||
per_page: 20 # Optional
|
||||
max_comment_height: 250 # Optional
|
||||
{% endcodeblock %}
|
||||
|
||||
2. Please refer to the [Gitment documentation](https://github.com/imsun/gitment) or
|
||||
[the configuration description](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitment.json)
|
||||
from the hexo-component-inferno project for detailed information of the above configuration and possible values.
|
||||
|
||||
|
||||
## Isso
|
||||
|
||||
Isso is a valid choice if you wish to set up a self-hosted social comment system
|
||||
instead of relying on the third-party services.
|
||||
However, unlike the third-party services, Isso requires a web server for running Isso server.
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
1. Please following the [Isso documentation](https://posativ.org/isso/docs/install/) for installing and
|
||||
running the Isso server.
|
||||
|
||||
2. Fill in the HTTP URL of Isso server to the corresponding setting in the theme's configuration file.
|
||||
For example, if your service URL is https://posativ.org/isso/api/, you will have the following
|
||||
comment configuration
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: isso
|
||||
url: posativ.org/isso/api
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## LiveRe
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This comment plugin may be blocked by some ad blocking browser extensions.
|
||||
Please use with caution.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/LiveRe %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. First, register and log into [LiveRe](https://livere.com/).
|
||||
Click "Install" on the navigation bar to go to the installation page.
|
||||
|
||||
2. Select Free "City" tier on the installation page and click the "Install Now" button.
|
||||
Fill in the "Site URL", "Name of website", and "Choose site category" on the "Get LiveRe City code"
|
||||
page. Check "I have check the advertising terms..." and click the "Get code" button to be redirected to
|
||||
the LiveRe HTML code page.
|
||||
|
||||
3. Copy the value inside the quotes of `data-uid="..."` to the corresponding setting in the theme's configuration
|
||||
file.
|
||||
For example, the LiveRe code below
|
||||
|
||||
|
||||
|
||||
can be mapped to the following theme configuration
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: livere
|
||||
uid: ABCD1234O0OxxxxXXXX000==
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## Utterances
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Utterances %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Prepare a public GitHub repository.
|
||||
|
||||
2. Go to [GitHub Apps - utterances](https://github.com/apps/utterances) to install utterances to the repository
|
||||
above.
|
||||
Click the "Configure" button and select the user to install utterances to on the next page.
|
||||
On the installation page, you can choose to install it to "All repositories" or "Only select repositories".
|
||||
Then, click the "Install" button.
|
||||
|
||||
3. When the installation completes successfully, you will be redirected to the
|
||||
[utterances official site](https://utteranc.es/).
|
||||
You can review the description of each configuration option and fill in the correct values in the theme's
|
||||
configuration file.
|
||||
Here is an example configuration of utterances
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: utterances
|
||||
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
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## Valine
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Valine %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. Create a LeanCloud application following the [Quick start guide](https://valine.js.org/quickstart.html) of Valine.
|
||||
|
||||
2. Copy the App ID and App Key of your LeanCloud application to the corresponding settings in the theme's configuration
|
||||
file.
|
||||
You can also refer to the [Config Reference](https://valine.js.org/configuration.html) of Valine to fill in the
|
||||
correct values of optional settings.
|
||||
Here is an example configuration
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
type: valine
|
||||
app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
app_key: xxxxxxxxxxxxxxxxxxxxxx
|
||||
placeholder: "" # Optional
|
||||
notify: false # Optional
|
||||
verify: false # Optional
|
||||
avatar: # Optional
|
||||
avatar_force: false # Optional
|
||||
meta: ["nick", "mail", "link"] # Optional
|
||||
page_size: 10 # Optional
|
||||
visitor: false # Optional
|
||||
highlight: true # Optional
|
||||
record_ip: false # Optional
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
Something wrong with this article? Click <a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/en/Comment-Plugins.md">here</a> to submit your revision.
|
||||
</div>
|
||||
|
|
@ -19,9 +19,9 @@ This article covers some search plugins supported by Icarus 3.
|
|||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
The search plugins of Icarus is provided by
|
||||
The search plugins of Icarus are provided by
|
||||
[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
|
||||
Please refer to it for a complete list of supported buttons and their configurations.
|
||||
Please refer to it for a complete list of supported plugins and their configurations.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ language: zh-CN
|
|||
toc: true
|
||||
---
|
||||
|
||||
<div class="notification is-success is-size-6">
|
||||
本文同时提供以下语言的翻译：<a href="{% post_path en/Comment-Plugins %}">English</a>。
|
||||
</div>
|
||||
|
||||
本文介绍Icarus 3支持的一些用户评论插件的安装配置。
|
||||
|
||||
<!-- more -->
|
||||
|
|
@ -84,7 +88,7 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
|
|||
在页面上找到Shortname配置值并复制到主题配置文件相应的评论配置项中(`comment`下的`shortname`)。
|
||||
例如，下图中的Shortname为`test-usildmkxo`
|
||||
|
||||
{% asset_img disqus-general-settings.png "General Settings - Disqus Admin" %}
|
||||
|
||||
|
||||
复制到配置文件中为
|
||||
|
||||
|
|
@ -272,7 +276,7 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
|
|||
|
||||
3. 复制代码中`data-uid="..."`引号内的编号，填写到主题配置中的相应选项中。例如，下方的LiveRe代码
|
||||
|
||||
{% asset_img livere-code.png "LiveRe - Install" %}
|
||||
|
||||
|
||||
对应的主题配置为
|
||||
|
||||
|
|
@ -296,7 +300,7 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
|
|||
点击“配置”(Configure)按钮，在下一页面中选择需要安装utterances的用户。在安装页面，你可以选择将其安装到所有仓库(All repositories)
|
||||
或是选定的一些仓库(Only select repositories)。点击“安装”(Install)。
|
||||
|
||||
3. 若安装成功，网页跳转到[utterances官网](https://utteranc.es/)后。之后可以阅读页面上的配置项的说明，并按照说明将对应配置值填入到
|
||||
3. 若安装成功，网页跳转到[utterances官网](https://utteranc.es/)。之后可以阅读页面上的配置项的说明，并按照说明将对应配置值填入到
|
||||
主题配置中。下方为示例配置：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
Loading…
Reference in New Issue