-
-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.
-
+
-This share button service may be blocked by some ad blocking browser extensions.
-Please use with caution.
+
+
+Some AD blockers may block this share button service.
+Use it with caution.
+
-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"' %}
+
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"' %}
+
-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"' %}
+
+
+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"' %}
+
+
+ For example, the URL in the following AddThis code:
{% codeblock "AddThis Code" lang:html %}
{% 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
-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"' %}
+
+
+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"' %}
+
+
+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 %}
@@ -99,16 +133,9 @@ Please use with caution.
{% 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
- -
- -
- -
- -
- -
- -
- -
- -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
;
}
}
@@ -138,22 +172,26 @@ Please use with caution.
## Baidu Share
-
-This share button service may be blocked by some ad blocking browser extensions.
-Please use with caution.
+
+
+Some AD blockers may block this share button service.
+Use it with caution.
+
-
-The Baidu share button service seems to be no longer maintained.
-Please use to other services as alternatives.
+
+
+The Baidu share button service seems to be no longer maintained.
+Use other services as alternatives.
+
-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
-
-The Share.js button service is no longer maintained.
-Please use to other services as alternatives.
+
+
+The Share.js button service is no longer maintained.
+Use other services as alternatives.
+
-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
-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"' %}
+
-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"' %}
+
+
+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"' %}
+
+
+ For example, the following ShareThis code:
{% codeblock "AddThis Code" lang:html %}
{% 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 %}
-
-Something wrong with this article? Click
here to submit your revision.
+
+
+
Something wrong with this article?
+Click
here
+to submit your revision.
diff --git a/source/gallery/screenshots/addthis-customize-share.png b/source/gallery/screenshots/addthis-customize-share.png
new file mode 100644
index 0000000..ff945e9
Binary files /dev/null and b/source/gallery/screenshots/addthis-customize-share.png differ
diff --git a/source/gallery/screenshots/addthis-get-code.png b/source/gallery/screenshots/addthis-get-code.png
new file mode 100644
index 0000000..4655601
Binary files /dev/null and b/source/gallery/screenshots/addthis-get-code.png differ
diff --git a/source/gallery/screenshots/addthis-select-tool-type.png b/source/gallery/screenshots/addthis-select-tool-type.png
new file mode 100644
index 0000000..b3016bb
Binary files /dev/null and b/source/gallery/screenshots/addthis-select-tool-type.png differ
diff --git a/source/gallery/screenshots/addthis-select-tool.png b/source/gallery/screenshots/addthis-select-tool.png
new file mode 100644
index 0000000..843722f
Binary files /dev/null and b/source/gallery/screenshots/addthis-select-tool.png differ
diff --git a/source/gallery/screenshots/addtoany-get-code.png b/source/gallery/screenshots/addtoany-get-code.png
new file mode 100644
index 0000000..0d2f8b5
Binary files /dev/null and b/source/gallery/screenshots/addtoany-get-code.png differ
diff --git a/source/gallery/screenshots/addtoany-select-platform.png b/source/gallery/screenshots/addtoany-select-platform.png
new file mode 100644
index 0000000..964b15b
Binary files /dev/null and b/source/gallery/screenshots/addtoany-select-platform.png differ
diff --git a/source/gallery/screenshots/sharethis-choose-button-type.png b/source/gallery/screenshots/sharethis-choose-button-type.png
new file mode 100644
index 0000000..4f579c3
Binary files /dev/null and b/source/gallery/screenshots/sharethis-choose-button-type.png differ
diff --git a/source/gallery/screenshots/sharethis-choose-platform.png b/source/gallery/screenshots/sharethis-choose-platform.png
new file mode 100644
index 0000000..818bffd
Binary files /dev/null and b/source/gallery/screenshots/sharethis-choose-platform.png differ
diff --git a/source/gallery/screenshots/sharethis-get-code.png b/source/gallery/screenshots/sharethis-get-code.png
new file mode 100644
index 0000000..a6e853a
Binary files /dev/null and b/source/gallery/screenshots/sharethis-get-code.png differ