cheerio制作markDown索引目录

wanglu1209 发布于2019-08-22 16:26 / 2421人阅读

摘要：原文链接的博客制作目录索引这种东西当然是放在前端方便。选择放在后端一是为了了解后端生态，掌握更多后端技术二是因为公司实行前后端分离的方式开发，睾贵的后端经常啥也不做处理就返回一个数据甚至有时时间戳都不处理，对此有些无语。

原文链接：Bougie的博客

制作目录索引这种东西当然是放在前端方便。选择放在后端一是为了了解Node后端生态，掌握更多后端技术；二是因为公司实行前后端分离的方式开发，睾贵的JAVA后端经常啥也不做处理就返回一个row数据(甚至有时时间戳都不处理)，对此有些无语。

最终目标

点击索引单项跳转到相应标题

大号标题包含小号标题，小号标题向右缩进

滚动页面时自动切换索引项active状态

实现方法 md转化为html

const markDown = require("marked")
markDown.setOptions({
    headerIds: false,
    highlight: function(code) {
        return require("highlight.js").highlightAuto(code).value;
    },
})
let html = markDown(data.content)

cheerio生成索引

const cheerio = require("cheerio")

// decodeEntities防止中文转化为unicdoe
const $ = cheerio.load(html,{decodeEntities: false})

// 用hNum生成自定义id
let hArr = [], highestLvl, hNum = 0
$("h1, h2, h3, h4, h5, h6").each(function () {
    let id = `h${hNum}`
    hNum++
    $(this).attr("id", id)
    let lvl = $(this).get(0).tagName.substr(1)
    if(!highestLvl) highestLvl = lvl
    hArr.push({
        lvl: lvl - highestLvl + 1,
        content: $(this).html(),
        id: id
    })
})
Object.assign(data, {
    content: $.html,
    toc: hArr
})

前台展示

if data && data.toc
    ul#toc-wrapper.toc-wrapper-transform
      each item in data.toc
        // 利用lvl判断偏移量
        li(class="toc-item text-elli", style=`padding-left: ${item.lvl * 15}px`, id=item.id)
          a(href=`#${item.id}`, title=item.content).text-elli= item.content

页面滚动过自动切换active

知道getBoundingClientRect API就好做了

function tocToggle() {
    if($(".article-content").dom.length == 0) return
    let scrollArr = []
    document.querySelectorAll(".article-content h1, h2, h3, h4, h5, h6").forEach(i => {
        let elTop = Math.abs(i.getBoundingClientRect().top)
        scrollArr.push({
            el: i,
            top: elTop
        })
    })
    if(scrollArr.length == 0) return
    scrollArr = scrollArr.sort((a, b) => {
        return a.top - b.top
    })
    let activeId = $(scrollArr[0].el).attr("id")
    $(`#toc-wrapper #${activeId}`).ac("toc-item-active").siblings().rc("toc-item-active")
}

$(window).on("scroll", () => {
    tocToggle()
})

tocToggle()

Tips 锚点偏移

本网站的header是fixed在顶部的，锚点不进行偏移会盖住标题。偏移方法：

h1, h2, h3, h4, h5, h6{
    &:target{
        padding-top: 60px
    }
}

云服务器 GPU云服务器目录索引显示目录索引 cheerio Markdown

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94350.html

参考ElementUI的文档实现方案，实现自己组件库的说明文档

摘要：实现使用编写的个人组件库说明文档前一篇文章实现了按需加载封装个人的组件库功能，有了组件库，当然还要有配套说明文档，这样使者用起来才更方便。特别说明本文中有部分实现是了的代码实现的。实现使用markdown编写的个人组件库说明文档前一篇文章实现了按需加载封装个人的组件库功能，有了组件库，当然还要有配套说明文档，这样使者用起来才更方便。打包完成的dist目录是最终可放到服务器中，直接访...

NervosNetwork 2019-08-23 11:54 评论0 收藏0
构建工具是如何用 node 操作 html/js/css/md 文件的

摘要：构建工具是如何用操作文件的从本质上来说，源代码文件都是文本文件，文本文件的内容都是字符串，对文本文件的操作其实就是对字符串的操作。在第二种方式中，一般也是将文本解析成一棵抽象语法树，然后进行操作。构建工具是如何用 node 操作 html/js/css/md 文件的从本质上来说，html/js/css/md ... 源代码文件都是文本文件，文本文件的内容都是字符串，对文本文件的操作...

PingCAP 2019-08-29 17:10 评论0 收藏0
构建工具是如何用 node 操作 html/js/css/md 文件的

摘要：构建工具是如何用操作文件的从本质上来说，源代码文件都是文本文件，文本文件的内容都是字符串，对文本文件的操作其实就是对字符串的操作。在第二种方式中，一般也是将文本解析成一棵抽象语法树，然后进行操作。构建工具是如何用 node 操作 html/js/css/md 文件的从本质上来说，html/js/css/md ... 源代码文件都是文本文件，文本文件的内容都是字符串，对文本文件的操作...

AZmake 2019-08-23 12:47 评论0 收藏0
Node.js学习之路22——利用cheerio制作简单的网页爬虫

摘要：利用制作简单的网页爬虫目标完成对网站的标题信息获取将获取到的信息输出在一个新文件工具，使用下载的使用方法和的使用方法基本一致如果熟练使用，那么将会很快上手代码部分介绍获取页面的列表标题，将获取到的标题列表编号，最终输出到文件里获取网页信息错利用cheerio制作简单的网页爬虫 1. 目标完成对网站的标题信息获取将获取到的信息输出在一个新文件工具: cheerio，使用npm下...

jsyzchen 2019-08-22 14:56 评论0 收藏0
My Toolkit of Node.js

摘要：它基于格式，在绝大多数情况下，使用协议传输请求。由它加密的文件可在所有支持的操作系统和处理器上进行转移。后话本文的描述及用语，仅基于本人目前的水平而写，难免有所局限和措辞不当之处。原文链接：BlueSun | My Toolkit of Node.js Cheerio Fast, flexible, and lean implementation of core jQuery des...

leeon 2019-08-19 17:53 评论0 收藏0