chore(doc): update en comment plugins doc
|
@ -9,33 +9,44 @@ 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 comment plugins supported by Icarus 3.
|
||||
|
||||
This article covers some comment plugins supported by Icarus 3.
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-globe-asia mr-2"></i>This article is also available in
|
||||
<a href="{% post_path zh-CN/Comment-Plugins %}">简体中文</a>.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 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.
|
||||
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-info-circle mr-2"></i>The following comment plugins are provided by
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
Please refer to it for a complete list of supported plugins and their configuration details.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
## Changyan
|
||||
|
||||
<article class="message message-immersive is-danger">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>You are required to obtain an ICP license from the Chinese
|
||||
government if you are going to use Changyan.
|
||||
Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Licensing</a> for more information.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
**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 %}
|
||||
<!--PC版-->
|
||||
<div id="SOHUCS" sid="..."></div>
|
||||
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
|
||||
|
@ -45,9 +56,9 @@ Please refer to it for a complete list of supported plugins and their configurat
|
|||
conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
{% 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
|
|||
<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
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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.
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
|
@ -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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This comment plugin may be blocked by some ad blocking browser extensions.
|
||||
Please use with caution.
|
||||
<article class="message message-immersive is-danger">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>Some AD blockers may block this comment plugin. Use it with caution.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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`.
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
The maintenance of Gitment seems to be discontinued.
|
||||
<article class="message message-immersive is-danger">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>The maintenance of Gitment seems to be discontinued.
|
||||
You can choose Gitalk or utterances as an alternative GitHub Issue-based comment system.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
**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
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This comment plugin may be blocked by some ad blocking browser extensions.
|
||||
Please use with caution.
|
||||
<article class="message message-immersive is-danger">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-exclamation-triangle mr-2"></i>Some AD blockers may block this comment plugin. Use it with caution.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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/).
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
can be mapped to the following theme configuration
|
||||
For example, the LiveRe code below:
|
||||
|
||||
{% codeblock "LiveRe Installation Code" 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 %}
|
||||
|
||||
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
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
|
@ -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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
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"' %}
|
||||
<br>
|
||||
|
||||
For example, the utterances code below:
|
||||
|
||||
{% codeblock "utterances Installation Code" 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 %}
|
||||
|
||||
maps to the following theme configuration:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
|
@ -347,13 +453,13 @@ Please use with caution.
|
|||
<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.
|
||||
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 %}
|
||||
|
||||
|
||||
<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.
|
||||
<article class="message message-immersive is-warning">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-question-circle mr-2"></i>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>
|
||||
</article>
|
||||
|
|
After Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 167 KiB |
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 139 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 46 KiB |