chore(doc): update en share buttons doc

source/_posts/en/Search-Plugins.md

@@ -31,8 +31,7 @@ Please refer to it for a complete list of supported plugins and their configurat
 ## Algolia
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/search/Algolia %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/search/Algolia %}">Preview</a>
 </div>
 
 1. Install the [hexo-algolia](https://github.com/oncletom/hexo-algolia) plugin under the root directory of your
@@ -42,14 +41,14 @@ Please refer to it for a complete list of supported plugins and their configurat
    Click the "Create Index" button on the dashboard when you log in for the first time.
    Then, enter the name of the index and click the "Create" button to complete index creation.
 
-   {% img "box ml-auto mr-auto" /gallery/screenshots/algolia-create-index.png 360 '"Create Index - Algolia" "Create Index - Algolia"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/algolia-create-index.png 360 '"Create Index - Algolia" "Create Index - Algolia"' %}
    <br>
 
 3. Next, click "API Keys" on the left navigation bar, copy "Application ID" and "Search-Only API Key" on the page.
    Open site configuration file `_config.yml` under the root directory of your Hexo site and fill in the above 
    information to the hexo-algolia plugin configurations.
 
-   {% img "box ml-auto mr-auto" /gallery/screenshots/algolia-api-keys.png 360 '"API Keys - Algolia" "API Keys - Algolia"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/algolia-api-keys.png 360 '"API Keys - Algolia" "API Keys - Algolia"' %}
    <br>
 
    For example, the following Aloglia index information:
@@ -76,7 +75,7 @@ Please refer to it for a complete list of supported plugins and their configurat
    Click the "Create" button to finish key creation.
    Copy the API key you just created, e.g., `727fbd8c998fe419318fa350db6793ca`.
 
-   {% img "box ml-auto mr-auto" /gallery/screenshots/algolia-create-api-key.png 360 '"Create API Key - Algolia" "Create API Key - Algolia"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/algolia-create-api-key.png 360 '"Create API Key - Algolia" "Create API Key - Algolia"' %}
    <br>
 
 5. Open a Windows Command Prompt (CMD) or Linux/macOS terminal and change the working directory to the root
@@ -128,8 +127,7 @@ Please refer to it for a complete list of supported plugins and their configurat
 ## Google Custom Search Engine (CSE)
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/search/Google-CSE %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/search/Google-CSE %}">Preview</a>
 </div>
 
 1. Log into your Google account and visit [Google CSE](https://cse.google.com/cse/create/new) to create a CSE.
@@ -138,13 +136,13 @@ Please refer to it for a complete list of supported plugins and their configurat
    Then, fill in the "Name of the search engine". 
    Click the "Create" button to finish engine creation.
 
-   {% img "box ml-auto mr-auto" /gallery/screenshots/google-cse-create.png 360 '"Create Custom Search - Google CSE" "Create Custom Search - Google CSE"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-cse-create.png 360 '"Create Custom Search - Google CSE" "Create Custom Search - Google CSE"' %}
    <br>
 
 2. Then, click the "Get code" button on the right side of "Add it to your site". Copy the value of `cx` to the 
    search settings in your theme's configuration file.
 
-   {% img "box ml-auto mr-auto" /gallery/screenshots/google-cse-code.png 360 '"Get Code - Google CSE" "Get Code - Google CSE"' %}
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-cse-code.png 360 '"Get Code - Google CSE" "Get Code - Google CSE"' %}
    <br>
 
    For example, the following HTML code:

source/_posts/en/Share-Buttons.md

@@ -12,53 +12,68 @@ share:
     install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e8fc96750876c7d
 ---
 
-<div class="notification is-success is-size-6">
-This article is also available in: <a href="{% post_path zh-CN/Share-Buttons %}">简体中文</a>.
-</div>
-
 This article covers some share buttons 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/Share-Buttons %}">简体中文</a>.
+</div>
+</article>
+
 <!-- more -->
 
-
-<div class="notification is-link is-size-6">
-
-The share button feature of Icarus is provided by
-[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
-Please refer to it for a complete list of supported buttons 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 share buttons 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>
 
 
 ## AddThis
 
-<div class="notification is-warning is-size-6">
-This share button service 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 share button service.
+Use it with caution.
 </div>
+</article>
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddThis %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/AddThis %}">Preview</a>
 </div>
 
-1. Register for [AddThis](https://www.addthis.com/). Select the "Share Buttons" on the "Select a Tool" page 
-   during your first registration.
+1. Register for [AddThis](https://www.addthis.com/). 
+   Select the "Share Buttons" on the "Select a Tool" page after submitting the registration form.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool.png 360 '"Select Tool - AddThis" "Select Tool - AddThis"' %}
+   <br>
 
 2. Select the style and buttons on the "Select a Tool Type" page and click "Continue".
 
-3. Make further style and behavior customizations on the next page and click "Activate Tool" button when you
-   finish.
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool-type.png 360 '"Select Tool Type - AddThis" "Select Tool Type - AddThis"' %}
+   <br>
 
-4. Find the HTML code from the get the code page, copy the URL in the `src` attribute and fill it into the 
-   corresponding theme configuration option. For example, the URL in the following AddThis code
+3. Make further customizations on the next page and click the "Activate Tool" button when finished.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-customize-share.png 360 '"Customize Share Buttons - AddThis" "Customize Share Buttons - AddThis"' %}
+   <br>
+
+4. Find the HTML code from the "Get The Code" page, copy the URL in the `src` attribute to the share button configuration. 
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-get-code.png 360 '"Get Code - AddThis" "Get Code - AddThis"' %}
+   <br>
+   
+   For example, the URL in the following AddThis code:
 
     {% codeblock "AddThis Code" lang:html %}
     <!-- Go to www.addthis.com/dashboard to customize your tools -->
     <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx"></script>
     {% endcodeblock %}
 
-    is copied to this theme configuration
+    maps to the following theme configuration:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     share:
@@ -70,24 +85,43 @@ Please use with caution.
 ## AddToAny
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddToAny %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/AddToAny %}">Preview</a>
 </div>
 
