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

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

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

如:/chat

image

环境:

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

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

使用教程:

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

步骤

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

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

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

image

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

  1. freshrss1中点击添加订阅,将 https://t.me/s/dianyingshare 填入 源地址 中,订阅源类型 选择 HTML+XPath(Web抓取),然后开始设置相关的元素,订阅源标题随意设置静态文本,你也可以根据后面的 xpath 方式进行查询;

    image

  2. 寻找 文章:快捷键ctrl+shift+c检查元素,选择包含所有文章的布局,左侧代码元素区会自动跳到该代码区域,右击弹出对话框,选择复制 xpath:

    image

    复制的 xpath 如下

    /html/body/main/div/section
    

    该内容填入到 freshrss 中的 XPath 定位:以寻找 文章(很重要) 中。

  3. 文章标题:使用同样的方式,由于 tg 频道内容没有标题,所以我准备直接将内容的文本作为标题,检测单个内容的文本元素,复制它的 xpath:

    image

    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 进行调整:
      image

    3. 由于是【】中的序号对起进行了限制,所以我们删掉【】即可,有的删掉会导致内容过多,所以需要测试什么样的效果最佳。

      比如在这个中,该条目有很多条,所以第一个 div[19]应该就是消息的顺序,我们可以先删掉第一个【】测试一下: /html/body/main/div/section/div/div[1]/div[2]/div[2]
      image
      通过结果以及下面的黄色渲染,我们可以看到已经是把所有的消息列表中的文字已经都涉及到了,说明效果不错。
      由于文章与所有文章是继承父子关系,所以 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]
      

      image

      image

  4. 文章内容:内容和上面标题的唯一区别就是内容可能存在图片,所以在上面的基础上,检查元素的时候选择整个消息,而仅仅是文本:

    复制 xpath 如下:

    /html/body/main/div/section/div[15]/div[1]/div[2]/a/div
    

    放到 xpath helper 中进行查询,并删减列表的限制。
    image

    调整后的 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 的 文章内容
    image

  5. 日期:由于 telegram 的日期没有完全显示在消息中,而是作为了属性,可以通过搜索已经显示的时间来查看是否有,或者自己找:

    1. 搜索消息中的时间,找到了日期的属性值:
      image

    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. 查询一下,成功:image

      结合 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
      

      填入:
      image

    4. 注意:如果之后渲染出来有问题,说明你的日期格式不符合函数strtotime()的格式化要求,参考 DateTime::createFromFormat() (php.net)设置 日期格式化格式

  6. 剩下的文章标签、url 是同样的进行设置 xpath;

  7. 代理设置: 由于 telegram 需要范强,所以需要你在服务器上部署代理服务,推荐 docker 部署 v2raya 2

    1. docker 镜像名称:mzz2017/v2raya
    2. 结合代理服务设置 协议ip:端口、以及 ssl(推荐否,因为有的是走的 ip,直接本地 127.0.0.1,默认用不了 ssl)
      image
  8. 添加后更新订阅,查看效果

    image

易错点

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

  1. freshrss

  2. 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 端口即可

    image.png

    感想[^3]:

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

    参考

    1. Docker - v2rayA
3 操作
tianzhongs 在 2024-08-13 11:19:54 更新了该帖
tianzhongs 在 2024-08-13 11:17:22 更新了该帖
tianzhongs 在 2024-08-13 08:27:20 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...