Hexo博客技巧 Hexo 博客

Hexo：Butterfly添加天气组件

Aciano2022-07-082022-08-17

教程链接

花猪：Hexo在顶部增加天气小部件

实际效果

https://aciano.top/

在这里插入图片描述
即在博客的左上角，可以查看当地的天气状况。

生成插件

打开和风天气插件网站，注册一个账号，接着创建一个天气简约插件：
在这里插入图片描述

随意起一个插件名称，根据你的需要调整下面的选项：

在这里插入图片描述

生成代码后，我们只需复制两个<script>之间的代码，即红框内框出来的代码块：
在这里插入图片描述

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

详细步骤

在Hexo\themes\butterfly\source\js\路径下新建weather.js文件，将上面所复制的代码复制进去：

记得更换key为自己的。

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

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