資訊專欄INFORMATION COLUMN
摘要：原文鏈接的博客制作目錄索引這種東西當(dāng)然是放在前端方便。選擇放在后端一是為了了解后端生態(tài)，掌握更多后端技術(shù)二是因?yàn)楣緦?shí)行前后端分離的方式開發(fā)，睪貴的后端經(jīng)常啥也不做處理就返回一個(gè)數(shù)據(jù)甚至有時(shí)時(shí)間戳都不處理，對(duì)此有些無語。
原文鏈接：Bougie的博客
制作目錄索引這種東西當(dāng)然是放在前端方便。選擇放在后端一是為了了解Node后端生態(tài)，掌握更多后端技術(shù)；二是因?yàn)楣緦?shí)行前后端分離的方式開發(fā)，睪貴的JAVA后端經(jīng)常啥也不做處理就返回一個(gè)row數(shù)據(jù)(甚至有時(shí)時(shí)間戳都不處理)，對(duì)此有些無語。最終目標(biāo)
點(diǎn)擊索引單項(xiàng)跳轉(zhuǎn)到相應(yīng)標(biāo)題
大號(hào)標(biāo)題包含小號(hào)標(biāo)題，小號(hào)標(biāo)題向右縮進(jìn)
滾動(dòng)頁面時(shí)自動(dòng)切換索引項(xiàng)active狀態(tài)
實(shí)現(xiàn)方法 md轉(zhuǎn)化為htmlconst 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防止中文轉(zhuǎn)化為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
})
前臺(tái)展示
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
頁面滾動(dòng)過自動(dòng)切換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
錨點(diǎn)偏移
本網(wǎng)站的header是fixed在頂部的，錨點(diǎn)不進(jìn)行偏移會(huì)蓋住標(biāo)題。偏移方法：
h1, h2, h3, h4, h5, h6{
&:target{
padding-top: 60px
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94350.html
摘要：實(shí)現(xiàn)使用編寫的個(gè)人組件庫(kù)說明文檔前一篇文章實(shí)現(xiàn)了按需加載封裝個(gè)人的組件庫(kù)功能，有了組件庫(kù)，當(dāng)然還要有配套說明文檔，這樣使者用起來才更方便。特別說明本文中有部分實(shí)現(xiàn)是了的代碼實(shí)現(xiàn)的。 實(shí)現(xiàn)使用markdown編寫的個(gè)人組件庫(kù)說明文檔 前一篇文章實(shí)現(xiàn)了按需加載封裝個(gè)人的組件庫(kù)功能，有了組件庫(kù)，當(dāng)然還要有配套說明文檔，這樣使者用起來才更方便。打包完成的dist目錄是最終可放到服務(wù)器中，直接訪...
摘要：構(gòu)建工具是如何用操作文件的從本質(zhì)上來說，源代碼文件都是文本文件，文本文件的內(nèi)容都是字符串，對(duì)文本文件的操作其實(shí)就是對(duì)字符串的操作。在第二種方式中，一般也是將文本解析成一棵抽象語法樹，然后進(jìn)行操作。 構(gòu)建工具是如何用 node 操作 html/js/css/md 文件的 從本質(zhì)上來說，html/js/css/md ... 源代碼文件都是文本文件，文本文件的內(nèi)容都是字符串，對(duì)文本文件的操作...
摘要：構(gòu)建工具是如何用操作文件的從本質(zhì)上來說，源代碼文件都是文本文件，文本文件的內(nèi)容都是字符串，對(duì)文本文件的操作其實(shí)就是對(duì)字符串的操作。在第二種方式中，一般也是將文本解析成一棵抽象語法樹，然后進(jìn)行操作。 構(gòu)建工具是如何用 node 操作 html/js/css/md 文件的 從本質(zhì)上來說，html/js/css/md ... 源代碼文件都是文本文件，文本文件的內(nèi)容都是字符串，對(duì)文本文件的操作...
摘要：利用制作簡(jiǎn)單的網(wǎng)頁爬蟲目標(biāo)完成對(duì)網(wǎng)站的標(biāo)題信息獲取將獲取到的信息輸出在一個(gè)新文件工具，使用下載的使用方法和的使用方法基本一致如果熟練使用，那么將會(huì)很快上手代碼部分介紹獲取頁面的列表標(biāo)題，將獲取到的標(biāo)題列表編號(hào)，最終輸出到文件里獲取網(wǎng)頁信息錯(cuò) 利用cheerio制作簡(jiǎn)單的網(wǎng)頁爬蟲 1. 目標(biāo) 完成對(duì)網(wǎng)站的標(biāo)題信息獲取 將獲取到的信息輸出在一個(gè)新文件 工具: cheerio，使用npm下...
摘要：它基于格式，在絕大多數(shù)情況下，使用協(xié)議傳輸請(qǐng)求。由它加密的文件可在所有支持的操作系統(tǒng)和處理器上進(jìn)行轉(zhuǎn)移。后話本文的描述及用語，僅基于本人目前的水平而寫，難免有所局限和措辭不當(dāng)之處。 原文鏈接：BlueSun | My Toolkit of Node.js Cheerio Fast, flexible, and lean implementation of core jQuery des...
閱讀 1207·2021-11-10 11:35
閱讀 2948·2021-09-24 10:35
閱讀 2970·2021-09-22 15:38
閱讀 2813·2019-08-30 15:43
閱讀 1349·2019-08-29 18:39
閱讀 2584·2019-08-29 15:22
閱讀 2798·2019-08-28 18:17
閱讀 618·2019-08-26 13:37
