Hexo-NexT添加第三方服务

本文主要记录了Hexo-NexT博客添加第三方服务的过程,其中包括添加AddThis分享功能添加网页音乐播放器添加在线聊天添加文章评分功能支持ECharts动态图表

添加AddThis分享功能

AddThis官网配置

账号注册

首先点击AddThis至官网注册账号,然后国家可以选择China。

选择工具类型(Select a Tool)

这里我选择分享按钮(Share Button)

选择显示样式(Select a Tool Type)

AddThis提供了7种显示样式,你可以在左边菜单栏点击,右边会自动显示你选择的相应样式。右上角可以切换PC和Phone显示。

分享设计界面

选择Continue之后进入分享样式设计界面。

  • 第一个设置你要显示的主要应用
  • 第二个设置在手机上的显示样式和大小
  • 第三个设置分享计数器针对个人等选项
  • 第四个设置分享组合的位置,宽度,偏移量
  • 第五个设置该分享是否要显示在主页上等配置

代码视图

设置完成后进入该页面选择仅代码视图打开,可以看到生成的代码,从而获取主题配置文件所需add_this_id也就是当前页面的pubid。

配置主题文件

在主题配置文件_config.yml文件add_this_id配置官网中获得的pubid。

添加网页音乐播放器

下载

访问Aplayer网站:GitHub Aplayer。下载源码到本地,解压后将dist文件夹复制到themes\next\source文件夹下。

添加music.js

新建themes\next\source\dist\music.js文件,添加内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
audio: [
{
name: "灰色头像",
artist: '许嵩',
url: 'http://www.ytmp3.cn/down/59697.mp3',
cover: 'http://img.ytmp3.cn/image/79.jpg',
},
{
name: '多余的解释',
artist: '许嵩',
url: 'http://www.ytmp3.cn/down/60447.mp3',
cover: 'http://img.ytmp3.cn/image/78.jpg',
}
]
});

audio对应的便是音频文件,音乐播放器需要播放的音乐信息需要自己添加(如歌曲链接、歌词、封面等)的配置。这里放一个mp3音乐外链网站:http://up.mcyt.net/ ,搜索对应的音乐,然后复制url和右击封面图片链接粘贴到对应的位置上就行了。

配置_layout.swig

打开themes\next\layout\_layout.swig文件,将

1
2
3
4
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

添加到<body itemscope ...>后面,即在<body></body>里面。

然后我们就能看到左下角的音乐播放器了。

添加在线聊天

在线聊天算是一个比较成熟的 SaaS 商业应用了,业内产品如 TidioTalkJSIntercomtawk.to 等,使用体验都很好,交互界面也很干净别致。经过比较,本站最终选择了 Tidio:

  • 在个人博客这种业务场景中,几乎用不到它的收费功能,可以算是终身免费了。
  • Tidio 提供了多种消息回复渠道,包括网页、桌面应用、iOS/Android APP(需要 Google play 服务支持)。
  • 除了在线聊天,Tidio 还可以在线发送邮件,以及关联接收 Fackbook 消息。

首先需要注册 Tidio 账号,根据引导填写应用信息。进入控制台后,在 SETTINGS -> Developer -> Project data 中获取到 Public Key

在主题配置文件下配置如下代码:

1
2
3
4
5
6
7
8
9
10
chat:
enable: true
#service: chatra
service: tidio
icon: comment # icon in Font Awesome 4, set false to disable icon
text: Chat # button text, change it as you wish

tidio:
enable: true
key: 你的key # Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

刷新页面即可在右下角看到 Tidio 的会话标志了。接下来可以在 Tidio 控制台的 Channel -> Live chat -> Appearance 中根据提示定制聊天对话框的主题外观和语言包:

添加文章评分功能

修改主题配置文件_config.yml,修改为:

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: true
id:
color: f79533

再打开 https://widgetpack.com ,首页点 Rating, 注册一个账号,完成后左上角有一个 ID,填入即可。

  • 可以配置评分方式,侧栏 > Rating > Setting,建议用 IP address 或 Device (cookie),免登录
  • 建议 侧栏 > Site > Setting 中勾选 Private 选项。

支持ECharts动态图表

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari 等)。

插件的安装

Hexo 的 ECharts 插件是博主 KChen 根据周旅军的原型插件开发的。进入博客根目录安装插件:

1
npm install hexo-tag-echarts --save

插件的使用

在文章中使用 ECharts 时,格式为:

1
2
3
{% echarts 400 '85%' %}
\\TODO option goes here
{% endecharts %}

其中echarts是标签名,不需要更改,400是图表容器的高度,85%是图表容器的相对宽度。而在tag之间的部分,则是需要自己填充的图表数据了。

比如,在文章中输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{% echarts 400 '85%' %}
{
title: {
text: "某站点用户访问来源",
subtext: "ECharts示例",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{
value: 335,
name: "直接访问"
},
{
value: 310,
name: "邮件营销"
},
{
value: 234,
name: "联盟广告"
},
{
value: 135,
name: "视频广告"
},
{
value: 1548,
name: "搜索引擎"
}
]
}
]
}
{% endecharts %}

上述代码渲染出来的 ECharts 图表如下:

如果按照上例不能正确绘制图表,请照下面的指导修改一下 ECharts 的模板文件。

用编辑器打开博客目录下 ~/node_modules/hexo-tag-echarts/echarts-template.html 文件。

作如下修改:

1
2
3
4
5
<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
+ <script src="https://echarts.baidu.com/dist/echarts.common.min.js"></script>
<script type="text/javascript">
...
</script>

参考

赞赏一杯咖啡
0%