diff --git a/source/_posts/en/Comment-Plugins.md b/source/_posts/en/Comment-Plugins.md
index cc4e7e6..bb4ddf2 100644
--- a/source/_posts/en/Comment-Plugins.md
+++ b/source/_posts/en/Comment-Plugins.md
@@ -40,7 +40,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
 
 **Installation Guide**
 
-1. First, register and log into [Changyan](http://changyan.kuaizhan.com). Get the comment HTML code by following
+1. First, 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 configurations.
@@ -109,7 +109,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
    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"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-shortname.png 360 '"Configure Disqus - Disqus" "Configure Disqus - Disqus"' %}
    <br>
 
    which maps to the following theme configuration:
@@ -120,7 +120,7 @@ Refer to <a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP Lic
         shortname: my-hexo-blog-1
     {% endcodeblock %}
 
-7. (Optional) You can add `disqusId` in the front-matter of the post as the unique Disqus ID.
+9. (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 %}
@@ -170,12 +170,12 @@ for the detailed configuration process of DisqusJS.
    {% 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:
+   maps to the following theme configuration:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
         type: disqusjs
-        shortname: test-usildmkxo
+        shortname: my-hexo-blog-1
         api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
         api: https://disqus.skk.moe/disqus/     # Optional
         admin: ppoffice                         # Optional
@@ -228,7 +228,7 @@ for the detailed configuration process of DisqusJS.
    {% 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>
 
-   For example, the following Client ID and Client Secret
+   For example, the following "Client ID" and "Client Secret":
 
     {% codeblock GitHub OAuth Application %}
     Client ID
@@ -344,8 +344,7 @@ However, unlike the other services, Isso requires a web host for running the Iss
    {% 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.
+4. Copy the value inside the quotes of `data-uid="..."` to the corresponding setting in the theme configurations.
 
    {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-get-code.png 360 '"Get Code - LiveRe" "Get Code - LiveRe"' %}
    <br>
@@ -409,7 +408,7 @@ However, unlike the other services, Isso requires a web host for running the Iss
 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
+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"' %}
diff --git a/source/_posts/zh-CN/Comment-Plugins.md b/source/_posts/zh-CN/Comment-Plugins.md
index f415470..1985b30 100644
--- a/source/_posts/zh-CN/Comment-Plugins.md
+++ b/source/_posts/zh-CN/Comment-Plugins.md
@@ -13,20 +13,21 @@ providers:
     iconcdn: loli
 ---
 
-<div class="notification is-success is-size-6">
-本文同时提供以下语言的翻译：<a href="{% post_path en/Comment-Plugins %}">English</a>。
-</div>
-
 本文介绍Icarus 3支持的一些用户评论插件的安装配置。
 
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/Comment-Plugins %}">English</a>。
+</div>
+</article>
+
 <!-- more -->
 
-<div class="notification is-link is-size-6">
-
-Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
-提供，具体提供的插件种类与配置以其为准。
-
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-info-circle mr-2"></i>下面的用户评论插件由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持插件列表和配置详情以其为准。
 </div>
+</article>
 
 <style>
 .content ol:not([type]) {
@@ -36,15 +37,22 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
 
 ## 畅言
 
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>畅言云评要求站长对使用其评论服务的网站进行备案，详情请参阅
+<a href="http://changyan.kuaizhan.com/static/help/o-beian.html">ICP备案</a>。
+</div>
+</article>
+
 **安装指南**
 
-1. 首先，注册并登录[畅言云评](http://changyan.kuaizhan.com)，
-并按照[PC端通用代码接入](http://changyan.kuaizhan.com/static/help/index.html)的帮助文档获取代码。
+1. 首先，登录[畅言云评](http://changyan.kuaizhan.com)，
+   并按照[PC端通用代码接入](http://changyan.kuaizhan.com/static/help/index.html)文档获取评论HTML代码。
 
-2. 从获取的PC端代码中复制`appid`与`conf`值到Icarus主题配置文件的评论配置项中。
-   例如，获取到的如下的PC端代码：
+2. 复制`appid`与`conf`的值到主题配置的对应配置项中。
+   例如，如下的HTML代码：
 
-    ```html
+    {% codeblock "畅言安装代码" 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>
@@ -54,8 +62,9 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
         conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
     });
     </script>
-    ```
-    对应到主题配置文件中的配置项为：
+    {% endcodeblock %}
+
+    对应到主题配置为：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -63,50 +72,67 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
         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>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Disqus %}">在线预览</a>
 </div>
 
-1. 首先，注册并登录[Disqus](https://disqus.com/)，点击首页的“开始”(GET STARTED)按钮或者访问
+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)。
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-started.png 360 '"开始页面 - Disqus" "开始页面 - Disqus"' %}
+   <br>
 
-3. 下一步，选择Disqus的安装平台。此处选择最下方的“上面没有列出我使用的平台，使用通用代码安装”
+2. 在创建新站点页面中填写“网站名称”(Website Name)以及“网站类型”(Category)，然后点击“创建站点”(Create Site)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-create-site.png 360 '"创建站点 - Disqus" "创建站点 - Disqus"' %}
+   <br>
+
+3. 如果你愿意的话，选择一个付费订阅。
+   你也可以点击左侧的“安装Disqus”(Install Disqus)来跳过此步。
+
+4. 下一步，选择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)来结束配置。
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-select-platform.png 360 '"选择平台 - Disqus" "选择平台 - Disqus"' %}
+   <br>
 
-5. 最后，在评论站点首页的右上角点击“编辑配置”(Edit Settings)，进入到站点配置页面。
-   在页面上找到Shortname配置值并复制到主题配置文件相应的评论配置项中(`comment`下的`shortname`)。
-   例如，下图中的Shortname为`test-usildmkxo`
+5. 点击页面底部的“配置”(Configure)按钮跳过“通用代码安装指南”(Universal Code install instructions)。
 
-   ![General Settings - Disqus Admin](/hexo-theme-icarus/gallery/screenshots/disqus-general-settings.png)
+6. 在“配置Disqus”(Configure Disqus)页面中按需填写Disqus个性化配置。
+   然后，点击“完成安装”(Complete Setup)和“关闭配置”(Dismiss Setup)按钮来结束配置。
 
-   复制到配置文件中为
+7. 下一步，在评论服务首页的右上角点击“编辑配置”(Edit Settings)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-service-homepage.png 360 '"评论服务首页 - Disqus" "评论服务首页 - Disqus"' %}
+   <br>
+
+8. 在“为你的站点配置Disqus”(Configure Disqus for Your Site)页面上找到“Shortname”的值，
+   复制到主题配置的评论配置项中。
+   例如，下面截图中的“Shortname”为`my-hexo-blog-1`：
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqus-get-shortname.png 360 '"配置Disqus - Disqus" "配置Disqus - Disqus"' %}
+   <br>
+
+   对应的主题配置为：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
         type: disqus
-        shortname: test-usildmkxo
+        shortname: my-hexo-blog-1
     {% endcodeblock %}
 
-6. （可选）你可以在文章的头部加入`disqusId`来为文章添加Disqus唯一标识。这样如果文章之后被移动或者链接更改，其
-   评论也不会随之丢失。
+9. （可选）你可以在文章的front-matter中加入`disqusId`来为文章添加Disqus唯一标识。
+   这样，你可以在未来更改文章的位置而不会丢失所有评论。
 
     {% codeblock source/_post/some-post.md lang:markdown %}
-    title: My first post
+    title: 我的第一篇文章
     date: 2015-01-01 00:00:01
     disqusId: some-disqus-id
     ---
@@ -116,30 +142,45 @@ Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.c
 
 ##  DisqusJS
 
-DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS的配置过程可参考
-[https://github.com/SukkaW/DisqusJS](https://github.com/SukkaW/DisqusJS)。
+在Disqus服务访问受限的地区可使用DisqusJS作为替代。
+关于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>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/DisqusJS %}">在线预览</a>
 </div>
 
-1. 登录Disqus并打开[此链接](https://disqus.com/api/applications/)，点击“注册新应用”(Register new 
-   application)或者“注册应用”(registering an application)。
+1. 登录Disqus并访问[此链接](https://disqus.com/api/applications/)。
+   点击“注册新应用”(Register new application)或者“注册应用”(registering an application)来创建新的Disqus应用。
 
-2. 在打开的页面中填写应用名称(Label)，介绍(Description)，以及网站地址(Website)，然后点击“注册我的应用”
-   (Register my application)。
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-applications.png 360 '"应用 - Disqus" "应用 - Disqus"' %}
+   <br>
 
-3. 应用创建完毕后进入设置界面(Settings)，在域名(Domains)输入框中填入你的网站域名，例如ppoffice.github.io。
-   点击页面下方的“保存设置”(Save Changes)按钮。
+2. 在下一页面中填写”应用名称“(Label)，”介绍“(Description)，以及”网站地址“(Website)。
+   然后点击“注册我的应用”(Register my application)。
 
-4. 点击页面中上放的“详情”(Details)链接切换到当前应用的主页，从下方OAuth设置(OAuth Settings)中复制API Key
-   到相应的主题配置项(`comment`下的`api_key`)中。下面是示例配置：
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-register-application.png 360 '"注册应用 - Disqus" "注册应用 - Disqus"' %}
+   <br>
+
+3. 应用创建完毕后，进入应用的”设置“(Settings)界面，在”域名“(Domains)输入框中填入你Hexo站点的域名，例如ppoffice.github.io。
+   然后点击页面底部的“保存更改”(Save Changes)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-application-settings.png 360 '"应用设置 - Disqus" "应用设置 - Disqus"' %}
+   <br>
+
+4. 点击当前页面中的“详情”(Details)链接切换到当前应用的主页。
+   从”OAuth设置“(OAuth Settings)部分中复制”API Key“到相应的主题配置项中。
+   
+   例如，下面截图中的”API Key“：
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/disqusjs-api-key.png 360 '"应用详情 - Disqus" "应用详情 - Disqus"' %}
+   <br>
+
+   对应为下面的主题配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
         type: disqusjs
