【Hexo】Hexo-Butterfly添加天气插件

43

我的小站——半生瓜のblog

感谢糖果屋Akilar店长的帮助——Akilarの糖果屋

2021.11.15更新。 这里推荐一下小孙同学添加的天气插件，更加美观。——Butterfly 主题添加天气小部件

Hexo-Butterfly添加天气插件

效果如图所示： 在这里插入图片描述

就是JS插件的字体大小我不会调，稍微有一点瑕疵，不过影响不大。

我用的是心知天气的天气插件(其他天气插件同理)。

首先，先到心知天气的官网注册一个账号——心知天气。

登录，申请一个免费版，然后在产品的下拉栏中选择天气插件，然后点击立即免费使用。

然后，在下面选择显示参数。

在这里插入图片描述

点击生成代码并复制。

打开主题文件目录 在这里插入图片描述

找到并打开nav.pug

将下面这行代码放入合适的位置

<div id="tp-weather-widget"></div>

例如:

在这里插入图片描述

保存并关闭

接着，在此路径下创建一个JS文件，名称随意。

在这里插入图片描述

打开，将刚才复制代码中的 中间的内容粘贴进去。

就是将下图中画横线的代码删除。

在这里插入图片描述

保存并关闭

最后，找到主题配置文件_config.yml

打开，在inject处引入刚才创建的JS文件(注意文件名称)。

在这里插入图片描述

保存并退出

hexo clean&&hexo g&&hexo d即可完成