Hexo：Butterfly添加天气组件

教程链接

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

实际效果

https://aciano.top/

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

生成插件

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

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

在这里插入图片描述

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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": "**************"
  }
}

详细步骤

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

    记得更换key为自己的。

  1. 在主题配置文件_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
    在这里插入图片描述
  1. 在\themes\butterfly\layout\includes\header路径下找到nav.pug文件，添加如下代码：
    1
    2
    #he-plugin-simple
    #none_space
    在这里插入图片描述

注意对齐。

  1. 在\themes\butterfly\source\css\_layout\head.styl中将#blog_name替换为#none_space:
    在这里插入图片描述
    在这里插入图片描述
    最后三连走起，就能看到效果了！

参考链接

Hexo在顶部增加天气小部件
感谢花猪大佬的解疑！