feat(doc): add zh-CN & en share button user guide
parent
92be85f8b7
commit
177a64278c
|
@ -6,8 +6,12 @@ comment:
|
|||
type: facebook
|
||||
---
|
||||
|
||||
<div class="notification is-warning">
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
Please turn off your ad blockers if you do not see the comment section.
|
||||
</div>
|
||||
|
|
|
@ -7,8 +7,12 @@ comment:
|
|||
uid: MTAyMC8zNTExMS8xMTY0Ng==
|
||||
---
|
||||
|
||||
<div class="notification is-warning">
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
Please turn off your ad blockers if you do not see the comment section.
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
title: AddThis Share Buttons
|
||||
date: 2014-01-01
|
||||
tags:
|
||||
- Demo
|
||||
share:
|
||||
type: addthis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ab6fa5759854232
|
||||
---
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
Please turn off your ad blockers if you do not see the buttons.
|
||||
</div>
|
|
@ -0,0 +1,13 @@
|
|||
title: AddToAny Share Buttons
|
||||
date: 2014-01-01
|
||||
tags:
|
||||
- Demo
|
||||
share:
|
||||
type: addtoany
|
||||
---
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
|
@ -0,0 +1,17 @@
|
|||
title: Baidu Share Buttons
|
||||
date: 2014-01-01
|
||||
tags:
|
||||
- Demo
|
||||
share:
|
||||
type: bdshare
|
||||
---
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
Please turn off your ad blockers if you do not see the buttons.
|
||||
</div>
|
|
@ -0,0 +1,14 @@
|
|||
title: ShareThis Share Buttons
|
||||
date: 2014-01-01
|
||||
tags:
|
||||
- Demo
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: //platform-api.sharethis.com/js/sharethis.js#property=5ab6f60ace89f00013641890&product=inline-share-buttons
|
||||
---
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
|
@ -0,0 +1,13 @@
|
|||
title: Share.js Share Buttons
|
||||
date: 2014-01-01
|
||||
tags:
|
||||
- Demo
|
||||
share:
|
||||
type: sharejs
|
||||
---
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
This is for demonstration only.
|
||||
Please report your issues with this plugin to
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
</div>
|
|
@ -44,8 +44,10 @@ donates:
|
|||
...
|
||||
{% endcodeblock %}
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
The donation button feature of Icarus is provided by
|
||||
[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
|
||||
|
@ -53,10 +55,10 @@ Please refer to it for a complete list of supported buttons and their configurat
|
|||
|
||||
</div>
|
||||
|
||||
<!-- more -->
|
||||
|
||||
## Alipay
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
Log into Alipay and export payment QR code. Save the picture to a photo or asset directory
|
||||
of your Hexo website or upload it to an image sharing service.
|
||||
Then, add the following configuration to your theme's configuration file:
|
||||
|
@ -72,6 +74,8 @@ donates:
|
|||
|
||||
## Buy me a Coffee
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
Register for [Buy me a Coffee](https://www.buymeacoffee.com/) and copy the URL to your personal page.
|
||||
Add the following configuration to your theme's configuration file:
|
||||
|
||||
|
@ -85,6 +89,8 @@ donates:
|
|||
|
||||
## Paypal
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
1. Register and log into Paypal, click [here](https://www.paypal.com/donate/buttons/) to make a Paypal donation
|
||||
button.
|
||||
|
||||
|
@ -122,6 +128,8 @@ donates:
|
|||
|
||||
## Patreon
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
Register for [Patreon](https://www.patreon.com/) and copy the URL to your personal page.
|
||||
Add the following configuration to your theme's configuration file:
|
||||
|
||||
|
@ -135,6 +143,8 @@ donate:
|
|||
|
||||
## WeChat
|
||||
|
||||
**Installation Guide**
|
||||
|
||||
Log into WeChat and export payment QR code. Save the picture to a photo or asset directory
|
||||
of your Hexo website or upload it to an image sharing service.
|
||||
Then, add the following configuration to your theme's configuration file:
|
||||
|
|
|
@ -0,0 +1,222 @@
|
|||
title: Icarus User Guide - Share Buttons
|
||||
date: 2017-01-31
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
tags:
|
||||
- Icarus User Guide
|
||||
language: en
|
||||
toc: true
|
||||
share:
|
||||
type: sharethis
|
||||
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.
|
||||
|
||||
<!-- 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.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 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.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" 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.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
{% 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
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: addthis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## AddToAny
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddToAny %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. You can activate AddToAny without registering an user account
|
||||
|
||||
{% 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:
|
||||
|
||||
{% codeblock "AddToAny Code" lang:html %}
|
||||
<!-- AddToAny BEGIN -->
|
||||
<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>
|
||||
<!-- 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.
|
||||
|
||||
{% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff %}
|
||||
const { Component, Fragment } = require('inferno');
|
||||
- const { cacheComponent } = require('../../util/cache');
|
||||
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
|
||||
|
||||
...Some code is skipped here...
|
||||
|
||||
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>
|
||||
</Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
...The following code is skipped here...
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 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.
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. You can activate Baidu Share without registering an user account
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: bdshare
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 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.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">Preview</a>
|
||||
</div>
|
||||
|
||||
1. You can activate Share.js without registering an user account
|
||||
|
||||
{% 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
|
||||
[share.js homepage](https://github.com/overtrue/share.js) for information about customizing the share
|
||||
buttons.
|
||||
|
||||
|
||||
## ShareThis
|
||||
|
||||
<div>
|
||||
<strong>Installation Guide</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" 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.
|
||||
|
||||
2. Select the type of buttons you need on the "Choose type of sharing button" page.
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
{% 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
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons
|
||||
{% 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/zh-CN/Share-Buttons.md">here</a> to submit your revision.
|
||||
</div>
|
|
@ -1,17 +0,0 @@
|
|||
title: AddThis Share Plugin
|
||||
date: 2014-01-01 00:00:01
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
share:
|
||||
type: addthis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ab6fa5759854232
|
||||
---
|
||||
|
||||
[Installation instructions](https://www.addthis.com/dashboard)
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
share:
|
||||
type: addthis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=xxxxxxxx # (required)
|
||||
{% endcodeblock%}
|
|
@ -1,15 +0,0 @@
|
|||
title: AddToAny Share Plugin
|
||||
date: 2014-01-01 00:00:02
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
share:
|
||||
type: addtoany
|
||||
---
|
||||
|
||||
[Installation instructions](https://www.addtoany.com/buttons/)
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
share:
|
||||
type: addtoany
|
||||
{% endcodeblock%}
|
|
@ -1,15 +0,0 @@
|
|||
title: Baidu Share Plugin
|
||||
date: 2014-01-01 00:00:05
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
share:
|
||||
type: bdshare
|
||||
---
|
||||
|
||||
[Installation instructions](http://share.baidu.com/code)
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
share:
|
||||
type: bdshare
|
||||
{% endcodeblock%}
|
|
@ -1,19 +0,0 @@
|
|||
title: ShareThis Share Plugin
|
||||
date: 2014-01-01 00:00:03
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
tags:
|
||||
- Getting Started
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: //platform-api.sharethis.com/js/sharethis.js#property=5ab6f60ace89f00013641890&product=inline-share-buttons
|
||||
---
|
||||
|
||||
[Installation instructions](https://platform.sharethis.com/settings)
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: //platform-api.sharethis.com/js/sharethis.js#...... # (required)
|
||||
{% endcodeblock%}
|
|
@ -1,15 +0,0 @@
|
|||
title: Share.js Share Plugin
|
||||
date: 2014-01-01 00:00:04
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
share:
|
||||
type: sharejs
|
||||
---
|
||||
|
||||
[Installation instructions](https://github.com/overtrue/share.js)
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
share:
|
||||
type: sharejs
|
||||
{% endcodeblock%}
|
|
@ -11,15 +11,15 @@ toc: true
|
|||
|
||||
本文介绍Icarus 3支持的一些用户评论插件的安装配置。
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
<!-- more -->
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
Icarus的用户评论插件由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||||
提供,具体提供的插件种类与配置以其为准。
|
||||
|
||||
</div>
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<style>
|
||||
.content ol:not([type]) {
|
||||
list-style-type: simp-chinese-informal;
|
||||
|
@ -145,13 +145,16 @@ DisqusJS适用于原版Disqus服务访问受限的地区使用。关于DisqusJS
|
|||
|
||||
## Facebook
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
此评论插件可能会被部分广告拦截浏览器扩展拦截,请酌情使用。
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/Facebook %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. Facebook的评论服务配置较为简单,仅需在主题配置中将`comment`的`type`设置为`facebook`即可。
|
||||
需要注意的是,部分广告拦截插件会将Facebook评论拦截,请酌情使用。
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
comment:
|
||||
|
@ -252,6 +255,10 @@ Gitment项目似乎已停止维护,建议使用Gitalk或utterances作为基于
|
|||
|
||||
## LiveRe
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
此评论插件可能会被部分广告拦截浏览器扩展拦截,请酌情使用。
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/comment/LiveRe %}">在线预览</a>
|
||||
|
|
|
@ -42,16 +42,16 @@ donates:
|
|||
...
|
||||
{% endcodeblock %}
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div class="notification is-info is-size-6">
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
Icarus的赞赏按钮由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||||
提供,具体提供的按钮种类与配置以其为准。
|
||||
|
||||
</div>
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<style>
|
||||
.content ol:not([type]) {
|
||||
list-style-type: simp-chinese-informal;
|
||||
|
@ -60,6 +60,8 @@ Icarus的赞赏按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo
|
|||
|
||||
## 支付宝
|
||||
|
||||
**安装指南**
|
||||
|
||||
登录支付宝并导出个人支付二维码图片放置在网站的图片或附件文件夹下,或上传至图床,然后在主题配置中添加如下配置项:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
@ -73,6 +75,8 @@ donates:
|
|||
|
||||
## Buy me a Coffee
|
||||
|
||||
**安装指南**
|
||||
|
||||
注册[Buy me a Coffee](https://www.buymeacoffee.com/)并复制个人赞助页面的地址,填写到如下主题配置中:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
@ -85,6 +89,8 @@ donates:
|
|||
|
||||
## Paypal
|
||||
|
||||
**安装指南**
|
||||
|
||||
1. 注册并登录Paypal,点击[此链接](https://www.paypal.com/donate/buttons/)来创建Paypal捐赠按钮。
|
||||
|
||||
2. 在选择按钮样式(Choose button style)页面正确填写“国家/地区”(Country/Region),“语言”(Language)后,点击“继续”(Continue)
|
||||
|
@ -120,6 +126,8 @@ donates:
|
|||
|
||||
## Patreon
|
||||
|
||||
**安装指南**
|
||||
|
||||
注册[Patreon](https://www.patreon.com/)并复制个人赞助页面的地址,填写到如下主题配置中:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
@ -132,6 +140,8 @@ donate:
|
|||
|
||||
## 微信
|
||||
|
||||
**安装指南**
|
||||
|
||||
登录微信并导出个人支付二维码图片放置在网站的图片或附件文件夹下,或上传至图床,然后在主题配置中添加如下配置项:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
|
|
@ -0,0 +1,210 @@
|
|||
title: Icarus用户指南 - 分享按钮
|
||||
date: 2017-01-31
|
||||
categories:
|
||||
- Plugins
|
||||
- Share
|
||||
tags:
|
||||
- Icarus用户指南
|
||||
language: zh-CN
|
||||
toc: true
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e8fc96750876c7d
|
||||
---
|
||||
|
||||
<div class="notification is-success is-size-6">
|
||||
本文同时提供以下语言的翻译:<a href="{% post_path en/Share-Buttons %}">English</a>。
|
||||
</div>
|
||||
|
||||
本文介绍Icarus 3支持的一些分享按钮的安装配置。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||||
提供,具体提供的按钮种类与配置以其为准。
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content ol:not([type]) {
|
||||
list-style-type: simp-chinese-informal;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## AddThis
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
此分享按钮可能会被部分广告拦截浏览器扩展拦截,请酌情使用。
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddThis %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 注册[AddThis](https://www.addthis.com/)。在首次注册时的“选择工具”(Select a Tool)页面选择“分享按钮”(Share Buttons)。
|
||||
|
||||
2. 在“选择工具类型”(Select a Tool Type)界面选择分享按钮的展示样式,点击“继续”(Continue)。
|
||||
|
||||
3. 在下一步的页面中按照需要进一步自定义分享按钮的样式与行为,完成时点击“激活工具”(Activate Tool)按钮。
|
||||
|
||||
4. 在获取代码界面找到分享按钮的HTML代码,复制其中的`src`地址并填入相应的主题配置中,例如下面的AddThis代码
|
||||
|
||||
{% codeblock AddThis代码 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 %}
|
||||
|
||||
对应的主题配置为
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: addthis
|
||||
install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## AddToAny
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddToAny %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 无需注册步骤,直接修改主题配置来启用AddToAny:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: addtoany
|
||||
{% endcodeblock %}
|
||||
|
||||
2. (可选)若你需要对分享按钮进行进一步的个性化配置,请打开[AddToAny](https://www.addtoany.com/)官网,点击“获取分享按钮”
|
||||
(Get the Share Button),然后选择“任意网站”(Any Website)。在页面中完成配置后点击“获取按钮代码”(Get Button Code)。
|
||||
例如,下面是获得的默认代码:
|
||||
|
||||
{% codeblock AddToAny代码 lang:html %}
|
||||
<!-- AddToAny BEGIN -->
|
||||
<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>
|
||||
<!-- AddToAny END -->
|
||||
{% endcodeblock %}
|
||||
|
||||
由于本Hexo主题的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||||
提供,若要对其中的分享按钮代码进行修改,需首先复制其中的文件到主题相应的目录下。例如,这里我们复制
|
||||
[src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)到`themes/icarus/layout/share/`目录下。然后修改其中的`require`路径为正确的路径,并将上面的AddToAny的HTML代码替换
|
||||
到文件的相应位置中即可。
|
||||
|
||||
{% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff %}
|
||||
const { Component, Fragment } = require('inferno');
|
||||
- const { cacheComponent } = require('../../util/cache');
|
||||
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
|
||||
|
||||
...中间省略部分代码...
|
||||
|
||||
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代码替换到这里
|
||||
<script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
|
||||
</Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
...下面省略部分代码...
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 百度分享
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
此分享按钮可能会被部分广告拦截浏览器扩展拦截,请酌情使用。
|
||||
</div>
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
百度分享按钮服务似乎已下线,建议使用其他分享按钮服务作为替代。
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 无需注册步骤,直接修改主题配置来启用百度分享:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: bdshare
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## Share.js
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
Share.js服务已停止维护,建议使用其他分享按钮服务作为替代。
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 无需注册步骤,直接修改主题配置来启用Share.js:
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: sharejs
|
||||
{% endcodeblock %}
|
||||
|
||||
2. (可选)如果你需要自定义分享按钮,请参照[AddToAny](#AddToAny)中的第二步与[share.js主页](https://github.com/overtrue/share.js)
|
||||
的相关信息。
|
||||
|
||||
|
||||
## ShareThis
|
||||
|
||||
<div>
|
||||
<strong>安装指南</strong>
|
||||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/ShareThis %}">在线预览</a>
|
||||
</div>
|
||||
|
||||
1. 打开[ShareThis官网](https://sharethis.com/),点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
|
||||
|
||||
2. 在“选择分享按钮类型”(Choose type of sharing button)选择需要的按钮类型,如有需要的话可点击下方的“自定义你的分享按钮”
|
||||
(Customize your share buttons)链接进行进一步配置。完成后点击“下一步”(Next)。
|
||||
|
||||
3. 在“注册并获取代码”(Register and get the code!)界面点击HTML和“下一步”(Next)按钮。然后输入邮箱和密码完成ShareThis的注册。
|
||||
|
||||
4. 最后,复制代码获取界面中的`src`地址并填入相应的主题配置中,例如下面的ShareThis代码
|
||||
|
||||
{% codeblock AddThis代码 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 %}
|
||||
|
||||
对应的主题配置为
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
share:
|
||||
type: sharethis
|
||||
install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
文章内容有误?请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Share-Buttons.md">此处</a>提交修改。
|
||||
</div>
|
Loading…
Reference in New Issue