侧边栏壁纸
  • 累计撰写 278 篇文章
  • 累计创建 3 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

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

xuanxuan
2021-06-17 / 0 评论 / 0 点赞 / 24 阅读 / 2811 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

我的小站——半生瓜の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即可完成

0

评论区