从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的时间会越来越多, 那么有没有一个工具能快速的将博客发布到不同的平台呢? 或者有没有一个工具, 可以把html直接转化为技术平台能够识别的“语言”直接发布呢?

我们都知道程序员最爱的写博客的“语言”就是makedown, 并且目前大部分的技术社区都支持makedown语法, 所以说只要有makedown, 我们就能快速的同步到不同的技术平台.

也许有人会说, 我们写博客直接用makedown语法写不就好了? 的确这样做可以满足需求, 但缺点就是我们本地必须要保存一份makedown文件, 如果博客内容涉及到图片, 我们还需要维护一个img目录, 这样每次在不同技术社区发布文章还是会很麻烦, 所以综上我们开发了一款自动爬取html内容并一键转换为makedown的工具, 这样我们就可以“肆无忌惮的”发布博客了.

你将收获

• turndown的使用技巧
• vue + nuxt项目开发方式
• nodejs爬虫相关应用

github地址笔者将在文末附上, 感兴趣的朋友可以一起共建, 学习和探索.

效果演示

客户端

思路

先理一下思路：<br/>

• 输入一个链接地址
• 获取服务端返回的 html 串
• 将 html 串 转换为 md 串
• 同步显示预览到编辑器中

为什么选择 turndown

客户端最重要的一步是 html 转 md，这里我们使用的 turndown。

为什么使用 turndown 呢，原因如下：

• Talk is cheap, Show me the code. 做技术文章很关键的一个功能是 代码块，没有代码的文章是没有灵魂的。比较过几个 html2md 插件，turndown 的代码块显示效果和兼容性最好。
• turndown 也支持自定义规则，灵活可变，可自定义各种语法标签和匹配规则。
• turndown 还支持第三方插件 turndown-plugin-gfm，支持集成 GFM（MD 的超集 GitHub Flavored Markdown）、table、strikethrough等语法。

具体实现

1  // 引入第三方插件
2  import { gfm, tables, strikethrough } from 'turndown-plugin-gfm'
3
4  const turndownService = new TurndownService({ codeBlockStyle: 'fenced' })
5  // Use the gfm plugin
6  turndownService.use(gfm)
7
8  // Use the table and strikethrough plugins only
9  turndownService.use([tables, strikethrough])
10
11  /**
12   * 自定义配置（rule名不能重复）
13   * 这里我们指定 `pre` 标签为代码块，并在代码块的前后加个换行，防止显示异常
14   */
15  turndownService.addRule('pre2Code', {
16    filter: ['pre'],
17    replacement (content) {
18      return '```\n' + content + '\n```'
19    }
20  })

额外功能

支持自动获取链接文章标题，无需手动去原文复制。

服务端

这里我们使用的服务端是 node.js，用前端的框架写服务端，体验杠杠的。

思路

先理一下思路：

• 获取前端传递的链接地址
• 通过请求获取 html 串
• 根据不同平台域名获取不同的 dom
• 转换图片和链接的相对路径为绝对路径
• html 底部添加转载来源声明
• 获取文章的标题 title
• 返回 title 和 html 给前端

具体实现

获取前端传递的链接地址

这里直接使用 node 的自带语法，我们采用的是 get 形式传递，用 query 即可

1const qUrl = req.query.url

通过请求获取 html 串

这里我们是用 request 进行请求

1 request({
2   url: qUrl
3 }, (error, response, body) => {
4   if (error) {
5     res.status(404).send('Url Error')
6     return
7   }
8   // 这里的 body 就是文章的 `html`
9   console.log(body)
10 })

根据不同平台域名获取不同的 dom

由于技术平台众多，每个平台的文章内容标签、样式名或 id 会有差异，需要针对兼容。

首先先用 js-dom 去模拟操作 dom，封装一个方法

1/**
2 * 获取准确的文章内容
3 * @param {string} html html串
4 * @param {string} selector css选择器
5 * @return {string} htmlContent
6 */
7const getDom = (html, selector) => {
8  const dom = new JSDOM(html)
9  const htmlContent = dom.window.document.querySelector(selector)
10  return htmlContent
11}

兼容不同的平台，应用不同的 css 选择器

