为网站添加天气小部件(基于Hexo框架+Butterfly主题)

  如果你想要做一件事情,首先,你应该去了解这件事情,了解这件事情别人有没有做过。第二,这件事情你可不可以做的比别人更好。

  本文同步发表在我的个人博客上,欢迎大家访问,https://sunguoqi.com/2021/09/01/weather/


一、前言

  我不是魔改大佬,但有一颗折腾的心,在网站上添加天气小部件,感觉还是有点意思的。但浏览了仅有的几篇相关教程之后,感觉写的都差点意思,于是就自己写下了这篇文章。

二、效果预览

电脑端

手机端

三、具体步骤

1、申请天气API

  国内天气API有多种,此处推荐和风天气,如果您第一次使用和风天气,首先,您应该去官网注册一个账号,点我进入

  申请账号并登录后,请到和风天气开发平台创建一个简约插件点我进入

  配置插件的相关属性,首先,您应该为您的插件取一个名字,内容属性均可以自定义。

  注意:为了确保天气小部件的正常显示,这里选择固定在浏览器中,具体位置后续在调节。

  设置完成后,点击下面的生成代码即可,生成的代码如下。

<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FF9900",
    "tmpSize": "16",
    "cityColor": "4A86E8",
    "citySize": "16",
    "aqiColor": "FF9900",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "true",
    "vertical": "top",
    "horizontal": "left",
    "left": "10",
    "top": "10",
    "key": "您自己的key"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

2、添加div

  打开您的博客所在文件夹,在blog\themes\butterfly\layout\includes\headers目录下的nav.pug文件中添加以下内容。

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

也可以写成这种形式#he-plugin-simple

3、添加weather.js

  打开您的博客所在文件夹,在blog\themes\butterfly\source\js目录下添加weather.js文件,并填入一下内容。

WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "4A86E8",
    "tmpSize": "16",
    "cityColor": "FF9900",
    "citySize": "16",
    "aqiColor": "4A86E8",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "0px 0px 0px 0px",
    "shadow": "0",
    "language": "auto",
    "fixed": "true",
    "vertical": "center",
    "horizontal": "center",
    "left": "125",
    "top": "20",
    "key": "你的key"
  }
}

4、Inject引入

  在配置文件_config.butterflyinject属性中引入以下代码。

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

5、调试

  在终端输入hexo clean hexo g hexo s后运行博客,调试lefttop属性,使天气小部件显示在合适位置。

  前端调试后,记修改weather.js文件中的left top属性。

四、后记

  大致流程就是这样,其实很简单,emmm,好吧,确实很简单,欢迎各位大佬在评论区留言交流。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小孙同学Coding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值