271 lines
10 KiB
Markdown
271 lines
10 KiB
Markdown
title: Icarus用户指南 - 分享按钮
|
||
date: 2016-01-01
|
||
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
|
||
providers:
|
||
cdn: loli
|
||
fontcdn: loli
|
||
iconcdn: loli
|
||
---
|
||
|
||
本文介绍Icarus 3支持的分享按钮的安装配置。
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/Share-Buttons %}">English</a>。
|
||
</div>
|
||
</article>
|
||
|
||
<!-- more -->
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-info-circle mr-2"></i>下面的分享按钮由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持按钮列表和配置详情以其为准。
|
||
</div>
|
||
</article>
|
||
|
||
<style>
|
||
.content ol:not([type]) {
|
||
list-style-type: simp-chinese-informal;
|
||
}
|
||
</style>
|
||
|
||
|
||
## AddThis
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
|
||
</div>
|
||
</article>
|
||
|
||
<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)。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool.png 360 '"选择工具 - AddThis" "选择工具 - AddThis"' %}
|
||
<br>
|
||
|
||
2. 在“选择工具类型”(Select a Tool Type)界面选择样式和按钮，点击“继续”(Continue)。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool-type.png 360 '"选择工具类型 Type - AddThis" "选择工具类型 Type - AddThis"' %}
|
||
<br>
|
||
|
||
3. 在下一页面中进一步自定义分享按钮，完成时点击“激活工具”(Activate Tool)按钮。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-customize-share.png 360 '"自定义分享按钮 - AddThis" "自定义分享按钮 - AddThis"' %}
|
||
<br>
|
||
|
||
4. 在”获取代码“(Get The Code)页面找到HTML代码，复制`src`属性值中的URL地址并填入分享按钮配置中。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-get-code.png 360 '"获取代码 - AddThis" "获取代码 - AddThis"' %}
|
||
<br>
|
||
|
||
例如，下面AddThis代码中的URL：
|
||
|
||
{% 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 _config.icarus.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 _config.icarus.yml lang:yaml %}
|
||
share:
|
||
type: addtoany
|
||
{% endcodeblock %}
|
||
|
||
如果你想自定义分享按钮，请采用如下步骤：
|
||
|
||
1. 访问[AddToAny](https://www.addtoany.com/)官网并点击“获取分享按钮”(Get the Share Button)。
|
||
|
||
2. 然后，选择“任意网站”(Any Website)并完成按钮的配置。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-select-platform.png 360 '"选择平台 - AddToAny" "选择平台 - AddToAny"' %}
|
||
<br>
|
||
|
||
3. 完成后点击“获取按钮代码”(Get Button Code)。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-get-code.png 360 '"获取代码 - AddToAny" "获取代码 - AddToAny"' %}
|
||
<br>
|
||
|
||
4. 由于分享按钮是由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||
提供，你需要将AddToAny的布局文件[src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)从这个仓库中复制到`<icarus_directory>/layout/share/addtoany.jsx`。
|
||
然后，替换`addtoany.jsx`中AddToAny代码并修正文件头部的包引用。
|
||
|
||
例如，假设下面的代码是你从上一步获得的代码：
|
||
|
||
{% codeblock AddToAny代码 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>
|
||
<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 %}
|
||
|
||
那么你需要对`addtoany.jsx`做出如下修改：
|
||
|
||
{% codeblock <icarus_directory>/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');
|
||
|
||
...中间省略部分代码...
|
||
|
||
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 %}
|
||
|
||
|
||
## 百度分享
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>百度分享按钮服务似乎已下线，建议使用其他分享按钮服务作为替代。
|
||
</div>
|
||
</article>
|
||
|
||
<div>
|
||
<strong>安装指南</strong>
|
||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">在线预览</a>
|
||
</div>
|
||
|
||
1. 你可以启用百度分享按钮而无需注册用户。
|
||
直接将下面的代码添加到你的主题配置中：
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
share:
|
||
type: bdshare
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Share.js
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>Share.js服务已停止维护，建议使用其他分享按钮服务作为替代。
|
||
</div>
|
||
</article>
|
||
|
||
<div>
|
||
<strong>安装指南</strong>
|
||
<a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">在线预览</a>
|
||
</div>
|
||
|
||
1. 你可以启用Share.js分享按钮而无需用户注册。
|
||
直接将下面代码添加到主题配置中：
|
||
|
||
{% codeblock _config.icarus.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)页面选择你需要的按钮类型。
|
||
不要启用”GDPR规范工具“，否则可能会导致一些问题。
|
||
你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。
|
||
完成后点击“下一步”(Next)。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-button-type.png 360 '"选择按钮类型 - ShareThis" "选择按钮类型 - ShareThis"' %}
|
||
<br>
|
||
|
||
3. 在”选择你的CMS平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-platform.png 360 '"选择平台 - ShareThis" "选择平台 - ShareThis"' %}
|
||
<br>
|
||
|
||
3. 在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成ShareThis的注册。
|
||
|
||
4. 最后，从HTML代码段中复制`src`中的URL地址到分享按钮配置中。
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-get-code.png 360 '"获取代码 - ShareThis" "获取代码 - ShareThis"' %}
|
||
<br>
|
||
|
||
例如，下面的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 _config.icarus.yml lang:yaml %}
|
||
share:
|
||
type: sharethis
|
||
install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons
|
||
{% endcodeblock %}
|
||
|
||
|
||
<article class="message message-immersive is-warning">
|
||
<div class="message-body">
|
||
<i class="fas fa-question-circle mr-2"></i>文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Share-Buttons.md">此处</a>提交修改。
|
||
</div>
|
||
</article>
|