目录生成

我们很多人学习写网站的目的是自己动手搭建一个博客。一个博客最基本的功能是写文章。单纯的文本阅读起来是生涩的，有时候希望给文字改变字体或者加一个背景色下划线，给文字修饰各种样式。这个时候就需要富文本编辑器了。

通过富文本编辑器编写，后端存储的直接就是html代码。

生成的代码简化后是这样的（我是为了好看换行了，实际储存的时候都在一行）

人人影视字幕组"侵权案宣判 被告人获刑3年半
标题一正文内容，

标题二
正文内容，

标题一
正文内容，
标题二正文内容

想要的结果是文章在展示的时候自动生成目录，并且，对应的标题缩进相对应

我在最开始考虑怎么生成的时候，干了一件现在看十分脑残的事情。我想的是把生成的代码处理以后再储存，思想类似于

通过BeautifulSoup把标签提取出来，把内容和他自己的标题放在列表里，然后再判断是hX，比如标题是h2就给它加个缩进，h3就加两个缩进，类似于这样

['我是h2标题',
我是h2标题的内容
],['
我是h3标题
',
我是h3标题的内容
],

显示的时候再循环列表，单独提取出来，这还是最简的只有一个副标题和子标题，如果层层嵌套，很多个副标题有很多个子标题，简直无法想象。

['
我是h2标题
',
我是h2标题的内容'我是h3标题',
我是h3标题的内容],['
我是h3标题
',
我是h3标题的内容
]

后端处理太复杂那就换个思路，用前端生成。

仔细想一下，之前我们后端判断那个标题是几级标题，是hx。然后给标题相应的缩进。

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

只要是二级标题就缩进1，三级缩进2，以此类推。

好

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();        //底下是把标题名称和相应标签提取出来后进行的操作        //可以根据自己的情况而定，        //把标题依次添加到目录的div盒子里        $('#content').append(`
                  >${headingName}
`);        $heading.attr('id','heading_'+idName)

通过for循环一次找出正文中的带标题标签的内容，然后提取其中的headingLevel和headingNmae。找出idName那个正则表达式就是把其中的空格除掉，因为作为id被选择时出现空格会报错。为了防止标题过长，超出div标签，用slice进行部分截取。

回到顶部

有时候文章的内容太长，在阅读到底部的时候想回头看，手动翻又太麻烦，这时候我们就需要加一个回到顶部的按钮，点一下就可以回到顶部了。

仔细看，这个按钮并不是一直存在的，我们就在顶部也不需要它对吧。当我们往下滑到一定长度时它才会出现，而且是淡入的，js要实现这个功能很简单。

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

只需要监听窗口滚动，当距离大于400的时候，用id选择器使按钮淡入就好。

仔细看动图，点击完按钮后并不是立即回到顶部的，而是有一定的缓冲，更加符合人的正常思维，看起来不那么突兀。

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

animate实现了我们想要的功能，scrollTop：0就是距离顶部的距离为0，500设置了它需要经过500毫秒完成，而不是一下子回到

下一篇，会说说如何使用 bootstrap。

点个在看你最好看