FreshRss HTML+XPath (Web 抓取) 教程—— RSS 网页抓取

在配置 FreshRss 的时候，对于一些网站的 rss 源有一些异常问题，遂采用 HTML+XPath (Web 抓取)来进行抓取获取是不错的选择。

在使用 rss app 的时候，有的订阅在 fresh 会出现莫名奇妙的问题，我也无法解决。

如：/chat

环境：

安装 xpath helper 插件，方便查找元素

google 商店下载地址：XPath Helper - Chrome 应用商店 (google.com)

使用教程：

安装好了之后，按 ctrl+shitf+x 唤醒浮窗，然后按住 shift 加鼠标单击，就能查找元素的 xpath。

步骤

这里以 telegram 某个公开频道作为示例：

动漫：https://t.me/dianyingshare

域名后面添加/s，此页面能直接预览公开频道的内容：https://t.me/s/dianyingshare ，如图

需要填写的部分主要是 freshrss 的高级选项：

freshrss¹中点击添加订阅，将 https://t.me/s/dianyingshare 填入 源地址 中，订阅源类型 选择 HTML+XPath(Web抓取），然后开始设置相关的元素，订阅源标题随意设置静态文本，你也可以根据后面的 xpath 方式进行查询；
寻找文章：快捷键ctrl+shift+c检查元素，选择包含所有文章的布局，左侧代码元素区会自动跳到该代码区域，右击弹出对话框，选择复制 xpath：

复制的 xpath 如下
```
/html/body/main/div/section
```
该内容填入到 freshrss 中的 XPath 定位：以寻找文章(很重要) 中。
文章标题：使用同样的方式，由于 tg 频道内容没有标题，所以我准备直接将内容的文本作为标题，检测单个内容的文本元素，复制它的 xpath：

xpath 如下：/html/body/main/div/section/div[18]/div[1]/div[2]/div[2]

可以看到 div 中有很多的列表序号，这样会导致无法选择所有的消息，所以我们需要用到 xpath helper 来查询（浏览器自带的也可以，但是不够直观看到结果）：
1. 按住ctrl+shift+x唤出 xpath helper 的浮窗，或者点击该扩展的图标唤出；
2. 将复制的 xpath 填入，能立刻看到结果只有一条，这还不够，所以我们需要对 xpath 进行调整：
3. 由于是【】中的序号对起进行了限制，所以我们删掉【】即可，有的删掉会导致内容过多，所以需要测试什么样的效果最佳。
  
  比如在这个中，该条目有很多条，所以第一个 div[19]应该就是消息的顺序，我们可以先删掉第一个【】测试一下： /html/body/main/div/section/div/div[1]/div[2]/div[2]
  
  通过结果以及下面的黄色渲染，我们可以看到已经是把所有的消息列表中的文字已经都涉及到了，说明效果不错。
  由于文章与所有文章是继承父子关系，所以 freshrss 需要使用 descendant:: 来进行表示：先将前面所有文档的 xpath 复制下来，去掉公共的部分，保留差异的部分，在前面添加 descendant:: 即可。
```
所有文章：		/html/body/main/div/section
查找的单个标题：	/html/body/main/div/section/div/div[1]/div[2]/div[2]
填入的子孙xpath：	descendant::div/div[1]/div[2]/div[2]
```
文章内容：内容和上面标题的唯一区别就是内容可能存在图片，所以在上面的基础上，检查元素的时候选择整个消息，而仅仅是文本：

复制 xpath 如下：
```
/html/body/main/div/section/div[15]/div[1]/div[2]/a/div
```
放到 xpath helper 中进行查询，并删减列表的限制。

