在赛博空间主动分心——从RSS订阅到每日焕新的图片Widget

Skyline

May 24, 2024

本篇Newsletter，我会分享如何定制自动更新图库的Widget插件，适用于iOS和macOS。本篇文章是创造过程的分享，以及结尾一点延伸思考，偏向实操。遇到枯燥或看不明白的部分，不妨跳过，不碍事。

缘起

我有关注一些Instagram的时尚博主，为了让内容消费更加自主，我订阅了RSS.APP的服务，将Instagram的关注，转换成了RSS订阅的URL，而且每天可以定时收到一封汇总的邮件。

随着时间推移，我发现主动打开邮件查看日报还是麻烦。为此，我打算定制一个可以自动更新的图片Widget。这样以来，可以把Widget放在iPhone或者Mac的桌面，我有空随时可以看两眼图片，岂不美哉？

准备

我们先总览需要用到的服务或者工具，我画了一张图供参考。

简单说，就是用RSS的订阅链接驱动，用Shortcuts（快捷指令）定期下载图片，这样，Photo Widget就可以持续展示最新的Instagram图片。

我会拆解成分四步，一步一步分享具体操作过程，感兴趣的朋友不妨一读。

步骤一：RSS.APP转换Instagram为RSS

鉴于我没有找到Instagram免费抓取图片的好方案，我选择了方便易用的RSS.APP，需要付费使用。它可以把很多难以抓取的网站，都转换成RSS订阅链接，比如X和Instagram。而且，RSS结果的图片链接，可以用于下载而不会出现权限问题。如果是RSSHub抓取Instagram，我遇到了图片权限问题。

如果所示，只需要把想订阅的Instagram的用户链接粘贴，然后点击Generate，就可以很快生成RSS链接。下图展示Louis Vuitton的Instagram转换之后的效果，只需要点击COPY按钮，就可以复制生成好的RSS链接。

步骤二：用Node解析RSS中的图片链接

为了提取RSS的链接，我特地写了一个简单的Node接口，解析RSS返回结果并把图片保存到数组返回。或许你会问，为什么要这么复杂呢？快捷指令是否可以直接处理？

快捷指令的确可以直接实现，我列出来供大家参考。问题在于，用快捷方式解析，不可控，偶尔会出现图片遗漏的情况。而自己写解析图片链接的代码，就不再是黑盒，也可以解析获取所有RSS中的图片。

解析的代码比较简单，我也顺便让GPT生成了代码注释：

const axios = require('axios');
const Parser = require('rss-parser');
const parser = new Parser();
/**
* 这个函数从给定的 RSS 源 URL 中提取所有图片的 URL。
*
* @param {string} url - RSS 源的 URL
* @returns {Promise<string[]>} - 包含所有提取到的图片 URL 的数组
*/
async function fetchRSSImages(url) {
try {
const response = await axios.get(url);
const feed = await parser.parseString(response.data);
const images = feed.items.map(item => {
// 解析图片URL，假设图片URL在item的content中以<img src="URL">的形式出现
const imgRegex = /<img[^>]+src="([^">]+)"/;
const match = item.content.match(imgRegex);
return match ? match[1] : null;
}).filter(url => url != null);
return images;
} catch (error) {
console.error('Error fetching or parsing RSS feed:', error);
return [];
}
}
module.exports = fetchRSSImages;

最后会暴露一个接口，写在项目的API文件夹，用于实际调用：

const fetchRSSImages = require('../src/utils/parser');
module.exports = async (req, res) => {
// 检查请求中是否包含url参数，如果没有则返回400状态码和错误信息
if (!req.query.url) {
return res.status(400).json({ error: 'URL parameter is required' });
}
try {
// 调用fetchRSSImages函数获取图片列表
const images = await fetchRSSImages(req.query.url);
// 返回200状态码和图片列表
res.status(200).json(images);
} catch (error) {
// 捕获并记录错误信息，返回500状态码和错误信息
console.error('Error in API endpoint:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
};