379 lines
14 KiB
Markdown
379 lines
14 KiB
Markdown
|
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>
|