Hexo-butterfly添加侧边栏电子钟

电子钟效果

说明

在南宁研究院用的是校园网，校园网网络是先回到花江校区再通过教育网（或者学校合作运营商）出去的，所以连接校园网后通过天气API和高德地图API获取的地域信息和天气信息实际上是桂林的

电子钟实现

1.获取和风天气API

和风天气API：和风天气开发服务 https://dev.qweather.com/

登录之后进入“开发服务控制台”，在“项目管理”处“创建项目”，选择“免费订阅”方案，适用平台选择“Web API”,自定义“key的名称”，但“key的名称”并不是最终获取的token，只是说明这个key用来干嘛的，后续的实际token是一个字符串

2.获取高德地图API

高德地图API: 高德开放平台 https://console.amap.com/

登陆之后进入“控制台”，在“应用管理” –> “我的应用” —> “创建新应用”, “应用名称”随便，”应用类型”选其他，服务平台一定要选”Web服务”，不能选“Web端(JS API)”,创建完成后获得key

3.API次数限制

和风天气次数限制： 1000次/天

检测和风天气API是否可用：复制并粘贴下列链接到浏览器中，看看返回了哪些内容

https://devapi.qweather.com/v7/weather/3d?location=101010100&key=这里替换成你的key

高德地图次数限制：5000次/日（免费额度），并发量上限30次/秒

下载插件版侧边栏电子钟

anzhiyu版电子钟插件下载：在网站根目录下打开Git Base Here进行下载，我的目录是G:\Blog

npm install hexo-butterfly-clock-anzhiyu --save

如果有安装其他版本的插件版侧栏电子钟要先删掉，例如

1 2	# 卸载其他电子钟 npm uninstall hexo-butterfly-clock

在_config.butterfly.yml添加配置信息

这两项是根据上面获取的API自行补充的

qweather_key: # 和风天气key
gaud_map_key: # 高得地图web服务key

# electric_clock
# see https://blog.anheyu.com/posts/fc18.html
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
  # - /posts/
  # - /about/
  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.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: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

配置文件参数释义

参数	备选值	类型
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/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 资源
ip_api	URL	【可选】获取时钟 IP 的 API
qweather_key	text	【可选】和风天气 key
gaud_map_key	text	【可选】高得地图 web 服务 key

参考

http://blog.anheyu.com/posts/fc18.html

修改(2024年9月11日)

未修改前电子钟的位置处于页面下方，不方便看时间，于是把它挪到公告栏下面处在更上方的位置方便随时查看时间

原本样式

修改后样式

修改步骤

新建G:\Blog\source\css\hexo_electric_clock.css文件，写入如下代码

#hexo_electric_clock {
    background: linear-gradient(-45deg, #c0f2e3, #dbe1e9);
    border-radius: 12px;
    /* padding: 1px; */
    margin-top: 15px;
    box-shadow: 0px 4px 8px rgba(96, 91, 91, 0.5);
        /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
}

[data-theme="dark"] #hexo_electric_clock {
    background: #212121;
}

打开G:\Blog\themes\butterfly\layout\includes\widget\card_announcement.pug，添加电子钟的内容

      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
    //- 访客欢迎信息
    #welcome-info
    //- 电子钟
+    #hexo_electric_clock

打开G:\Blog\_config.butterfly.yml，引用电子钟css样式

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="/css/universe.css">
    - <span id="fps"></span> # 帧率检测
+    - <link rel="stylesheet" href="/css/hexo_electric_clock.css">

在G:\Blog\_config.butterfly.yml找到electric_clock配置项，更新内容如下

electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
  # - /posts/
  # - /about/
  layout: # 挂载容器类型
+    type: class
+    name: card-widget card-announcement # sticky_layout
+    index: 2

恢复

如果想恢复电子钟默认样式，按以下步骤进行即可

删除添加的#hexo_electric_clock
在G:\Blog\_config.butterfly.yml去除引用的/css/hexo_electric_clock.css，然后可以把电子钟的css文件删掉，也可以留着
恢复G:\Blog\_config.butterfly.yml的electric_clock默认配置

layout: # 挂载容器类型，默认配置
  type: class
  name: sticky_layout
  index: 0