注册和风天气

  1. 注册网址：
引用站外地址
和风天气
和风天气官网地址
  1. 插件名称随便写
  2. 内容自定义
  3. 样式自行斟酌修改，根据自己到达博客情况进行修改（背景颜色最好是透明）
  4. 生成代码

引入文件

新建css和js

创建名为weather.js文件名，放入到\themes\butterfly\source\js\文件夹下。

把以下代码放入到weanther.js下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
WIDGET = 
{ "CONFIG": { 
  "modules": "012", 
  "background": "5", 
  "tmpColor": "FFFFFF", 
  "tmpSize": "16", 
  "cityColor": "FFFFFF", 
  "citySize": "16", 
  "aqiColor": "FFFFFF", 
  "aqiSize": "16", 
  "weatherIconSize": "24", 
  "alertIconSize": "18", 
  "padding": "10px 10px 10px 10px", 
  "shadow": "0", "language": "auto", 
  "fixed": "false", "vertical": "top", 
  "horizontal": "left", 
  "key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 
} }

这个是我的样式，自行修改

1
2
3
#和风天气
- <script async src="/js/weather.js"></script>
- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

修改天气插件位置

  • 找到\themes\butterfly\layout\includes\header\nav.pug文件，在nav.pug增加#he-plugin-simple和#none_space两个代码（注意缩进）。
1
2
3
4
5
6
7
8
nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]

+  #he-plugin-simple
+  #none_space

  #menus
  • 找到\themes\butterfly\source\css_layout\head.styl，修改head.styl文件，把#blog_name替换为#none_space(CTRL+F搜索，这里就不截图了，大约在256行那里)。

保存，然后三连