-
-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.
-
+
+
+The following comment plugins are provided by
+ppoffice/hexo-component-inferno.
+Please refer to it for a complete list of supported plugins and their configuration details.
+
## Changyan
+
+
+You are required to obtain an ICP license from the Chinese
+government if you are going to use Changyan.
+Refer to ICP Licensing for more information.
+
+
+
**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.
+2. Copy the value of `appid` and `conf` to the corresponding settings in the theme configurations.
For example, the following HTML code
- ```html
+ {% codeblock "Changyan Installation Code" lang:html >folded %}
@@ -45,9 +56,9 @@ Please refer to it for a complete list of supported plugins and their configurat
conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
});
- ```
+ {% endcodeblock %}
- can be mapped to the following theme configuration
+ maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -56,10 +67,6 @@ Please refer to it for a complete list of supported plugins and their configurat
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
@@ -68,37 +75,54 @@ Please refer to it for a complete list of supported plugins and their configurat
Preview
-1. First, register and log into [Disqus](https://disqus.com/). Click the "GET STARTED" button on the
+1. First, 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.
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-started.png 360 '"Get Started - Disqus" "Get Started - Disqus"' %}
+
+
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.
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-create-site.png 360 '"Create Site - Disqus" "Create Site - Disqus"' %}
+
+
+3. Select a subscription plan if you want to.
+ You can also skip this by clicking "Install Disqus" on the left.
+
+4. Next, choose 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.
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-select-platform.png 360 '"Select Platform - Disqus" "Select Platform - Disqus"' %}
+
-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`
+5. Click the "Configuration" button on the bottom of the page to skip the "Universal Code install instructions".
- 
+6. Make customizations to your Disqus service on the "Configure Disqus" page.
+ Then, click the "Complete Setup" and "Dismiss Setup" buttons to finish the setup.
- which can be mapped into the following theme configuration:
+7. Next, click the "Edit Settings" button on the top right corner of the comment service home page.
+
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-service-homepage.png 360 '"Comment Service Homepage - Disqus" "Comment Service Homepage - Disqus"' %}
+
+
+8. Find the value of "Shortname" on the "Configure Disqus for Your Site" page, and copy it to the comment
+ 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"' %}
+
+
+ which maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
type: disqus
- shortname: test-usildmkxo
+ shortname: my-hexo-blog-1
{% 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.
+7. (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 %}
title: My first post
@@ -111,9 +135,9 @@ Please refer to it for a complete list of supported plugins and their configurat
## DisqusJS
-DisqusJS is a Disqus alternative in areas where Disqus is restricted.
+DisqusJS is an alternative for Disqus 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.
+for the detailed configuration process of DisqusJS.
Installation Guide
@@ -123,16 +147,32 @@ for detailed configration process of DisqusJS.
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.
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-applications.png 360 '"Applications - Disqus" "Applications - Disqus"' %}
+
+
2. Fill in the "Label", "Description", and "Website" on the next page.
Then, click "Register my application".
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-register-application.png 360 '"Register Application - Disqus" "Register Application - Disqus"' %}
+
+
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:
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-application-settings.png 360 '"Application Settings - Disqus" "Application Settings - Disqus"' %}
+
+
+4. Click the "Details" link on the current page to go to the home page of the current application.
+ Copy the "API Key" in the "OAuth Settings" section to the corresponding setting in the theme
+ configurations.
+
+ For example, the "API Key" in the following screenshot:
+
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-key.png 360 '"Application Details - Disqus" "Application Details - Disqus"' %}
+
+
+ maps to the following configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -145,25 +185,25 @@ for detailed configration process of DisqusJS.
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.
+5. To learn more about DisqusJS and its configuration, visit
+ [SukkaW/DisqusJS documentation](https://github.com/SukkaW/DisqusJS) or
+ [hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json).
## Facebook
-
-This comment plugin may be blocked by some ad blocking browser extensions.
-Please use with caution.
+
+
+Some AD blockers may block this comment plugin. Use it with caution.
-1. The configuration of Facebook comment plugin is relatively simple.
- You only need to set the `type` of the `comment` to `facebook`.
+1. To enable Facebook comment, set the `type` of `comment` to `facebook`:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -180,12 +220,18 @@ Please use with caution.
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.
+ Fill in the "Application name", "Homepage URL", and "Application description".
+ Then, type in the root URL of your Hexo site in the "Authorization callback URL" field.
+ Click the "Register application" button to go to the application details page.
+
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-register-application.png 360 '"Register OAuth Application - GitHub" "Register OAuth Application - GitHub"' %}
+
+
+2. Copy the values of "Client ID" and "Client Secret" to the corresponding settings in the theme configurations.
+
+ {% 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"' %}
+
-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 %}
@@ -195,7 +241,7 @@ Please use with caution.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{% endcodeblock %}
- can be mapped into the following Gitalk configuration
+ maps the following Gitalk configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -217,22 +263,25 @@ Please use with caution.
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.
+ [hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/disqusjs.json).
## Gitment
-
-The maintenance of Gitment seems to be discontinued.
+
+
+The maintenance of Gitment seems to be discontinued.
You can choose Gitalk or utterances as an alternative GitHub Issue-based comment system.
+
**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
+1. Follow the steps in the Gitalk section to register a GitHub OAuth application.
+
+2. Copy the values of "Client ID" and "Client Secret" to the corresponding settings in the theme configurations.
+
+ Here is an example of the Gitment configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -246,25 +295,24 @@ You can choose Gitalk or utterances as an alternative GitHub Issue-based comment
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.
+3. For more details on the above configuration, refer to
+ [Gitment documentation](https://github.com/imsun/gitment) or
+ [hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.1/src/schema/comment/gitment.json).
## 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.
+instead of relying on third-party ones.
+However, unlike the other services, Isso requires a web host for running the Isso server.
**Installation Guide**
-1. Please following the [Isso documentation](https://posativ.org/isso/docs/install/) for installing and
- running the Isso server.
+1. Follow the [Isso documentation](https://posativ.org/isso/docs/install/) to install and run 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
+2. Fill in the HTTP URL of Isso server to the corresponding setting in the theme configurations.
+ 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:
@@ -275,31 +323,62 @@ However, unlike the third-party services, Isso requires a web server for running
## LiveRe
-
-This comment plugin may be blocked by some ad blocking browser extensions.
-Please use with caution.
+
+
+Some AD blockers may block this comment plugin. Use it with caution.
-1. First, register and log into [LiveRe](https://livere.com/).
+1. First, 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"
+2. Select the free "City" tier on the installation page and click the "Install Now" button.
+
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-select-plan.png 360 '"Select Plan - LiveRe" "Select Plan - LiveRe"' %}
+
+
+3. 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
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-configure-service.png 360 '"Configure Service - LiveRe" "Configure Service - LiveRe"' %}
+
+
+4. 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
- 
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-get-code.png 360 '"Get Code - LiveRe" "Get Code - LiveRe"' %}
+
- can be mapped to the following theme configuration
+ For example, the LiveRe code below:
+
+ {% codeblock "LiveRe Installation Code" lang:html >folded %}
+
+
+
+
+
+
+ {% endcodeblock %}
+
+ maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -308,7 +387,7 @@ Please use with caution.
{% endcodeblock %}
-## Utterances
+## utterances
Installation Guide
@@ -317,17 +396,44 @@ Please use with caution.
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".
+2. Go to [GitHub Apps - utterances](https://github.com/apps/utterances) and click "Install".
+
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-github-app.png 360 '"GitHub App Page - utterances" "GitHub App Page - utterances"' %}
+
+
+3. (Optional) Select the user to install utterances 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/utterances-select-user.png 360 '"Select User - utterances" "Select User - utterances"' %}
+
+
+4. On the next page, you can choose to install utterances 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
+ {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-select-repo.png 360 '"Select Repository - utterances" "Select Repository - utterances"' %}
+
+
+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
+ 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"' %}
+
+
+ For example, the utterances code below:
+
+ {% codeblock "utterances Installation Code" lang:html >folded %}
+
+ {% endcodeblock %}
+
+ maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -347,13 +453,13 @@ Please use with caution.
Preview
-1. Create a LeanCloud application following the [Quick start guide](https://valine.js.org/quickstart.html) of Valine.
+1. Create a LeanCloud application following the [Quickstart guide](https://valine.js.org/quickstart.html).
-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
+2. Copy the "App ID" and "App Key" of your LeanCloud application to the corresponding settings in the theme
+ configurations.
+ In addition, you can refer to the [Config Reference](https://valine.js.org/configuration.html) to find out the
+ details and possible values of the optional settings.
+ Here is an example configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %}
comment:
@@ -373,6 +479,10 @@ Please use with caution.
{% endcodeblock %}
-
-Something wrong with this article? Click here to submit your revision.
+
+
+Something wrong with this article?
+Click here
+to submit your revision.
+
diff --git a/source/gallery/screenshots/disqus-create-site.png b/source/gallery/screenshots/disqus-create-site.png
new file mode 100644
index 0000000..af19c76
Binary files /dev/null and b/source/gallery/screenshots/disqus-create-site.png differ
diff --git a/source/gallery/screenshots/disqus-general-settings.png b/source/gallery/screenshots/disqus-general-settings.png
deleted file mode 100644
index c411095..0000000
Binary files a/source/gallery/screenshots/disqus-general-settings.png and /dev/null differ
diff --git a/source/gallery/screenshots/disqus-get-shortname.png b/source/gallery/screenshots/disqus-get-shortname.png
new file mode 100644
index 0000000..f5a4a75
Binary files /dev/null and b/source/gallery/screenshots/disqus-get-shortname.png differ
diff --git a/source/gallery/screenshots/disqus-get-started.png b/source/gallery/screenshots/disqus-get-started.png
new file mode 100644
index 0000000..963615b
Binary files /dev/null and b/source/gallery/screenshots/disqus-get-started.png differ
diff --git a/source/gallery/screenshots/disqus-select-platform.png b/source/gallery/screenshots/disqus-select-platform.png
new file mode 100644
index 0000000..55d7ed7
Binary files /dev/null and b/source/gallery/screenshots/disqus-select-platform.png differ
diff --git a/source/gallery/screenshots/disqus-service-homepage.png b/source/gallery/screenshots/disqus-service-homepage.png
new file mode 100644
index 0000000..09b08e0
Binary files /dev/null and b/source/gallery/screenshots/disqus-service-homepage.png differ
diff --git a/source/gallery/screenshots/disqusjs-api-applications.png b/source/gallery/screenshots/disqusjs-api-applications.png
new file mode 100644
index 0000000..522e870
Binary files /dev/null and b/source/gallery/screenshots/disqusjs-api-applications.png differ
diff --git a/source/gallery/screenshots/disqusjs-api-key.png b/source/gallery/screenshots/disqusjs-api-key.png
new file mode 100644
index 0000000..60ff400
Binary files /dev/null and b/source/gallery/screenshots/disqusjs-api-key.png differ
diff --git a/source/gallery/screenshots/disqusjs-application-settings.png b/source/gallery/screenshots/disqusjs-application-settings.png
new file mode 100644
index 0000000..53bae31
Binary files /dev/null and b/source/gallery/screenshots/disqusjs-application-settings.png differ
diff --git a/source/gallery/screenshots/disqusjs-register-application.png b/source/gallery/screenshots/disqusjs-register-application.png
new file mode 100644
index 0000000..81043a2
Binary files /dev/null and b/source/gallery/screenshots/disqusjs-register-application.png differ
diff --git a/source/gallery/screenshots/gitalk-application-settings.png b/source/gallery/screenshots/gitalk-application-settings.png
new file mode 100644
index 0000000..292181c
Binary files /dev/null and b/source/gallery/screenshots/gitalk-application-settings.png differ
diff --git a/source/gallery/screenshots/gitalk-register-application.png b/source/gallery/screenshots/gitalk-register-application.png
new file mode 100644
index 0000000..0db69c8
Binary files /dev/null and b/source/gallery/screenshots/gitalk-register-application.png differ
diff --git a/source/gallery/screenshots/livere-code.png b/source/gallery/screenshots/livere-code.png
deleted file mode 100644
index a5c49fb..0000000
Binary files a/source/gallery/screenshots/livere-code.png and /dev/null differ
diff --git a/source/gallery/screenshots/livere-configure-service.png b/source/gallery/screenshots/livere-configure-service.png
new file mode 100644
index 0000000..d60d5fa
Binary files /dev/null and b/source/gallery/screenshots/livere-configure-service.png differ
diff --git a/source/gallery/screenshots/livere-get-code.png b/source/gallery/screenshots/livere-get-code.png
new file mode 100644
index 0000000..8901023
Binary files /dev/null and b/source/gallery/screenshots/livere-get-code.png differ
diff --git a/source/gallery/screenshots/livere-select-plan.png b/source/gallery/screenshots/livere-select-plan.png
new file mode 100644
index 0000000..154595b
Binary files /dev/null and b/source/gallery/screenshots/livere-select-plan.png differ
diff --git a/source/gallery/screenshots/utterances-get-code.png b/source/gallery/screenshots/utterances-get-code.png
new file mode 100644
index 0000000..8d08fb6
Binary files /dev/null and b/source/gallery/screenshots/utterances-get-code.png differ
diff --git a/source/gallery/screenshots/utterances-github-app.png b/source/gallery/screenshots/utterances-github-app.png
new file mode 100644
index 0000000..ad780a6
Binary files /dev/null and b/source/gallery/screenshots/utterances-github-app.png differ
diff --git a/source/gallery/screenshots/utterances-select-repo.png b/source/gallery/screenshots/utterances-select-repo.png
new file mode 100644
index 0000000..c18076b
Binary files /dev/null and b/source/gallery/screenshots/utterances-select-repo.png differ
diff --git a/source/gallery/screenshots/utterances-select-user.png b/source/gallery/screenshots/utterances-select-user.png
new file mode 100644
index 0000000..4e42851
Binary files /dev/null and b/source/gallery/screenshots/utterances-select-user.png differ