博客添加和风天气插件

本教程针对 hexo + butterfly 搭建的博客

首先去和风官网并登陆
点击创建简约插件

在右侧选择你想要的样式并复制代码

将代码复制到butterfly主题下的source文件夹下的js文件夹下面新建一个weather.js

WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "1",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "b6b522a9ba3b4193a9aa4ad86ab75d70"
  }
}

将上面代码粘贴进去

layout\includes\header下面找到nav.pug
加上
1
<div id="he-plugin-simple"></div>

在主题配置文件_config.butterfly.yml中找到inject的bottom处引入以下两个js文件

1
2
3

- <script src="/js/weather.js"></script>  # 天气插件
- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>  # 天气插件官方js