【个人博客网站】博客美化(六):添加侧边栏电子钟

本文最后更新于 about 2 years ago,文中所描述的信息可能已发生改变。

TIP提示

参考了安知鱼的方案进行修改 原教程给butterfly添加侧边栏电子钟

安装

shell
npm install hexo-butterfly-clock-mnxiaoyao --save

配置

在hexo配置文件或主题配置文件中添加

yaml
electric_clock:
  enable: true ## 开关
  priority: 8 #过滤器优先权
  enable_page: all ## 应用页面
  exclude:
    ## - /posts/
    ## - /about/
  layout: ## 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://unpkg.com/hexo-butterfly-clock-mnxiaoyao/lib/loading.gif
  clock_js: https://unpkg.com/hexo-butterfly-clock-mnxiaoyao/lib/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  qweather_key:  ## 和风天气key
  gaud_map_key:  ## 高德地图web服务key
  default_rectangle: false ## 开启后将一直显示rectangle位置的天气,否则将获取访问者的地理位置与天气
  rectangle: 114.3619304895401,25.401416037847046 ## 获取访问者位置失败时会显示该位置的天气,同时该位置为开启default_rectangle后的位置

其中qweather_keygaud_map_key默认为空,需要自己去申请

下载图标

本插件需要本地配置天气图标,否则图标不显示

下载图标包后,解压放到hexo的source文件夹里,密码:97a6

参数释义

参数备选值/类型释义
prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enabletrue/false【必选】控制开关
enable_pagepath【可选】填写想要应用的页面,如根目录就填’/',分类页面就填'/categories/'。若要应用于所有页面,就填all,默认为all
excludepath【可选】填写想要屏蔽的页面,可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
layout.typeid/class【可选】挂载容器类型,填写id或class,不填则默认为id
layout.nametext【必选】挂载容器名称
layout.index0和正整数【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
loadingURL【可选】电子钟加载动画的图片
clock_cssURL【可选】电子钟样式CDN资源
clock_jsURL【可选】电子钟执行脚本CDN资源
ip_apiURL【可选】获取时钟IP的API
qweather_keytext【必选】和风天气key
gaud_map_keytext【必选】高得地图web服务key
default_rectangletext【可选】开启后将一直显示rectangle位置的天气,否则将获取访问者的地理位置与天气
rectangletext【可选】获取访问者位置失败时会显示该位置的天气,同时该位置为开启default_rectangle后的位置

注意:使用了该插件,请勿开启TOC简洁模式,否则将出现侧边栏排版错误

【个人博客网站】博客美化(八):twikoo评论系统以及双评论
【个人博客网站】博客美化(七):随机文章显示