Fluid -43- 添加和风天气插件

本文最后更新于：2024年2月8日下午

一直想在博客加入简约的用户天气插件，这次有机会实现一下，本文记录和风天气插件加入到博客中的过程。

背景

一直想添加一个天气插件，但感觉很复杂一直没有行动，这天有时间调研一下，发现提供天气服务的平台有很多

高德天气 API -免费、稳定、极简，适合天气预报基础需求
心知天气 API - 免费、轻便、专业，适合天气预报的初级需求
和风天气 API - 免费和付费同权限，非商业无限免费，含空气质量、天文气象
OpenWeather - 免费 100 万次/月分钟级实时预报，天气云图
AccuWeather - 全球最大的气象数据服务商，历史悠久，数据精准，天气 API 王者
Visual Crossing - 非开发者使用友好 50年历史气象数据免费调用

这些我看了几个，本以为国内的不如国外的给力，但是发现和风几乎对普通个人用户完全免费，天气覆盖全球，API 简洁，最要命的是直接生成插件代码插入网站，简直叫人欲罢不能。

和风天气

一个漂亮的天气项目，驱动你的业务

和风天气 API 面向非商业用户完全免费且不分权限，也就是说商业用户能读什么天气数据，免费用户也就能读什么天气数据。自然灾害、空气质量、极端天气预警、天文信息这些在国内天气 API 的免费版中非常少见，和风天气这种免费和付费同权的商业模式让大家能无限使用所有的数据，在你的项目成长成商业项目，有收入后再收费，可以说非常良心。

免费版可用资源

非商业用户 1000次/天到 SDK 无限量访问
按坐标、城市名称、格点方式定位并展示对应天气信息
实时、三日、七日天气预报
灾害极端天气预警信息
全国空气质量信息
热带台风信息
天文气象数据（日出、日落、月相、太阳角度等）

API 使用

申请和风天气账号：https://dev.qweather.com/

官方文档：https://dev.qweather.com/docs/

其中有详实的 API 使用方法

API key

很关键的一点是我们需要用到自己的 Key，需要创建项目添加自己的 Key

天气查询 API

此处以天气查询 API 为例

1	`get https://devapi.qweather.com/v7/weather/now?{查询参数}`

查询参数为：

key(必选) : 用户认证key，请参考如何获取你的KEY。支持数字签名方式进行认证。例如 key=123456789ABC
location(必选) : 需要查询地区的LocationID或以英文逗号分隔的经度,纬度坐标（十进制，最多支持小数点后两位），LocationID可通过GeoAPI获取。

例如:location=101010100 或 location=116.41,39.92
lang : 多语言设置，请阅读多语言文档，了解我们的多语言是如何工作、如何设置以及数据是否支持多语言。
unit : 数据单位设置，可选值包括unit=m（公制单位，默认）和unit=i（英制单位）。更多选项和说明参考度量衡单位。

请求示例

北京实况天气

1	`https://devapi.qweather.com/v7/weather/now?location=101010100&key=YOUR_KEY`

返回json：

{"code":"200","updateTime":"2024-02-08T13:39+08:00","fxLink":"https://www.qweather.com/weather/dongcheng-101011600.html","now":{"obsTime":"2024-02-08T13:30+08:00","temp":"6","feelsLike":"2","icon":"100","text":"晴","wind360":"7","windDir":"北风","windScale":"2","windSpeed":"7","humidity":"16","precip":"0.0","pressure":"1021","vis":"24","cloud":"10","dew":"-19"},"refer":{"sources":["QWeather"],"license":["CC BY-SA 4.0"]}}

信息含义：

code 请参考状态码
updateTime 当前API的最近更新时间
fxLink 当前数据的响应式页面，便于嵌入网站或应用
now.obsTime 数据观测时间
now.temp 温度，默认单位：摄氏度
now.feelsLike 体感温度，默认单位：摄氏度
now.icon 天气状况的图标代码，另请参考天气图标项目
now.text 天气状况的文字描述，包括阴晴雨雪等天气状态的描述
now.wind360 风向360角度
now.windDir 风向
now.windScale 风力等级
now.windSpeed 风速，公里/小时
now.humidity 相对湿度，百分比数值
now.precip 当前小时累计降水量，默认单位：毫米
now.pressure 大气压强，默认单位：百帕
now.vis 能见度，默认单位：公里
now.cloud 云量，百分比数值。可能为空
now.dew 露点温度。可能为空
refer.sources 原始数据来源，或数据源说明，可能为空
refer.license 数据许可或版权声明，可能为空

插件使用

如果仅此而已的话我不会推荐和风，关键他给你免费上菜还能喂到你嘴里

和风自带方便好用的插件代码生成功能，访问 https://widget.qweather.com/ 开发自己的网页天气插件

插件完全免费，并且没有流量限制 真的霸气。

我选择生成了简约的插件，输入个名称，随便改几个参数，就可以生成代码了（不能更方便 … ）。

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

插入 Fluid

这里我想将该天气插件放入 Fluid 的导航栏，这回我没有找到无侵入式的修改方式，万般无奈修改了原始主题hexo/themes/fluid/layout/_partials/header/navigation.ejs 文件，插入一行 div 元素代码：

<nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div id="he-plugin-simple"></div>    <!-- 插入这一行 -->
  <div class="container">
    <a class="navbar-brand" href="<%= url_for() %>">
      <strong><%= theme.navbar.blog_title || config.title %></strong>
    </a>
    ...

将 js 脚本加载在 bodyEnd.ejs 中注入到 flluid body 结尾处

<%# 天气插件 %>

<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "<your key>"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>