共建,学习和探索.效果演示客户端思路先理

　　

共建,学习和探索.效果演示客户端思路先理

　　

　　

　　这几年涌现了很多技术博客和技术社区，也有很多技术同仁开始创建自己的博客。我们可以将我们的博客同步到不同的技术平台，但是随着技术平台数量的增加，我们文章Sync 会花费越来越多的时间，那么有没有可以快速将博客发布到不同平台的工具？或者有没有什么工具可以直接把html转成技术平台可以直接识别的“语言”，发布怎么样？

　　我们都知道程序员最喜欢写博客的“语言”是makedown，而且目前大部分技术社区都支持makedown语法，所以只要有makedown，我们就可以快速同步到不同的技术平台。

　　也许有人会说我们不能只用makedown语法来写博客？这样确实可以满足需求，但缺点是必须在本地保存一个makedown文件。如果博客内容涉及图片，我们还是需要维护一个img目录，这样每次在不同的技术社区发布文章会很麻烦，所以总结一下，我们开发了一个自动抓取html内容的工具，一键转换成美图，让我们可以“肆无忌惮”“发了博客。

　　你会收获

　　文末附上作者github地址，感兴趣的朋友可以一起搭建、学习、探索。

　　效果演示

　　

　　

　　客户想法

　　先想想思路：

　　输入链接地址

　　获取服务器返回的html字符串，将html字符串转换为md字符串，在编辑器中同步显示预览

　　

　　

　　为什么选择夜床

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

　　为什么要使用调低？原因如下：

　　具体实现

　　// 引入第三方插件

import { gfm, tables, strikethrough } from 'turndown-plugin-gfm'

const turndownService = new TurndownService({ codeBlockStyle: 'fenced' })

// Use the gfm plugin

turndownService.use(gfm)

// Use the table and strikethrough plugins only

turndownService.use([tables, strikethrough])

/**

* 自定义配置（rule名不能重复）

* 这里我们指定 `pre` 标签为代码块，并在代码块的前后加个换行，防止显示异常

*/

turndownService.addRule('pre2Code', {

filter: ['pre'],

replacement (content) {

return '```\n' + content + '\n```'

}

})

　　额外功能

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

　　服务端

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

　　思考

　　首先想到一个思路：获取前端传递过来的链接地址。通过请求获取html字符串。根据不同平台的域名获取不同的dom。转换图片的相对路径并链接到绝对路径。在底部添加转载的源语句，以获得文章的标题。 * 将title和html返回给前端

　　

　　

　　获取前端传过来的链接地址的具体实现

　　这里我们直接使用node自己的语法，我们使用get形式传递，直接使用query

　　通过请求获取html字符串

　　这里我们正在请求请求

　　 request({

url: qUrl

}, (error, response, body) => {

if (error) {

res.status(404).send('Url Error')

return

}

// 这里的 body 就是文章的 `html`

console.log(body)

})

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

　　由于技术平台众多，每个平台的文章content标签、样式名称或id会有所不同，要注意兼容性。

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

　　/**

* 获取准确的文章内容

* @param {string} html html串

* @param {string} selector css选择器

* @return {string} htmlContent

*/

const getDom = (html, selector) => {

const dom = new JSDOM(html)

const htmlContent = dom.window.document.querySelector(selector)

return htmlContent

}

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

　　// 比如掘金，内容块的样式名为 .markdown-body，内容里会有 style 标签样式和一些多余的复制代码文字，通过原生 dom 操作删掉

if (qUrl.includes('juejin.cn')) {

const htmlContent = getBySelector('.markdown-body')

const extraDom = htmlContent.querySelector('style')

const extraDomArr = htmlContent.querySelectorAll('.copy-code-btn')

extraDom && extraDom.remove()

extraDomArr.length > 0 && extraDomArr.forEach((v) => { v.remove() })

return htmlContent

}

// 再比如 oschina，内容块的样式名为 .article-detail，内容里会有多余的 .ad-wrap 内容，照样删掉

if (qUrl.includes('oschina.net')) {

const htmlContent = getBySelector('.article-detail')

const extraDom = htmlContent.querySelector('.ad-wrap')

extraDom && extraDom.remove()

return htmlContent

}

// 最后匹配通用标签。优先适配 article 标签，没有再用 body 标签

const htmlArticle = getBySelector('article')

if (htmlArticle) { return htmlArticle }

const htmlBody = getBySelector('body')

if (htmlBody) { return htmlBody }

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

　　// 通过原生api - URL 获取链接的源域名

const qOrigin = new URL(qUrl).origin || ''

// 获取图片、链接的绝对路径。通过 URL 将 `路径+源域名` 转换为绝对路径，不熟悉的同学请自行了解

const getAbsoluteUrl = p => new URL(p, qOrigin).href

// 转换图片、链接的相对路径，不同平台的图片懒加载属性名不一样，需要做特定兼容

const changeRelativeUrl = (dom) => {

if (!dom) { return '内容出错~' }

const copyDom = dom

// 获取所有图片

const imgs = copyDom.querySelectorAll('img')

// 获取所有链接

const links = copyDom.querySelectorAll('a')

// 替换完所有路径返回新 dom

imgs.length > 0 && imgs.forEach((v) => {

/**

* 处理懒加载路径

* 简书：data-original-src

* 掘金：data-src

* segmentfault：data-src

*/

const src = v.src || v.getAttribute('data-src') || v.getAttribute('data-original-src') || ''

v.src = getAbsoluteUrl(src)

})

links.length > 0 && links.forEach((v) => {

const href = v.href || qUrl

v.href = getAbsoluteUrl(href)

})

return copyDom

}

// 在获取不同平台的文章内容 getBody 方法里，应用 changeRelativeUrl 方法

const getBody = (content) => {

...

...

return changeRelativeUrl(htmlContent)

}