-        shortname: test-usildmkxo
+        shortname: my-hexo-blog-1
         api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
         api: https://disqus.skk.moe/disqus/     # 可选填
         admin: ppoffice                         # 可选填
@@ -147,22 +188,23 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
         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)。
+5. 如要更多了解DisqusJS和它的配置，请访问[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 class="notification is-warning is-size-6">
-此评论插件可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>此评论插件可能会被部分广告拦截扩展拦截，请酌情使用。
 </div>
+</article>
 
 <div>
-<strong>安装指南</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Facebook %}">在线预览</a>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Facebook %}">在线预览</a>
 </div>
 
-1. Facebook的评论服务配置较为简单，仅需在主题配置中将`comment`的`type`设置为`facebook`即可。
+1. 如要开启Facebook评论服务，将`comment`的`type`设置为`facebook`即可。
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -173,25 +215,32 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
 ## Gitalk
 
 <div>
-<strong>安装指南</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Gitalk %}">在线预览</a>
+<strong>安装指南</strong><a class="tag is-success ml-2" 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地址。
+1. 登录GitHub并[点此注册](https://github.com/settings/applications/new)一个新的OAuth应用。
+   填写”应用名称“(Application name)，”应用主页“(Homepage URL)，”应用描述“(Application description)。
+   然后，在”认证回调地址“(Authorization callback URL)填写你的博客的根URL地址。
+   点击“注册应用”(Register application)按钮来跳转到应用详情界面。
 
-2. 点击“注册应用”(Register application)后，在应用详情界面复制Client ID与Client Secret并填入主题配置的相应配置项中。
-   例如，对于下面的Client ID和Client Secret
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-register-application.png 360 '"注册OAuth应用 - GitHub" "注册OAuth应用 - GitHub"' %}
+   <br>
 