调整后的 xpath：
```
/html/body/main/div/section/div/div[1]/div[2]
```
根据第一个所有文章的进行对比，然后设置成子孙 xpath 格式：
```
所有文章：		/html/body/main/div/section
内容：			/html/body/main/div/section/div/div[1]/div[2]
调整后：			descendant::div/div[1]/div[2]
```
复制到 freshrss 的 文章内容 中
日期：由于 telegram 的日期没有完全显示在消息中，而是作为了属性，可以通过搜索已经显示的时间来查看是否有，或者自己找：
1. 搜索消息中的时间，找到了日期的属性值：
2. xpath 为：
```
/html/body/main/div/section/div[23]/div[1]/div[2]/div[3]/div/span[3]/a/time
```
  这还并不准确，因为这是渲染到浏览器中的能看见的值 22:12，而我们需要是属性值 2024-08-08T14:12:04+00:00，结合 xpath 语法，属性值是加 /@属性名称 的方式，所以就是：
```
/html/body/main/div/section/div[23]/div[1]/div[2]/div[3]/div/span[3]/a/time/@datetime
```
3. 查询一下，成功：
  
  结合 freshrss 的子孙格式要求，修改后为：
```
/html/body/main/div/section
/html/body/main/div/section/div[23]/div[1]/div[2]/div[3]/div/span[3]/a/time/@datetime
结果：descendant::div[23]/div[1]/div[2]/div[3]/div/span[3]/a/time/@datetime
```
  填入：
4. 注意：如果之后渲染出来有问题，说明你的日期格式不符合函数strtotime()的格式化要求，参考 DateTime::createFromFormat() (php.net)设置 日期格式化格式。
剩下的文章标签、url 是同样的进行设置 xpath；
代理设置：由于 telegram 需要范强，所以需要你在服务器上部署代理服务，推荐 docker 部署 v2raya ²
1. docker 镜像名称：mzz2017/v2raya
2. 结合代理服务设置 协议、ip:端口、以及 ssl（推荐否，因为有的是走的 ip，直接本地 127.0.0.1，默认用不了 ssl）
添加后更新订阅，查看效果

易错点

有的网页看上去是 html+css，其实是 xml+css，查看源代码，查看文件头就知道了，这类从界面上看不出来区别，因为渲染出来和普通 html 并无二致；
xpath 的列表限制，需要频繁调整删减【】，达到较好的效果即可；
子孙 descendant::的相对路径都是根据你设置的第一个寻找文章（也就是所有文章）的 xpath 来的，这步也需要注意删减【】中的内容
代理问题，建议用 docker 部署吧，比较无脑；
如果浏览器自带的 xpath 选择有问题，你也可以使用 xpath helper 的 xpath 选择器去使用，他能够对 class 样式等做更多的限制。

freshrss

‍ ↩
v2ray Linux 配置教程

docker 安装
```
#镜像获取
docker pull mzz2017/v2raya
# 运行：非全局代理
docker run -d \
  -p 2017:2017 \
  -p 20170-20172:20170-20172 \
  --restart=always \
  --name v2raya \
  -e V2RAYA_V2RAY_BIN=/usr/local/bin/v2ray \
  -e V2RAYA_LOG_FILE=/tmp/v2raya.log \
  -v /etc/v2raya:/etc/v2raya \
  mzz2017/v2raya
```
然后访问 2017 端口即可

感想[^3]：

突然意识到了 web GUI 的意义，以前觉得 web GUI 很不友好，现在看来非常友好，因为在跨平台的时候，是最好的方式，不用在服务器上安装 GUI 系统界面，软件本身支持 GUI 会更好使用。

参考
1. Docker - v2rayA ↩

FreshRss HTML+XPath (Web 抓取) 教程—— RSS 网页抓取

环境：

步骤

易错点

freshrss

v2ray Linux 配置教程

docker 安装

参考

相关帖子

思源的星号 * 很难打出来！

frp: 内网穿透的革命性工具

Go 1.23: 性能提升与新特性并重的里程碑版本

建议出个自动添加标题序号的功能

小白 docker 部署思源失败，求助

Vue 里使用 vditor 怎么配置默认字体呢? 或者说再添加一种字体进去

T-MAC: 突破边缘设备算力瓶颈，让 LLM 飞入寻常百姓家

欢迎来到这里！