博客添加天气组件

想给自己的博客弄一个天气组件，实现方案参考自[^1]。

生成插件

打开和风天气插件网站，注册一个账号，接着创建一个天气简约插件。生成代码后，我们只需复制两个<script>之间的代码，我的如下：

<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "3",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "1",
    "language": "auto",
    "borderRadius": "5",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "*******************"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

详细步骤

在Hexo\themes\butterfly\source\js\路径下新建weather.js文件，将如下代码复制进去。

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

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

1
2

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

如果你有自定义的js代码，例如custom.js，也可以将上面的代码复制进你的custom.js中，效果一样。

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