hexo-theme-icarus

7.8 KiB

Raw Blame History

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: fontawesome

本文同时提供以下语言的翻译：English。

本文介绍Icarus 3支持的一些分享按钮的安装配置。

Icarus的分享按钮由ppoffice/hexo-component-inferno 提供，具体提供的按钮种类与配置以其为准。

此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。

安装指南 在线预览

注册AddThis。在首次注册时的“选择工具”(Select a Tool)页面选择“分享按钮”(Share Buttons)。
在“选择工具类型”(Select a Tool Type)界面选择分享按钮的展示样式，点击“继续”(Continue)。
在下一步的页面中按照需要进一步自定义分享按钮的样式与行为，完成时点击“激活工具”(Activate Tool)按钮。
在获取代码界面找到分享按钮的HTML代码，复制其中的src地址并填入相应的主题配置中，例如下面的AddThis代码

{% codeblock AddThis代码 lang:html %}

{% 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

安装指南 在线预览

无需注册步骤，直接修改主题配置来启用AddToAny：

{% codeblock themes/icarus/_config.yml lang:yaml %} share: type: addtoany {% endcodeblock %}
(可选)若你需要对分享按钮进行进一步的个性化配置，请打开AddToAny官网，点击“获取分享按钮” (Get the Share Button)，然后选择“任意网站”(Any Website)。在页面中完成配置后点击“获取按钮代码”(Get Button Code)。例如，下面是获得的默认代码：

{% codeblock AddToAny代码 lang:html %}

{% endcodeblock %}
由于本Hexo主题的分享按钮由ppoffice/hexo-component-inferno 提供，若要对其中的分享按钮代码进行修改，需首先复制其中的文件到主题相应的目录下。例如，这里我们复制 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
- ```
       <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 %}

百度分享

此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。

百度分享按钮服务似乎已下线，建议使用其他分享按钮服务作为替代。

安装指南 在线预览

无需注册步骤，直接修改主题配置来启用百度分享：

{% codeblock themes/icarus/_config.yml lang:yaml %} share: type: bdshare {% endcodeblock %}

Share.js服务已停止维护，建议使用其他分享按钮服务作为替代。

安装指南 在线预览

无需注册步骤，直接修改主题配置来启用Share.js：

{% codeblock themes/icarus/_config.yml lang:yaml %} share: type: sharejs {% endcodeblock %}
(可选)如果你需要自定义分享按钮，请参照AddToAny中的第二步与share.js主页的相关信息。

安装指南 在线预览

打开ShareThis官网，点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
在“选择分享按钮类型”(Choose type of sharing button)选择需要的按钮类型，如有需要的话可点击下方的“自定义你的分享按钮” (Customize your share buttons)链接进行进一步配置。完成后点击“下一步”(Next)。
在“注册并获取代码”(Register and get the code!)界面点击HTML和“下一步”(Next)按钮。然后输入邮箱和密码完成ShareThis的注册。
最后，复制代码获取界面中的src地址并填入相应的主题配置中，例如下面的ShareThis代码

{% codeblock AddThis代码 lang:html %}

{% 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 %}

文章内容有误？请点击此处提交修改。

7.8 KiB Raw Blame History Unescape Escape

AddThis

AddToAny

百度分享

Share.js

ShareThis

7.8 KiB

Raw Blame History