闲着无事，为自己的博客添加一个天气小插件，丰富一下博客内容

注册和风天气

这个是免费的，不想白嫖的话可以注册中国天气🌍

在和风天气创建一个简约的插件

生成代码

修改配置文件

添加div

在 blog\themes\butterfly\layout\includes\header 下面的nav.pug添加

<div id="he-plugin-simple"></div>

添加weather.js

在 blog\themes\butterfly\source\js 下面添加weather.js文件

WIDGET = {

"CONFIG": {

"modules": "01234",
"background": "5",
"tmpColor": "4A86E8",
"tmpSize": "16",
"cityColor": "FF9900",
"citySize": "16",
"aqiColor": "4A86E8",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "0px 0px 0px 0px",
"shadow": "0",
"language": "auto",
"fixed": "true",
"vertical": "center",
"horizontal": "center",
"left": "125",
"top": "20",
"key": "刚才生成代码中的key"
}
}

添加script代码

在配置文件_config.butterfly的inject属性中添加以下代码

- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script async src="/js/weather.js"></script>

hexo clean

hexo s

hexo g -d

为博客添加天气小插件(Hexo Butterfly)