-1. You can activate AddToAny without registering an user account
+1. You can activate AddToAny without user registration.
+   Just put the following code to your theme configurations:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     share:
         type: addtoany
     {% endcodeblock %}
 
-2. (Optional) If you want to further customize the share buttons, please visit [AddToAny](https://www.addtoany.com/)
-   official site and click on the "Get the Share Button" button.
-   Then, select "Any Website" and complete the configuration of the buttons.
-   Click "Get Button Code" after you finish.
-   For example, this is the default code you can get from AddToAny:
+Take the following steps if you want to customize the share buttons:
 
-    {% codeblock "AddToAny Code" lang:html %}
+1. Visit [AddToAny](https://www.addtoany.com/)
+   official site and click on the "Get the Share Button".
+
+2. Then, select "Any Website" and complete the configuration of the buttons.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-select-platform.png 360 '"Select Platform - AddToAny" "Select Platform - AddToAny"' %}
+   <br>
+
+3. Click "Get Button Code" after you finish.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-get-code.png 360 '"Get Code - AddToAny" "Get Code - AddToAny"' %}
+   <br>
+
+4. Since the share buttons of Icarus is provided by 
+   [ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno),
+   You need to copy the layout file 
+   ([src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)) 
+   of AddToAny from this repository
+   to `themes/icarus/layout/share/addtoany.jsx`.
+   Then, replace the AddToAny code in `addtoany.jsx` and fix the package import in the file header.
+
+   For example, assume the following code is what you get from the last step:
+
+    {% codeblock "AddToAny Code" lang:html >folded %}
     <!-- AddToAny BEGIN -->
     <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
     <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
@@ -99,16 +133,9 @@ Please use with caution.
     <!-- AddToAny END -->
     {% endcodeblock %}
 
-    Since the share buttons of this Hexo theme is provided by 
-    [ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno),
-    You will need to copy the view files in it to the corresponding directory under this theme if you wish to
-    do the customizations. For example, we shall copy 
-    [src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)
-    to `themes/icarus/layout/share/` before we modify the file.
-    Then, we need to correct the `require` path in the file and replace old HTML code in that file with the HTML 
-    from above.
+    You should make the following changes to `addtoany.jsx`:
 
-    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff %}
+    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff >folded %}
     const { Component, Fragment } = require('inferno');
     - const { cacheComponent } = require('../../util/cache');
     + const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
