原文地址:cheerio制作markDown索引目录

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

最终目标

  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
}
}

cheerio制作markDown索引目录的更多相关文章

  1. IntelliJ IDEA 转移C盘.IntelliJIdea(索引目录)

    转移原因: C盘是机械硬盘,并且容量不多的情况下,建议转移. 转移步骤: 找到索引目录 win10系统下默认路径:C:\Users\asus\.IntelliJIdea2016.2 *复制或剪切到新的 ...

  2. lucene全文搜索之二:创建索引器(创建IKAnalyzer分词器和索引目录管理)基于lucene5.5.3

    前言: lucene全文搜索之一中讲解了lucene开发搜索服务的基本结构,本章将会讲解如何创建索引器.管理索引目录和中文分词器的使用. 包括标准分词器,IKAnalyzer分词器以及两种索引目录的创 ...

  3. 【一天一道LeetCode】索引目录 ---C++实现

    [一天一道LeetCode]汇总目录 这篇博客主要收藏了博主所做题目的索引目录,帮助各位读者更加快捷的跳转到对应题目 目录按照难易程度:easy,medium,hard来划分,读者可以按照难易程度进行 ...

  4. 使用word设置标题级别, 自动生成和大纲对应的多级列表, 自动生成索引目录

    作为程序员,只会开发是不够的, 在日常工作中还需要掌握一些办公软件的的操作方法,word excel ppt精通不敢, 暂且入个门吧, 在前后台开发配合过程中,能写的一手好文档将会达到事半功倍的效果, ...

  5. IntelliJ IDEA 转移 C盘.IntelliJIdea 索引目录

    IntelliJ IDEA 索引目录默认路径是  C:\Users\用户\.IntelliJIdea 转移步骤 1. 将  C:\Users\用户\.IntelliJIdea 索引目录剪切到要移动到的 ...

  6. lucene 多索引目录搜索实现方法

    http://akululu.iteye.com/blog/314130 多索引目录就是要在多个索引目录的中进行比较搜索,类似概念在SQL中就是select * from TableA union s ...

  7. nginx索引目录配置

    为了简单共享文件,有些人使用svn,有些人使用ftp,但是更多得人使用索引(index)功能.apache得索引功能强大,并且也是最常见得,nginx得auto_index实现得目录索引偏少,而且功能 ...

  8. Nginx中的root&alias文件路径及索引目录配置详解

    这篇文章主要介绍了Nginx中的root&alias文件路径及索引目录配置,顺带讲解了root和alias命令的用法,需要的朋友可以参考下     root&alias文件路径配置ng ...

  9. 《Windows内核安全与驱动开发》阅读笔记 -- 索引目录

    <Windows内核安全与驱动开发>阅读笔记 -- 索引目录 一.内核上机指导 二.内核编程环境及其特殊性 2.1 内核编程的环境 2.2 数据类型 2.3 重要的数据结构 2.4 函数调 ...

随机推荐

  1. java流的操作步骤、、

    在java中使用IO操作必须按照以下的步骤完成: 使用File找到一个文件 使用字节流或字符流的子类为OutputStream.InputStream.Writer.Reader进行实例化操    作 ...

  2. List转Datable(需区分对象充当List成员和数组充当List成员两种情况)

    对象充当List成员时: /// <summary> /// 将泛类型集合List类转换成DataTable /// </summary> /// <param name ...

  3. 问题:oracle decode;结果:oracle中的decode的使用

    oracle中的decode的使用 Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件 ...

  4. Tiny4412 Linux 内核配置流程

    1.配置交叉编译器 默认情况下,内核构建的是与宿主机相同的体系架构镜像.如果要交叉编译,需要设置两个变量ARCH和CORSS_COMPILE. ①ARCH:指明目标体系架构,如x86.arm.mips ...

  5. 【总结整理】webGIS学习

    安装ArcGIS Server + ArcSDE + PostgreSQL + ArcMap安装(windows7)博客:https://blog.csdn.net/buqutianya/articl ...

  6. php返回文件路径

    1 basename — 返回路径中的文件名部分 如果文件名为test.php,路径为www/hj/test.php echo basename($_SERVER['PHP_SELF']); 输出为: ...

  7. linq to sql 不能更新的问题

    今天在项目中用linq更新一个表的时候,结果怎么都更新不了,最蛋疼的是什么异常也不报,发现db.table1.isReadOnly为True 知道问题所在,百度后得到解决办法: 原来是我的表没有增加主 ...

  8. 开发同事 Linux 实用基本操作

    Linux 有复杂的体系,有很多的命令,开发同事日常开发时,不像运维同事需要熟练使用很多命令. 下面记录下我在工作中,常用的基本命令: 一 日志查看 对于开发同事来说,日常工作中,Linux 中最常用 ...

  9. SQl Server 函数篇 数学函数,字符串函数,转换函数,时间日期函数

    数据库中的函数和c#中的函数很相似 按顺序来, 这里价格特别的 print  可以再消息栏里打印东西 数学函数 ceiling()  取上限   不在乎小数点后面有多大,直接忽略 floor()   ...

  10. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at:

    今天更新了一下mac系统,然后发现  idea的svn插件不能用了,有的报 有的报  is not under version 经查找需要做如下处理,打开终端,安装xcode: xcode-selec ...