添加天气组件

今天来整天气组件

基于hexo和butterfly主题的天气组件

今天来整天气组件，受孙老师启发然后会弄了。

1.申请天气组件账号

推荐和风天气，点此注册

2.创建组件

创建一个自己喜欢的组件外观，创建插件然后点击生成代码，一会用

3.添加配置文件

在blog\themes\butterfly\layout\includes\headers目录下的nav.pug文件中添加以下内容

1	<div id="he-plugin-simple"></div>

没改过的话应该是这样子的,插入在第四行

nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
    <div id="he-plugin-simple"></div>
  #menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
      a.site-page
        i.fas.fa-bars.fa-fw

4.添加weather.js

将刚才生成的代码复制到这个文件里，在key的字段前面加两个位置的字段,具体数值后续调试

1 2	"left": "100", "top": "8",

记得把开头的<div>语句和开头结尾的<script>都删掉

5.主题配置文件里引入

在配置文件_config.butterfly的inject属性中bottom:里引入代码

1
2
3

- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script async src="/js/weather.js"></script>