目錄生成

我們很多人學(xué)習(xí)寫(xiě)網(wǎng)站的目的是自己動(dòng)手搭建一個(gè)博客。一個(gè)博客最基本的功能是寫(xiě)文章。單純的文本閱讀起來(lái)是生澀的，有時(shí)候希望給文字改變字體或者加一個(gè)背景色下劃線，給文字修飾各種樣式。這個(gè)時(shí)候就需要富文本編輯器了。

通過(guò)富文本編輯器編寫(xiě)，后端存儲(chǔ)的直接就是html代碼。

生成的代碼簡(jiǎn)化后是這樣的（我是為了好看換行了，實(shí)際儲(chǔ)存的時(shí)候都在一行）

人人影視字幕組"侵權(quán)案宣判 被告人獲刑3年半
標(biāo)題一正文內(nèi)容，

標(biāo)題二
正文內(nèi)容，

標(biāo)題一
正文內(nèi)容，
標(biāo)題二正文內(nèi)容

想要的結(jié)果是文章在展示的時(shí)候自動(dòng)生成目錄，并且，對(duì)應(yīng)的標(biāo)題縮進(jìn)相對(duì)應(yīng)

我在最開(kāi)始考慮怎么生成的時(shí)候，干了一件現(xiàn)在看十分腦殘的事情。我想的是把生成的代碼處理以后再儲(chǔ)存，思想類(lèi)似于

通過(guò)BeautifulSoup把標(biāo)簽提取出來(lái)，把內(nèi)容和他自己的標(biāo)題放在列表里，然后再判斷是hX，比如標(biāo)題是h2就給它加個(gè)縮進(jìn)，h3就加兩個(gè)縮進(jìn)，類(lèi)似于這樣

['我是h2標(biāo)題',
我是h2標(biāo)題的內(nèi)容
],['
我是h3標(biāo)題
',
我是h3標(biāo)題的內(nèi)容
],

顯示的時(shí)候再循環(huán)列表，單獨(dú)提取出來(lái)，這還是最簡(jiǎn)的只有一個(gè)副標(biāo)題和子標(biāo)題，如果層層嵌套，很多個(gè)副標(biāo)題有很多個(gè)子標(biāo)題，簡(jiǎn)直無(wú)法想象。

['
我是h2標(biāo)題
',
我是h2標(biāo)題的內(nèi)容'我是h3標(biāo)題',
我是h3標(biāo)題的內(nèi)容],['
我是h3標(biāo)題
',
我是h3標(biāo)題的內(nèi)容
]

后端處理太復(fù)雜那就換個(gè)思路，用前端生成。

仔細(xì)想一下，之前我們后端判斷那個(gè)標(biāo)題是幾級(jí)標(biāo)題，是hx。然后給標(biāo)題相應(yīng)的縮進(jìn)。

.content-h2 {text-indent: 1em;}.content-h3 {??text-indent:?2em;}.content-h4 {text-indent: 3em;}

只要是二級(jí)標(biāo)題就縮進(jìn)1，三級(jí)縮進(jìn)2，以此類(lèi)推。

好

for (let heading of $('h2,h3,h4')) {let headingLevel = heading.tagName.toLowerCase();let $heading = $(heading);let idName = $heading.text().replace(/\s+/g,"").slice(2,7)let headingName = $heading.text();????????//底下是把標(biāo)題名稱(chēng)和相應(yīng)標(biāo)簽提取出來(lái)后進(jìn)行的操作????????//可以根據(jù)自己的情況而定，????????//把標(biāo)題依次添加到目錄的div盒子里        $('#content').append(`
                  >${headingName}
`);????????$heading.attr('id','heading_'+idName)

通過(guò)for循環(huán)一次找出正文中的帶標(biāo)題標(biāo)簽的內(nèi)容，然后提取其中的headingLevel和headingNmae。找出idName那個(gè)正則表達(dá)式就是把其中的空格除掉，因?yàn)樽鳛閕d被選擇時(shí)出現(xiàn)空格會(huì)報(bào)錯(cuò)。為了防止標(biāo)題過(guò)長(zhǎng)，超出div標(biāo)簽，用slice進(jìn)行部分截取。

回到頂部

有時(shí)候文章的內(nèi)容太長(zhǎng)，在閱讀到底部的時(shí)候想回頭看，手動(dòng)翻又太麻煩，這時(shí)候我們就需要加一個(gè)回到頂部的按鈕，點(diǎn)一下就可以回到頂部了。

仔細(xì)看，這個(gè)按鈕并不是一直存在的，我們就在頂部也不需要它對(duì)吧。當(dāng)我們往下滑到一定長(zhǎng)度時(shí)它才會(huì)出現(xiàn)，而且是淡入的，js要實(shí)現(xiàn)這個(gè)功能很簡(jiǎn)單。

$(function() {      $(window).scroll(function() {        if ($(window).scrollTop() > 400) {          $(".back-to-top").fadeIn(200);        } else {          $(".back-to-top").fadeOut(200);        }      });

只需要監(jiān)聽(tīng)窗口滾動(dòng)，當(dāng)距離大于400的時(shí)候，用id選擇器使按鈕淡入就好。

仔細(xì)看動(dòng)圖，點(diǎn)擊完按鈕后并不是立即回到頂部的，而是有一定的緩沖，更加符合人的正常思維，看起來(lái)不那么突兀。

 $(".back-to-top").on('click',function() {        $('body,html').animate({          scrollTop: 0        },        500);        return false;??????});

animate實(shí)現(xiàn)了我們想要的功能，scrollTop：0就是距離頂部的距離為0，500設(shè)置了它需要經(jīng)過(guò)500毫秒完成，而不是一下子回到

下一篇，會(huì)說(shuō)說(shuō)如何使用?bootstrap。

點(diǎn)個(gè)在看你最好看