cheerio制作markDown索引目录

原创 2018年04月17日 17:59:48

原文链接:Bougie的博客

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

image

最终目标

image
1. 点击索引单项跳转到相应标题
2. 大号标题包含小号标题,小号标题向右缩进
3. 滚动页面时自动切换索引项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
    }
}

TOMCAT下的JIVE2的中文问题分析及解决

TOMCAT下的JIVE2的中文问题的报告原文摘自jive论坛用户shyguy的帖子。翻译者:cheramiXXX 注意 XXX: 所有的结论都是基于一下平台:Winnt4.0(简体中文版) + Su...
  • cherami
  • cherami
  • 2001-09-21 18:12:00
  • 845

MarkDown生成目录索引

关于目录生成,只要文章是按照markdown语法写作的。在需要生成目录的地方写 [TOC] 即可。...
  • ly890700
  • ly890700
  • 2017-06-12 18:16:13
  • 1105

生成带有目录的Markdown格式文档

什么是MarkdownMarkdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。使用 Markdown 的优点 专注你的文字内容而不是排版样式。 轻松的...
  • uxyheaven
  • uxyheaven
  • 2015-10-19 19:24:24
  • 35208

怎么让博客园文章支持生成目录索引

用过markdown的同学都知道,生成目录索引的标签是[TOC],但是博客园markdown编辑器不支持[TOC]标签,于是决定自己实现目录索引功能。 [TOC] 1. 实现思路 博客园会把[TO...
  • github_37915419
  • github_37915419
  • 2017-04-14 16:43:18
  • 1155

[markdown]Markdown 语法说明(中文版)-带目录

  • 2017年03月30日 17:06
  • 523KB
  • 下载

markdown自动生成侧边栏目录/TOC

markdown自动生成侧边栏TOC /目录 声明: 本模板是对开源项目 i5ting-i5ting_ztree_toc-0.3.0-11 的精简,主要是针对Windows下无法安装项目作者给出的软件...
  • HaleyPKU
  • HaleyPKU
  • 2016-04-23 15:55:43
  • 18073

Markdown-04目录脚注和表格(学习笔记)

目录 脚注 表格对齐方式目录 目录可以用[toc],直接生成;(需要使用标题格式,以便于索引) 脚注 先定义,后使用: 定义格式:[ ^定义名]: 定义内容; 使...
  • weixin_37427939
  • weixin_37427939
  • 2017-02-01 15:17:24
  • 1289

如何生成 markdown 文档的内容索引

目前很多文档都是用 markdown 格式编写,并且以代码的形式托管在 GitLab 上, 同时,使用 gh-md-toc 来生成文档目录。但是,gh-md-toc 会直接将结果打印到 stout...
  • qianggezhishen
  • qianggezhishen
  • 2016-07-18 15:04:12
  • 2929

markdown自动生成导航目录

把这一段代码插入到markdown生成的HTML文件的head标签中,将会自动根据markdown的标题按级别生成导航目录 //是否显示导航栏 var showNavBar = true; /...
  • WuLex
  • WuLex
  • 2017-04-27 14:54:32
  • 4855

Markdown生成左边框目录

自从接触了Markdown后就一直用这种语言写学习笔记。 但是一直在纠结如何生成方便的目录。 下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录。 就是这种第一步,编辑器首先,需要一个可以自...
  • zjiang1994
  • zjiang1994
  • 2016-08-19 14:13:11
  • 8436
收藏助手
不良信息举报
您举报文章:cheerio制作markDown索引目录
举报原因:
原因补充:

(最多只允许输入30个字)