Butterfly 主题添加天气小部件

小孙同学

发布于 2022-01-17 19:30:08

8440

发布于 2022-01-17 19:30:08

文章被收录于专栏：小孙同学的学习笔记小孙同学的学习笔记

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

一、前言

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

二、效果预览

电脑端
手机端

三、具体步骤

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.butterfly的inject属性中引入以下代码。

- <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后运行博客，调试left和top属性，使天气小部件显示在合适位置。

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

四、后记

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除

hexo

javascript

api

访问管理

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度