1// 比如掘金，内容块的样式名为 .markdown-body，内容里会有 style 标签样式和一些多余的复制代码文字，通过原生 dom 操作删掉
2if (qUrl.includes('juejin.cn')) {
3  const htmlContent = getBySelector('.markdown-body')
4  const extraDom = htmlContent.querySelector('style')
5  const extraDomArr = htmlContent.querySelectorAll('.copy-code-btn')
6  extraDom && extraDom.remove()
7  extraDomArr.length > 0 && extraDomArr.forEach((v) => { v.remove() })
8  return htmlContent
9}
10
11// 再比如 oschina，内容块的样式名为 .article-detail，内容里会有多余的 .ad-wrap 内容，照样删掉
12if (qUrl.includes('oschina.net')) {
13  const htmlContent = getBySelector('.article-detail')
14  const extraDom = htmlContent.querySelector('.ad-wrap')
15  extraDom && extraDom.remove()
16  return htmlContent
17}
18
19// 最后匹配通用标签。优先适配 article 标签，没有再用 body 标签
20const htmlArticle = getBySelector('article')
21if (htmlArticle) { return htmlArticle }
22
23const htmlBody = getBySelector('body')
24if (htmlBody) { return htmlBody }

转换图片和链接的相对路径为绝对路径，方便以后查找源路径

1// 通过原生api - URL 获取链接的源域名
2const qOrigin = new URL(qUrl).origin || ''
3
4// 获取图片、链接的绝对路径。通过 URL 将 `路径+源域名` 转换为绝对路径，不熟悉的同学请自行了解
5const getAbsoluteUrl = p => new URL(p, qOrigin).href
6
7// 转换图片、链接的相对路径，不同平台的图片懒加载属性名不一样，需要做特定兼容
8const changeRelativeUrl = (dom) => {
9  if (!dom) { return '<div>内容出错~</div>' }
10  const copyDom = dom
11  // 获取所有图片
12  const imgs = copyDom.querySelectorAll('img')
13  // 获取所有链接
14  const links = copyDom.querySelectorAll('a')
15  // 替换完所有路径返回新 dom
16  imgs.length > 0 && imgs.forEach((v) => {
17    /**
18    * 处理懒加载路径
19    * 简书：data-original-src
20    * 掘金：data-src
21    * segmentfault：data-src
22    */
23    const src = v.src || v.getAttribute('data-src') || v.getAttribute('data-original-src') || ''
24    v.src = getAbsoluteUrl(src)
25  })
26  links.length > 0 && links.forEach((v) => {
27    const href = v.href || qUrl
28    v.href = getAbsoluteUrl(href)
29  })
30  return copyDom
31}
32
33// 在获取不同平台的文章内容 getBody 方法里，应用 changeRelativeUrl 方法
34const getBody = (content) => {
35  ...
36  ...
37  return changeRelativeUrl(htmlContent)
38}

底部添加转载来源声明，以防侵权

这个就不多做解释了，很简单。

1// 底部添加转载来源声明
2const addOriginText = (dom) => {
3  const html = dom.innerHTML
4  const resHtml = html + `<br/><div>本文转自 <a href="${qUrl}" target="_blank">${qUrl}</a>，如有侵权，请联系删除。</div>`
5  return resHtml
6}
7
8// 在获取不同平台的文章内容 getBody 方法里，应用 addOriginText 方法
9const getBody = (content) => {
10  ...
11  ...
12  return addOriginText(changeRelativeUrl(htmlContent))
13}

获取文章的标题 title

1// 获取文章的 title
2const getTitle = (content) => {
3  const title = getDom(content, 'title')
4  if (title) { return title.textContent }
5  return '获取标题失败~'
6}

返回 title 和 html 给前端

1request({
2  url: qUrl,
3  headers: {}
4}, (error, response, body) => {
5  if (error) {
6    res.status(404).send('Url Error')
7    return
8  }
9  // 设置 json 响应类型
10  res.type('text/json')
11  const json = {
12    code: 1,
13    title: getTitle(body),
14    html: getBody(body)
15  }
16  res.status(200).send(json)
17})

实际应用

这个开源工具的应用场景非常广泛, 我们几乎可以将任何网页链接转换为md内容, 同步到自己的博客或者内容管理平台, 但是大家需要有版权意识, 做一个遵纪守法的好“网民”.

支持环境

现代浏览器及 IE11。

参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😃

• 通过 Issue 报告 bug。
• 提交 Pull Request 一起改进。
• github地址: 传送门