教程：hexo-electric-clock 电子时钟插件

原文链接：https://zfe.space/post/hexo-electric-clock.html
作者：小冰博客（しゅふがく）

前言

基于 npm 插件方式部署的侧边栏电子时钟，自动挂载到侧边栏。

效果

LED 数码管字体显示时间
天气图标 + 温度
湿度
IP 地址 + 地理位置
AM/PM 标识

NPM 插件安装

在博客根目录下打开终端，运行：

npm i hexo-electric-clock --save

# 或者
cnpm i hexo-electric-clock --save

注意：一定要加 --save，不然本地预览时可能不会显示！

配置项

在博客根目录 _config.yml（不是主题配置文件）中添加：

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 / path	路由地址，all 代表全局开启，如 `/` 代表主页
`priority`	number	插件叠放顺序，数字越大越靠前
`layout.type`	id / class	挂载容器类型
`layout.name`	text	容器名称
`layout.index`	number	第几个容器（class 类型时使用）
`temple_html`	html	挂载容器模板

运行

执行 hexo 三连：

1	hexo clean && hexo g && hexo s

即可看到侧边栏电子时钟效果。