-    {% codeblock GitHub OAuth Application %}
+2. 复制”Client ID“与”Client Secret“的值并填入主题配置的相应配置项中。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/gitalk-application-settings.png 360 '"OAuth应用设置 - GitHub" "OAuth应用设置 - GitHub"' %}
+   <br>
+
+   例如，对于下面的”Client ID“和”Client Secret“：
+
+    {% codeblock GitHub OAuth应用 %}
     Client ID
     xxxxxxxxxxxxxxxxxxxx
     Client Secret
     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
     {% endcodeblock %}
 
-   Gitalk在Icarus的配置为
+   对应如下的Gitalk的配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -211,19 +260,24 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
         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)。
+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的评论系统的替代。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>Gitment似乎已停止维护。你可以选择Gitalk或utterances作为基于GitHub Issues的评论系统的替代。
 </div>
+</article>
 
 **安装指南**
 
-1. 参照上面Gitalk中关于注册GitHub OAuth应用的步骤注册应用，并将Client ID与Client Secret并填入主题配置的相应配置项中。
+1. 参照Gitalk中的步骤注册GitHub OAuth应用。
+
+2. 复制”Client ID“与”Client Secret“的值到主题配置的相应配置项中。
+
    下面是Gitment的示例配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
@@ -238,21 +292,21 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
         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)。
+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服务端程序。
+如果你希望自己搭建一个评论系统而不是依赖第三方的评论服务时，Isso是一个可行的选择。
+然而，不同于第三方评论系统，你需要准备一个Web服务器用来运行Isso服务端程序。
 
 **安装指南**
 
