为网站添加天气小部件（基于Hexo框架+Butterfly主题）
如果你想要做一件事情，首先，你应该去了解这件事情，了解这件事情别人有没有做过。第二，这件事情你可不可以做的比别人更好。
本文同步发表在我的个人博客上，欢迎大家访问，https://sunguoqi.com/2021/09/01/weather/
文章目录
- 一、前言
- 二、效果预览
- 三、具体步骤
-
- 1、申请天气API
- 2、添加div
- 3、添加weather.js
- 4、Inject引入
- 5、调试
- 四、后记
一、前言
我不是魔改大佬，但有一颗折腾的心，在网站上添加天气小部件，感觉还是有点意思的。但浏览了仅有的几篇相关教程之后，感觉写的都差点意思，于是就自己写下了这篇文章。
二、效果预览
三、具体步骤
1、申请天气API
国内天气API有多种，此处推荐和风天气，如果您第一次使用和风天气，首先，您应该去官网注册一个账号，点我进入
申请账号并登录后，请到和风天气开发平台创建一个简约插件，点我进入
配置插件的相关属性，首先，您应该为您的插件取一个名字，内容属性均可以自定义。
注意：为了确保天气小部件的正常显示，这里选择固定在浏览器中，具体位置后续在调节。
设置完成后，点击下面的生成代码即可，生成的代码如下。
<div id="he-plugin-simple">div>
<script>
WIDGET = {
"CONFIG": {
"modules": "01234",
"background": "5",
"tmpColor": "FF9900",
"tmpSize": "16",
"cityColor": "4A86E8",
"citySize": "16",
"aqiColor": "FF9900",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "true",
"vertical": "top",
"horizontal": "left",
"left": "10",
"top": "10",
"key": "您自己的key"
}
}
script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0">script>
2、添加div
打开您的博客所在文件夹，在blog\themes\butterfly\layout\includes\headers目录下的nav.pug文件中添加以下内容。
<div id="he-plugin-simple">div>
也可以写成这种形式
#he-plugin-simple
3、添加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"
}
}
4、Inject引入
在配置文件_config.butterfly的inject属性中引入以下代码。
-