@@ -118,16 +145,23 @@ Please use with caution.
     class AddToAny extends Component {
         render() {
             return <Fragment>
-    -            <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
-    -                <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
-    -                <a class="a2a_button_facebook"></a>
-    -                <a class="a2a_button_twitter"></a>
-    -                <a class="a2a_button_telegram"></a>
-    -                <a class="a2a_button_whatsapp"></a>
-    -                <a class="a2a_button_reddit"></a>
-    -            </div>
-    +           AddToAny HTML code you just got
-                <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
+    -           <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
+    -               <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
+    -               <a class="a2a_button_facebook"></a>
+    -               <a class="a2a_button_twitter"></a>
+    -               <a class="a2a_button_telegram"></a>
+    -               <a class="a2a_button_whatsapp"></a>
+    -               <a class="a2a_button_reddit"></a>
+    -           </div>
+    -           <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
+    +           <!-- AddToAny HTML code you just got... -->
+    +           <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
+    +               <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
+    +               <a class="a2a_button_facebook"></a>
+    +               <a class="a2a_button_twitter"></a>
+    +               <a class="a2a_button_email"></a>
+    +           </div>
+    +           <script async src="https://static.addtoany.com/menu/page.js"></script>
             </Fragment>;
         }
     }
@@ -138,22 +172,26 @@ Please use with caution.
 
 ## Baidu Share
 
-<div class="notification is-warning is-size-6">
-This share button service 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 share button service.
+Use it with caution.
 </div>
+</article>
 
-<div class="notification is-warning is-size-6">
-The Baidu share button service seems to be no longer maintained.
-Please use to other services as alternatives.
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>The Baidu share button service seems to be no longer maintained.
+Use other services as alternatives.
 </div>
+</article>
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/BaiduShare %}">Preview</a>
 </div>
 
-1. You can activate Baidu Share without registering an user account
+1. You can activate Baidu Share without user registration.
+   Just put the following code to your theme configurations:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     share:
@@ -163,24 +201,26 @@ Please use to other services as alternatives.
 
 ## Share.js
 
-<div class="notification is-warning is-size-6">
-The Share.js button service is no longer maintained.
-Please use to other services as alternatives.
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>The Share.js button service is no longer maintained.
+Use other services as alternatives.
 </div>
+</article>
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/Sharejs %}">Preview</a>
 </div>
 
-1. You can activate Share.js without registering an user account
+1. You can activate Share.js without user registration.
+   Just put the following code to your theme configurations:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     share:
         type: sharejs
     {% endcodeblock %}
 
-2. (Optional) Please refer to the second step in [AddToAny](#AddToAny) installation guide and the 
+2. (Optional) Please refer to the customization steps in the [AddToAny](#AddToAny) section and the 
    [share.js homepage](https://github.com/overtrue/share.js) for information about customizing the share
    buttons.
 
@@ -188,27 +228,38 @@ Please use to other services as alternatives.
 ## ShareThis
 
 <div>
-<strong>Installation Guide</strong>
-<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/ShareThis %}">Preview</a>
+<strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/ShareThis %}">Preview</a>
 </div>
 
-1. Visit [ShareThis](https://sharethis.com/) and click "Start with Share Buttons" button on the page.
+1. Visit [ShareThis](https://sharethis.com/) and click the "Start with Share Buttons" button on the page.
 
 2. Select the type of buttons you need on the "Choose type of sharing button" page.
+   Don't enable the "GDPR compliance tool" since it may cause issues.
    You can also make advanced adjustments by clicking the "Customize your share buttons" link.
    Click "Next" when you are done.
 
-3. Select "HTML" and the "Next" button on the "Register and get the code!" page.
-   Enter your email and password to finish the registration for ShareThis.
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-button-type.png 360 '"Choose Button Type - ShareThis" "Choose Button Type - ShareThis"' %}
+   <br>
 
-4. Finally, copy the `src` URL from the HTML code fragment on the page and put it to the corresponding
-   theme configuration option. For example, the URL from the following ShareThis code
+2. Select "HTML" on the "Choose your CMS platform" page and click "Next".
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-platform.png 360 '"Choose Platform - ShareThis" "Choose Platform - ShareThis"' %}
+   <br>
+
+3. Enter your email and password to finish the registration for ShareThis on the "Register and get the code!" page.
+
+4. Finally, copy the `src` URL from the HTML code fragment to the share button configuration.
+   
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-get-code.png 360 '"Get Code - ShareThis" "Get Code - ShareThis"' %}
+   <br>
+   
+   For example, the following ShareThis code:
 
     {% codeblock "AddThis Code" lang:html %}
     <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons" async="async"></script>
     {% endcodeblock %}
 
-    is copied to this theme configuration
+    maps to the following theme configuration:
 
     {% codeblock themes/icarus/_config.yml lang:yaml %}
     share:
@@ -217,6 +268,10 @@ Please use to other services as alternatives.
     {% 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/Share-Buttons.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/Share-Buttons.md">here</a> 
+to submit your revision.
 </div>
+</article>