前言:

效果如下:
image.png

NPM 插件安装的部署方法:

1
2
3
4
5
npm i hexo-electric-clock --save

# 或者

cnpm i hexo-electric-clock --save

注意,一定要加--save,不然本地预览的时候可能不会显示!!!

新增网站根目录_config 配置项(不是主题的):

1
2
3
4
5
6
7
8
9
electric_clock:
priority: 5
enable: true
enable_page: all
layout:
type: class
name: sticky_layout
index: 0
temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

enable

参数:true/false
含义:是否开启插件

enable_page

参数:all
含义:路由地址,all 代表全局开启。如 / 代表主页。

priority

参数:1
含义:插件的叠放顺序,数字越大,叠放约靠前。

1
2
3
electric_clock:
enable: true
priority: 5 # 这里是参数

layout

参数:type; (class&id)
参数:name;
参数:index;(数字)
含义:如果说 electric_clock 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
最后墙的名字即是 name;

1
2
3
4
5
6
7
8
<div desc="我是墙" id="recent-posts">
<!-- id=>type recent-posts=>name -->
<div desc="我是画框">
<div desc="我是纸">
<!--这里通过js挂载electric_clock,也就是画画-->
</div>
</div>
</div>

temple_html

参数:html 模板字段
含义:包含挂载容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="card-widget card-clock">
<!-- 挂载容器 -->
<div class="card-glass">
<div class="card-background">
<div class="card-content">
<div id="hexo_electric_clock">
<img
id="card-clock-loading"
src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif"
style="height: 120px; width: 100%;"
data-ll-status="loading"
class="entered loading"
/>
</div>
</div>
</div>
</div>
</div>

hexo 三连

执行 hexo 三连

1
hexo clean && hexo g && hexo s

即可发现已经成功部署。

最后

还是按照惯例,有什么不懂的欢迎加群询问。
image.png