chore(doc): update en web analytics doc

source/_posts/en/Share-Buttons.md

@@ -12,7 +12,7 @@ share:
     install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e8fc96750876c7d
 ---
 
-This article covers some share buttons supported by Icarus 3.
+This article covers share buttons supported by Icarus 3.
 
 <article class="message message-immersive is-primary">
 <div class="message-body">

source/_posts/en/Web-Analytics-Plugins.md

@@ -9,38 +9,51 @@ language: en
 toc: true
 ---
 
-<div class="notification is-success is-size-6">
+This article covers web analytics plugins supported by Icarus 3.
-This article is also available in: <a href="{% post_path zh-CN/Web-Analytics-Plugins %}">简体中文</a>.
-</div>
 
-This article covers some web analytics 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/Web-Analytics-Plugins %}">简体中文</a>.
+</div>
+</article>
 
 <!-- more -->
 
-<div class="notification is-link is-size-6">
+<article class="message message-immersive is-primary">
-
+<div class="message-body">
-The web analytics plugins of Icarus are provided by
+<i class="fas fa-info-circle mr-2"></i>The following web analytics plugins are provided by
-[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
+<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 configurations.
+Please refer to it for a complete list of supported plugins and their configuration details.
-
 </div>
+</article>
 
-<div class="notification is-warning is-size-6">
+<article class="message message-immersive is-danger">
-All plugins mentioned in this article may be blocked by some ad blocking browser extensions.
+<div class="message-body">
-Please use with caution.
+<i class="fas fa-exclamation-triangle mr-2"></i>All plugins mentioned below may be blocked by AD blockers.
+Use them with caution.
 </div>
+</article>
 
 ## Baidu Statistics
 
 **Installation Guide**
 
-1. Log into [Baidu Statistics](https://tongji.baidu.com). Click the "Add new website" button on the "site list" page
+1. Log into [Baidu Statistics](https://tongji.baidu.com).
+   Click the "Add new website" button on the "Admin > Site list" page
    and fill in the site information such as name and homepage URL.
    Click "OK" to complete site creation.
 
-2. On the next page find the ID behind `hm.baidu.com/hm.js?` within the quotes and set it as the value of 
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/baidu-analytics-add-site.png 360 '"Add Site - Baidu Analytics" "Add Site - Baidu Analytics"' %}
-   `plugins` > `baidu_analytics` > `tracking_id` in the theme's configuration file.
+   <br>
-   For example, the following Baidu Statistics code
+
+2. On the next page, find the ID behind `hm.baidu.com/hm.js?` and set it as the value of 
+   `plugins` > `baidu_analytics` > `tracking_id` in the theme configurations.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/baidu-analytics-get-code.png 360 '"Get Code - Baidu Analytics" "Get Code - Baidu Analytics"' %}
+   <br>
+
+   For example, the following Baidu Statistics code:
 
     {% codeblock "Baidu Statistics code" lang:html %}
     <script>
@@ -54,7 +67,7 @@ Please use with caution.
     </script>
     {% endcodeblock %}
 
-    can be mapped to the following theme configuration
+    maps to the following theme configuration:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     plugins:
@@ -67,8 +80,8 @@ Please use with caution.
 
 **Installation Guide**
 
-1. Set the `plugins` > `busuanzi` to `true` to enable BuSuanZi web counter and display visitor count on the bottom of the 
+1. Set the `plugins` > `busuanzi` to `true` to enable [BuSuanZi web counter](https://busuanzi.ibruce.info/) 
-   page and header of each blog post.
+   and display the number of visitors on the header of each blog post and the bottom of the page.
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     plugins:
@@ -80,19 +93,28 @@ Please use with caution.
 
 **Installation Guide**
 
-1. Log into [Umeng+](https://www.umeng.com/). On the dashboard of Umeng+, click "Create new application" > "Web application"
+1. Log into [Umeng+](https://www.umeng.com/). 
-   and fill in site information such as "website name", "site domain name", and "site homepage URL".
+   On the dashboard of Umeng+, click "Create new application" > "Web application".
-   Click "Confirm adding the site".
+   Then, fill in your site information such as "website name", "site domain name", and "site homepage URL".
+   Click "Confirm adding the site" after finished.
 
-2. Find the HTML code in the "text style" row on the get installation code page and copy the values of `id` and `web_id`
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/cnzz-add-site.png 360 '"Add Site - CNZZ" "Add Site - CNZZ"' %}
-   to the `plugins` > `cnzz` > `id` and `web_id` in the theme's configuration file respectively.
+   <br>
-   For example, the following CNZZ installation code
+
+2. Find the HTML code in the "text style" row on the get installation code page.
+   Copy the values of `id` and `web_id` to the `plugins` > `cnzz` > `id` and `web_id` in the theme configurations, 
+   respectively.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/cnzz-get-code.png 360 '"Get Code - CNZZ" "Get Code - CNZZ"' %}
+   <br>
+
+   For example, the following CNZZ installation code:
 
     {% codeblock "CNZZ installation code" lang:html %}
     <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=123456789000&web_id=123456789000"></script>
     {% endcodeblock %}
 
-    can be mapped to the following theme configuration
+    maps to the following theme configuration:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     plugins:
@@ -108,14 +130,25 @@ Please use with caution.
 
 1. Log into [Google Analytics](https://analytics.google.com/) and click the "Admin" on the left side of the user dashboard.
 
-2. On the admin page, click the "Create Property" button and set "What do you want to measure?" to Web.
+2. On the admin page, click the "Create Property" button and set "What do you want to measure?" to "Web".
    Click the "Continue" button after that.
-   Then, fill in the Website Name, Website URL, Industry Category, and Reporting Time Zone.
-   Click the "Create" button to finish property creation.
 
-3. Find the value of "Tracking ID", e.g., "UA-12345678-0", on the "Tracking Code" page. Set it to the `plugins` > 
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-create-property.png 360 '"Create Property - Google Analytics" "Create Property - Google Analytics"' %}
+   <br>
+
+3. Then, fill in the Website Name, Website URL, Industry Category, and Reporting Time Zone.
+   Click the "Create" button to finish the property creation.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-property-setup.png 360 '"Property Setup - Google Analytics" "Property Setup - Google Analytics"' %}
+   <br>
+
+3. Find the value of "Tracking ID", e.g., "UA-12345678-0", on the "Tracking Code" page. 
+   Set it to the `plugins` > 
    `google_analytics` > `tracking_id` in the theme's configuration file to enable the Google Analytics plugin.
 
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-get-code.png 360 '"Get Code - Google Analytics" "Get Code - Google Analytics"' %}
+   <br>
+
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     plugins:
         google_analytics:
