近期,和风天气官方彻底关闭了旧版简易天气接口:

1
https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0

已经无法正常访问,导致使用 Anzhiyu 的 hexo-butterfly-clock-anzhiyu 插件 的博客全部出现时钟加载失败的情况

为了解决时钟组件完全不可用的问题,我将旧方案彻底移除,并迁移了新的插件:

hexo-butterfly-clock-remake

整体视觉和功能与原版一致,同时使用了和风天气最新接口,兼容性与稳定性更好。


插件项目地址

GitHub 仓库:

https://github.com/hoochanlon/hexo-butterfly-clock-remake


一、卸载旧插件

如果你使用过旧版时钟方案,务必先卸载它们:

1
2
3
npm uninstall hexo-butterfly-clock
npm uninstall hexo-butterfly-clock-anzhiyu
npm uninstall hexo-butterfly-clock-anzhiyu-yang

二、安装新版插件

1
npm install hexo-butterfly-clock-remake

注意:
该插件依赖 和风天气开发者 API。你需要前往注册并获取自己的:

  • API Host(需手动在前面加 https://注意这里,作者并没有提到,但不加会报错
  • API Key

和风天气控制台:

https://dev.qweather.com/


三、配置使用(站点配置或主题配置均可)

_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
21
22
# electric_clock
# see: https://github.com/hoochanlon/hexo-butterfly-clock-remake
electric_clock:
enable: true
priority: 5
enable_page: all
exclude:
# - /posts/
# - /about/
layout:
type: class
name: aside-content
# insert_before: user-countdown
insert_after: card-announcement
loading: https://cdn.cbd.int/[email protected]/lib/loading.gif
clock_css: https://cdn.cbd.int/[email protected]/lib/clock-min.css
clock_js: https://cdn.cbd.int/[email protected]/lib/clock-min.js

qweather_api_host: {YOUR API HOST} # 注意要写成 https://xxx.qweatherapi.com
qweather_key: {YOUR KEY}

# default_city: "资兴"

四、关键参数说明

参数 类型 说明
enable true/false 必填,插件总开关
priority number 可选,Hexo 过滤器执行顺序
enable_page path/all 应用页面,可填路径或 all
exclude path 需要排除的页面列表
layout.type id/class 插入的目标容器类型
layout.name string 插入的目标容器名称
insert_before string 插入到某元素前(二选一)
insert_after string 插入到某元素后(二选一)
loading URL 加载动画图
clock_css URL 时钟 CSS
clock_js URL 时钟 JavaScript
qweather_api_host URL 和风天气 API host,必须加 https://
qweather_key string 和风天气 key
default_city string 可选,默认城市,未设置则根据 IP 定位

五、切换结果展示

使用新版插件后,时钟组件恢复正常工作,并与旧版保持一致的视觉效果:

image-20251208212957932