-1. 请参照[Isso官方文档](https://posativ.org/isso/docs/install/)安装并启动Isso服务。
+1. 请参照[Isso文档](https://posativ.org/isso/docs/install/)安装并启动Isso服务器。
 
-2. 编辑主题配置文件并填入Isso服务的HTTP URL。例如，你的Isso服务地址为https://posativ.org/isso/api/，
-   则需在主题评论配置填写为：
+2. 将Isso服务器的HTTP URL填入到主题配置的相应配置项中。
+   例如，如果你的Isso服务地址为`https://posativ.org/isso/api/`，你会有如下的评论配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -263,26 +317,60 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
 
 ## LiveRe
 
-<div class="notification is-warning is-size-6">
-此评论插件可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>此评论插件可能会被部分广告拦截扩展拦截，请酌情使用。
 </div>
+</article>
 
 <div>
-<strong>安装指南</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
 </div>
 
-1. 首先，注册并登录[LiveRe](https://livere.com/)。登录后，点击导航栏上的“安装”(Install)链接，进入安装界面。
+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代码页面。
+2. 选择免费”City“选项下方的“现在安装”(Install Now)按钮。
 
-3. 复制代码中`data-uid="..."`引号内的编号，填写到主题配置中的相应选项中。例如，下方的LiveRe代码
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-select-plan.png 360 '"选择付费方案 - LiveRe" "选择付费方案 - LiveRe"' %}
+   <br>
 
-   ![LiveRe - Install](/hexo-theme-icarus/gallery/screenshots/livere-code.png)
+3. 在”获取LiveRe City代码“(Get LiveRe City code)页面填写”站点地址“(Site URL)，”网站名称“(Name of website)，
+   和”网站类别“(Choose site category)。
+   勾选“同意广告协议”(I have check the advertising terms...)并点击”获取代码“(Get code)按钮来跳转到LiveRe HTML代码页面。
 
-   对应的主题配置为
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-configure-service.png 360 '"配置服务 - LiveRe" "配置服务 - LiveRe"' %}
+   <br>
+
+4. 复制`data-uid="..."`引号内的值到主题配置中的相应配置项中。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/livere-get-code.png 360 '"获取代码 - LiveRe" "获取代码 - LiveRe"' %}
+   <br>
+
+   例如，下方的LiveRe代码：
+
+   {% codeblock "LiveRe安装代码" 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 %}
+
+   对应的主题配置为：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -291,21 +379,51 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
     {% endcodeblock %}
 
 
-## Utterances
+## utterances
 
 <div>
-<strong>安装指南</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Utterances %}">在线预览</a>
+<strong>安装指南</strong><a class="tag is-success ml-2" 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)。
+2. 访问[GitHub Apps - utterances](https://github.com/apps/utterances)并点击”安装“(Install)。
 
-3. 若安装成功，网页跳转到[utterances官网](https://utteranc.es/)。之后可以阅读页面上的配置项的说明，并按照说明将对应配置值填入到
-   主题配置中。下方为示例配置：
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-github-app.png 360 '"GitHub应用页 - utterances" "GitHub应用页 - utterances"' %}
+   <br>
+
+3. (可选)如果你的账号下有组织账号，在下一页中选择需要安装utterances的用户。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-select-user.png 360 '"选择用户 - utterances" "选择用户 - utterances"' %}
+   <br>
+
+4. 在下一页面选择将utterances安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。
+   然后点击“安装”(Install)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-select-repo.png 360 '"选择仓库 - utterances" "选择仓库 - utterances"' %}
+   <br>
+
+5. 若安装成功，网页将跳转到[utterances官网](https://utteranc.es/)。
+   你可以阅读每个的配置项的说明，并按照配置你的utterances安装。
+   
+6. 完成配置后，转到页面上的”开启utterances“(Enable Utterances)并从utterances的HTML代码中复制属性值到主题配置的对应配置项中。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/utterances-get-code.png 360 '"获取代码 - utterances" "获取代码 - utterances"' %}
+   <br>
+   
+   例如下面的utterances代码：
+
+   {% codeblock "utterances安装代码" 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 %}
+
+   对应下面的主题配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -321,14 +439,14 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
 ## Valine
 
 <div>
-<strong>安装指南</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Valine %}">在线预览</a>
+<strong>安装指南</strong><a class="tag is-success ml-2" href="{% post_path demo/comment/Valine %}">在线预览</a>
 </div>
 
-1. 按照Valine官方的[快速开始文档](https://valine.js.org/quickstart.html)创建LeanCloud应用。
+1. 按照[快速开始文档](https://valine.js.org/quickstart.html)创建LeanCloud应用。
 
-2. 将App ID和App Key复制并填入主题配置的对应配置项中，并按照官方网站上的[配置项](https://valine.js.org/configuration.html)
-   说明按需填写其他配置项。下面是示例配置：
+2. 将你LeanCloud应用的”App ID“和”App Key“复制到主题配置的对应配置项中。
+   此外，你可以参考[配置项](https://valine.js.org/configuration.html)来了解可选配置项的详情和可能的配置值。
+   下面是示例配置：
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     comment:
@@ -348,6 +466,8 @@ Gitment项目似乎已停止维护，建议使用Gitalk或utterances作为基于
     {% 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>提交修改。
+<article class="message message-immersive is-warning">
+<div class="message-body">
+<i class="fas fa-question-circle mr-2"></i>文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Comment-Plugins.md">此处</a>提交修改。
 </div>
+</article>