@@ -131,9 +164,20 @@ Please use with caution.
 
 2. Fill in the "WEBSITE", "SITE TYPE", and "SITE OWNER", then click the "Add Site" button.
 
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-new-site.png 360 '"New Site - Hotjar" "New Site - Hotjar"' %}
+   <br>
+
 3. Find the newly created site on the "Sites & Organizations" page you have been redirected to.
-   Click the "Tracking Code" button on the right and copy the value of "Site ID" (e.g., 1234567) from the popup dialog.
+   Click the "Tracking Code" button on the right.
-   Finally, copy it to `plugins` > `hotjar` > `site_id` in the theme's configuration file to enable the Hotjar plugin.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-site-list.png 360 '"Site List - Hotjar" "Site List - Hotjar"' %}
+   <br>
+   
+4. Copy the value of "Site ID" (e.g., 1234567) from the popup dialog to `plugins` > `hotjar` > `site_id` in the theme configurations 
+   to enable the Hotjar plugin.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-get-code.png 360 '"Get Code - Hotjar" "Get Code - Hotjar"' %}
+   <br>
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     plugins:
@@ -142,6 +186,10 @@ Please use with caution.
     {% endcodeblock %}
 
 
-<div class="notification is-warning is-size-6">
+<article class="message message-immersive is-warning">
-Something wrong with this article? Click <a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/en//Web-Analytics-Plugins.md">here</a> to submit your revision.
+<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/Web-Analytics-Plugins.md">here</a> 
+to submit your revision.
 </div>
+</article>