likes
comments
collection

Puppeteer爬取掘金文章

作者站长头像
站长
· 阅读数 104

很多时候我们需要使用爬虫去爬取别人网站中的文章,但是大一点的博客社区都有反爬功能,频繁的使用fetch请求会导致IP被封禁或者触发人机验证。本文分享以我自己写的程序使用puppeteer爬取掘金文章,本程序使用Node.js+Puppeteer+TypeScript完成。

项目地址:https://github.com/Lrunlin/puppeteer-juejin

参考文章:用户使用前需要参考本篇文章设置 Chrome 启动端口后,系统使用本地 Chrome 进行自动化爬取(最好已经登录了掘金账号,降低被限流的可能)

Puppeteer爬取掘金文章

功能

  1. 文章图片下载
  2. 文章内容、标题、介绍、封面、文章图片的保存

功能实现

标签链接获取

首先我们需要填写指定标签的Key,使得程序知道你想要什么类型的文章,程序可以再指定的链接进行抓取。

Puppeteer爬取掘金文章

我这里写了一些常用的,大家有其他需要可以再扩充一下,{label:href}

Puppeteer爬取掘金文章

同时根据用户填写的文章类型,转换为对应的目录链接。

Puppeteer爬取掘金文章

目录获取

因为掘金不同于思否等社区,掘金采用了滚动加载,所以我们需要让浏览器模拟滚动操作,来获取需要爬取的文章目录。

Puppeteer爬取掘金文章

在生产环境下我们使用setInterval滚动4000像素,并且让函数运行在 page.evaluate下,该函数的回调函数是在浏览器中执行的而并非Node。 在滚动到4000像素时停止滚动,并且对链接进行去重。主要是判断public下的文件夹名在对比文章链接的后缀。

Puppeteer爬取掘金文章

数据保存

为了防止被网站的数据埋点识别到是爬虫我们在每次进入网站时进行一次滚动,滚动到评论框的位置。

Puppeteer爬取掘金文章

文字内容保存

文字内容的保存相对简单,只需要使用cheerio处理一下即可,这个插件可以说是Node版本的JQuery。用来在服务端处理HTML字符串。简单看一席网站DOM结构即可,获取文字数据非常简单。

Puppeteer爬取掘金文章

数据过滤

封装了几个函数来修改一下DOM结构在保存,主要为:

  1. 处理link.juejin.cn跳转外站前需要确认的问题。
  2. 处理pre代码块,设置为pre language-xxx的格式
  3. 很多时候作者会参加掘金的活动,在开头会表明链接,删掉。
  4. 这个是最重要的修改完的文章内容需要对img标签进行处理,在下载图片后我们去掉了src属性的前缀,只保留了文件夹明。这样在我们上传图片后可以自己写程序来修改src路径。总而言之就是不要把掘金的图片链接放到自己的网站上,万一掘金图片设置了refere,图片迁移的成本很大。我们需要写程序在图片。

如果你看了本站的项目源码会发现本站的文章数据库中也是只保存了文章内容,在get函数中使用cheerio来为图片添加CDN地址,这样即使我们换了域名,不需要动数据。(你也可以再处理一下,保存数据库添加前缀)

Puppeteer爬取掘金文章

图片保存

我们在下载图片后删除对应img标签的src路径前缀,只保留用户名。获取用户名后处理img标签如果下载失败了就把对应的img删除。

Puppeteer爬取掘金文章

Puppeteer爬取掘金文章

封装函数使用axios请求指定的路径然后下载到指定的文件夹即可。使用UUID生成一个webp格式的名字使用sharp插件进行格式修改。

流程

编写star函数,进行for循环并且递归执行,将tags中的链接全部抓取后休息10秒钟后自动重新运行。

  1. 启动浏览器获取数据
  2. 获取tag对应的链接
  3. 对文章内容进行处理(链接、代码块、标题处理等)
  4. 下载图片并置换src路径
  5. 启动,for循环+递归,程序可以一直运行

启动

参考文章用户使用前需要参考本篇文章设置 Chrome 启动端口后,系统使用本地 Chrome 进行自动化爬取(最好已经登录了掘金账号,降低被限流的可能)

  1. 填写config中的tags
  2. yarn
  3. yarn dev