「打造你的赛博名片📇」我在Github做天气预报☀️☁️⛅️⛈️ WeatherPainting开源整活

Hi!这里是JustHappy，上周北京大风天，闲来无事，听着窗外呼呼的大风，突然来灵感了，于是乎......我写了一个天气预报。有什么不一样呢，快来看看吧！

先向大家展示一下我的Github个人页，是不是有些特别？

哈哈，这就是我打造的一个Github个人页的天气组件，每天更新四次天气信息

仓库已经开源：需要的朋友自取哈，用起来很简单，仓库中有文档，下面是链接
WeatherPainting

所以这个东西是怎么整的？

🛠️ 实现原理

整个项目的核心是通过 GitHub Actions 定时获取天气数据，生成 SVG 图片，并展示在 GitHub 个人页上。其实很简单，我们从几个方面入手吧

⛅️天气数据从哪里来？

既然是开源的项目，我们就用开源免费的Api去获取天气数据，我找到的是 open-meteo.com/

很简单，我们只需要把需要查询地址的经纬度传给它就行了

js 复制代码

const latitude = 26.3174;
const longitude = 119.5384;
const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=Asia%2FShanghai&forecast_days=7`;

const response = await fetch(url);

如何去构建我们想要的图像？

我为什么选择SVG?有以下几点原因吧：

可以从Iconfont上直接找到很多好看的图标物料,这是我选择的天气-填充
方便JS操作构建最终的图像，标签化，逻辑简单明了
有后期升级为动态图片的潜力

我尝试过不同类型的动态图片，各有各的优缺点，比如Gif帧率不高观感不行、canvas没有SVG方便操作

如何更新天气数据？

在 .github/workflows 目录下，我配置了一个 GitHub Actions 工作流，设置为每天运行四次。每次运行时，会执行以下操作：

获取最新的天气数据
生成新的 SVG 图片
将图片推送到 GitHub 仓库中

如何挂载我们的图像？

直接通过仓库下对应的地址去引用？抱歉，我发现了一下问题

⚠️ 1. GitHub 对 `.svg` 的 MIME 类型处理有一定安全策略

SVG 文件是可以嵌入 JavaScript 脚本的，所以 GitHub 对 SVG 文件（尤其是来自 main 分支的 raw.githubusercontent.com 地址）做了更严格的 防 XSS 限制 ，在某些上下文（比如 Profile README）会被拒绝加载。

于是呼我也只能使用骚操作

使用 GitHub Pages 托管 SVG

你可以用 GitHub Pages 创建一个静态站，然后把 SVG 放里面，比如：

你只需要在主仓库启用 GitHub Pages，然后把图片放进目录，你就可以在GitHub个人页的README中引用啦。于是呼我们的开源项目也是有了github page😂😂

有关开源的思考？

我想每个参与开源或者想参与开源的朋友都听说过Linus吧?对！就是那个创造了Linux和Git的男人

Linus认为驱动人类的是三点动机：生存，人在社会秩序中的位置，以及娱乐

这可能是他自传叫《just for fun》的原因之一吧，

有时候我会想为什么有那么多朋友参与开源，却始终是带着某个"目的"来的，为了完成某个"指标"而来的，却丢失了最开始的乐趣，也有很多人问："你做这个的目的是什么？有什么意义？"

所以我回答：名利固然重要，但是有的时候你可以暂时忘掉，享受纯粹，但行好事莫问前程，Just for fun, Just Happy 也许你会收获不同的东西

哈哈！最后，如果你觉得不错，可以给小弟点个star吗？

➡️ 链接直达 github WeatherPainting