cheerio制作markDown索引目錄

wanglu1209 發布于2019-08-22 16:26 / 2445人閱讀

摘要：原文鏈接的博客制作目錄索引這種東西當然是放在前端方便。選擇放在后端一是為了了解后端生態，掌握更多后端技術二是因為公司實行前后端分離的方式開發，睪貴的后端經常啥也不做處理就返回一個數據甚至有時時間戳都不處理，對此有些無語。

原文鏈接：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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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