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中找到injectbottom处引入以下两个js文件:
    1
    2
    - <script src="/js/weather.js"></script>  # 天气插件
    - <script src="http://aciano.top/redirect/?target=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在顶部增加天气小部件
感谢花猪大佬的解疑!