chore(doc): update en share buttons doc

pull/729/head
ppoffice 2020-05-03 01:56:50 -04:00
parent cdcaf94efa
commit 49e7530ed3
11 changed files with 139 additions and 86 deletions

View File

@ -31,8 +31,7 @@ Please refer to it for a complete list of supported plugins and their configurat
## Algolia ## Algolia
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/search/Algolia %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/search/Algolia %}">Preview</a>
</div> </div>
1. Install the [hexo-algolia](https://github.com/oncletom/hexo-algolia) plugin under the root directory of your 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. 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. 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> <br>
3. Next, click "API Keys" on the left navigation bar, copy "Application ID" and "Search-Only API Key" on the page. 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 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. 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> <br>
For example, the following Aloglia index information: 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. Click the "Create" button to finish key creation.
Copy the API key you just created, e.g., `727fbd8c998fe419318fa350db6793ca`. 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> <br>
5. Open a Windows Command Prompt (CMD) or Linux/macOS terminal and change the working directory to the root 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) ## Google Custom Search Engine (CSE)
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/search/Google-CSE %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/search/Google-CSE %}">Preview</a>
</div> </div>
1. Log into your Google account and visit [Google CSE](https://cse.google.com/cse/create/new) to create a CSE. 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". Then, fill in the "Name of the search engine".
Click the "Create" button to finish engine creation. 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> <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 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. 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> <br>
For example, the following HTML code: For example, the following HTML code:

View File

@ -12,53 +12,68 @@ share:
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e8fc96750876c7d 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. 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 --> <!-- more -->
<article class="message message-immersive is-primary">
<div class="notification is-link is-size-6"> <div class="message-body">
<i class="fas fa-info-circle mr-2"></i>The following share buttons are provided by
The share button feature of Icarus is provided by <a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno). Please refer to it for a complete list of supported plugins and their configuration details.
Please refer to it for a complete list of supported buttons and their configurations.
</div> </div>
</article>
## AddThis ## AddThis
<div class="notification is-warning is-size-6"> <article class="message message-immersive is-danger">
This share button service 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>Some AD blockers may block this share button service.
Use it with caution.
</div> </div>
</article>
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/AddThis %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddThis %}">Preview</a>
</div> </div>
1. Register for [AddThis](https://www.addthis.com/). Select the "Share Buttons" on the "Select a Tool" page 1. Register for [AddThis](https://www.addthis.com/).
during your first registration. 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". 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 {% 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"' %}
finish. <br>
4. Find the HTML code from the get the code page, copy the URL in the `src` attribute and fill it into the 3. Make further customizations on the next page and click the "Activate Tool" button when finished.
corresponding theme configuration option. For example, the URL in the following AddThis code
{% 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 %} {% codeblock "AddThis Code" lang:html %}
<!-- Go to www.addthis.com/dashboard to customize your tools --> <!-- 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> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx"></script>
{% endcodeblock %} {% endcodeblock %}
is copied to this theme configuration maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %} {% codeblock themes/icarus/_config.yml lang:yaml %}
share: share:
@ -70,24 +85,43 @@ Please use with caution.
## AddToAny ## AddToAny
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/AddToAny %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddToAny %}">Preview</a>
</div> </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 %} {% codeblock themes/icarus/_config.yml lang:yaml %}
share: share:
type: addtoany type: addtoany
{% endcodeblock %} {% endcodeblock %}
2. (Optional) If you want to further customize the share buttons, please visit [AddToAny](https://www.addtoany.com/) Take the following steps if you want to customize the share buttons:
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:
{% 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 --> <!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <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_dd" href="https://www.addtoany.com/share"></a>
@ -99,16 +133,9 @@ Please use with caution.
<!-- AddToAny END --> <!-- AddToAny END -->
{% endcodeblock %} {% endcodeblock %}
Since the share buttons of this Hexo theme is provided by You should make the following changes to `addtoany.jsx`:
[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.
{% 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 { Component, Fragment } = require('inferno');
- const { cacheComponent } = require('../../util/cache'); - const { cacheComponent } = require('../../util/cache');
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache'); + const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
@ -118,16 +145,23 @@ Please use with caution.
class AddToAny extends Component { class AddToAny extends Component {
render() { render() {
return <Fragment> return <Fragment>
- <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> - <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_dd" href="https://www.addtoany.com/share"></a>
- <a class="a2a_button_facebook"></a> - <a class="a2a_button_facebook"></a>
- <a class="a2a_button_twitter"></a> - <a class="a2a_button_twitter"></a>
- <a class="a2a_button_telegram"></a> - <a class="a2a_button_telegram"></a>
- <a class="a2a_button_whatsapp"></a> - <a class="a2a_button_whatsapp"></a>
- <a class="a2a_button_reddit"></a> - <a class="a2a_button_reddit"></a>
- </div> - </div>
+ AddToAny HTML code you just got - <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
<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>; </Fragment>;
} }
} }
@ -138,22 +172,26 @@ Please use with caution.
## Baidu Share ## Baidu Share
<div class="notification is-warning is-size-6"> <article class="message message-immersive is-danger">
This share button service 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>Some AD blockers may block this share button service.
Use it with caution.
</div> </div>
</article>
<div class="notification is-warning is-size-6"> <article class="message message-immersive is-danger">
The Baidu share button service seems to be no longer maintained. <div class="message-body">
Please use to other services as alternatives. <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> </div>
</article>
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/BaiduShare %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">Preview</a>
</div> </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 %} {% codeblock themes/icarus/_config.yml lang:yaml %}
share: share:
@ -163,24 +201,26 @@ Please use to other services as alternatives.
## Share.js ## Share.js
<div class="notification is-warning is-size-6"> <article class="message message-immersive is-danger">
The Share.js button service is no longer maintained. <div class="message-body">
Please use to other services as alternatives. <i class="fas fa-exclamation-triangle mr-2"></i>The Share.js button service is no longer maintained.
Use other services as alternatives.
</div> </div>
</article>
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/Sharejs %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">Preview</a>
</div> </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 %} {% codeblock themes/icarus/_config.yml lang:yaml %}
share: share:
type: sharejs type: sharejs
{% endcodeblock %} {% 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 [share.js homepage](https://github.com/overtrue/share.js) for information about customizing the share
buttons. buttons.
@ -188,27 +228,38 @@ Please use to other services as alternatives.
## ShareThis ## ShareThis
<div> <div>
<strong>Installation Guide</strong> <strong>Installation Guide</strong><a class="tag is-success ml-2" href="{% post_path demo/share/ShareThis %}">Preview</a>
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/ShareThis %}">Preview</a>
</div> </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. 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. You can also make advanced adjustments by clicking the "Customize your share buttons" link.
Click "Next" when you are done. Click "Next" when you are done.
3. Select "HTML" and the "Next" button on the "Register and get the code!" page. {% 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"' %}
Enter your email and password to finish the registration for ShareThis. <br>
4. Finally, copy the `src` URL from the HTML code fragment on the page and put it to the corresponding 2. Select "HTML" on the "Choose your CMS platform" page and click "Next".
theme configuration option. For example, the URL from the following ShareThis code
{% 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 %} {% 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> <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons" async="async"></script>
{% endcodeblock %} {% endcodeblock %}
is copied to this theme configuration maps to the following theme configuration:
{% codeblock themes/icarus/_config.yml lang:yaml %} {% codeblock themes/icarus/_config.yml lang:yaml %}
share: share:
@ -217,6 +268,10 @@ Please use to other services as alternatives.
{% endcodeblock %} {% 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/Share-Buttons.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/Share-Buttons.md">here</a>
to submit your revision.
</div> </div>
</article>

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB