给hexo-theme-butterfly添加侧边栏电子钟
该文章图片素材及部分文字来自安知鱼博客的中给butterfly添加侧边栏电子钟一文，在此表示感谢。
关于本插件（hexo-butterfly-clock-anzhiyu-yang）
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| 'use strict'
const pluginname = 'butterfly_clock_anzhiyu'
const pug = require('pug')
const path = require('path')
const urlFor = require('hexo-util').url_for.bind(hexo)
const util = require('hexo-util')
hexo.extend.filter.register('after_generate', function (locals) {
const config = hexo.config.electric_clock ? hexo.config.electric_clock : hexo.theme.config.electric_clock
if (!(config && config.enable)) return
const data = {
enable_page: config.enable_page ? config.enable_page : "all",
exclude: config.exclude,
layout_type: config.layout.type,
layout_name: config.layout.name,
layout_index: config.layout.index ? config.layout.index : 0,
loading: config.loading ? urlFor(config.loading) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif",
clock_css: config.clock_css ? urlFor(config.clock_css) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css",
clock_js: config.clock_js ? urlFor(config.clock_js) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js",
qweather_key: config.qweather_key ? config.qweather_key : "b16a1fa0e63c46a4b8f28abfb06ae3fe",
gaud_map_key: config.gaud_map_key ? config.gaud_map_key : "e2b04289e870b005374ee030148d64fd&s=rsv3",
default_rectangle_enable: config.default_rectangle ? config.default_rectangle : false,
rectangle: config.rectangle ? config.rectangle : "112.6534116,27.96920845",
}
const temple_html_text = config.temple_html ? config.temple_html : pug.renderFile(path.join(__dirname, './lib/html.pug'),data)
const css_text = `<link rel="stylesheet" href="${data.clock_css}" />`
const js_text = `<script data-pjax src="${data.clock_js}"></script>`
var get_layout
if (data.layout_type === 'class') {
get_layout = `document.getElementsByClassName('${data.layout_name}')[${data.layout_index}]`
}
else if (data.layout_type === 'id') {
get_layout = `document.getElementById('${data.layout_name}')`
}
else {
get_layout = `document.getElementById('${data.layout_name}')`
}
var user_info_js = `<script data-pjax>
function ${pluginname}_injector_config(){
var parent_div_git = ${get_layout};
var item_html = '${temple_html_text}';
console.log('已挂载${pluginname}')
if(parent_div_git) {
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
}
}
var elist = '${data.exclude}'.split(',');
var cpage = location.pathname;
var epage = '${data.enable_page}';
var qweather_key = '${data.qweather_key}';
var gaud_map_key = '${data.gaud_map_key}';
var baidu_ak_key = '${data.baidu_ak_key}';
var flag = 0;
var clock_rectangle = '${data.rectangle}';
var clock_default_rectangle_enable = '${data.default_rectangle_enable}';
for (var i=0;i<elist.length;i++){
if (cpage.includes(elist[i])){
flag++;
}
}
if ((epage ==='all')&&(flag == 0)){
${pluginname}_injector_config();
}
else if (epage === cpage){
${pluginname}_injector_config();
}
</script>`
hexo.extend.injector.register('body_end', user_info_js, "default");
hexo.extend.injector.register('body_end', js_text, "default");
hexo.extend.injector.register('head_end', css_text, "default");
},
hexo.extend.helper.register('priority', function(){
const pre_priority = hexo.config.electric_clock.priority ? hexo.config.electric_clock.priority : hexo.theme.config.electric_clock.priority
const priority = pre_priority ? pre_priority : 10
return priority
})
)
|
效果图：
- 如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突）或者anzhiyu的插件（因和风天气关闭了api地址，会拖慢页面的加载速度），在博客根目录
[Blogroot]下打开终端，运行以下指令
1
2
3
4
|
npm uninstall hexo-butterfly-clock
npm uninstall hexo-butterfly-clock-anzhiyu --save
|
- 安装本插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：
1
2
|
npm install hexo-butterfly-clock-anzhiyu-yang --save
|
添加配置信息，以下为写法示例。
在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
electric_clock:
enable: true
priority: 5
enable_page: all
exclude:
layout:
type: class
name: sticky_layout
index: 0
loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif
clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.js
qweather_key:
gaud_map_key:
default_rectangle: false
rectangle: 112.6534116,27.96920845
|
其中qweather_key和gaud_map_key最好自己去申请对应的 API key，默认使用原作者anzhiyu-c的，可能会被限制，不保证可靠性。
API key 申请教程
和风天气 API-KEY
| 步骤 |
操作 |
截图 |
| 1 |
登录后进入控制台 |
|
| 2 |
创建应用 |
|
| 3 |
填写应用名称和 key 名称随意 |
|
| 4 |
选择 WebApi |
|
| 5 |
复制 key |
|
高德地图 API-KEY
| 步骤 |
操作 |
截图 |
| 6 |
登录后进入控制台 |
|
| 7 |
创建应用，名称随意，类型选其他 |
|
| 8 |
点击添加, key 名称随意，服务平台 选择 Web 服务,点击提交 |
|
| 9 |
复制 key |
|
参数释义
| 参数 |
备选值/类型 |
释义 |
| priority |
number |
【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable |
true/false |
【必选】控制开关 |
| enable_page |
path |
【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填all，默认为all |
| exclude |
path |
【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。 |
| layout.type |
id/class |
【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name |
text |
【必选】挂载容器名称 |
| layout.index |
0和正整数 |
【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| loading |
URL |
【可选】电子钟加载动画的图片 |
| clock_css |
URL |
【可选】电子钟样式CDN资源 |
| clock_js |
URL |
【可选】电子钟执行脚本CDN资源 |
| qweather_key |
【可选】和风天气key |
【可选】和风天气key |
| gaud_map_key |
【可选】高得地图web服务key |
【可选】高得地图 web 服务 key（默认使用anzhiyu-c的） |
| default_rectangle |
【可选】和风天气key |
【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气 |
| rectangle |
【可选】高得地图web服务key |
【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置 |
截图
