一、目录整合
一直想为自己的博客园文章做个目录导航，此前为了省劲儿想套用别人现成的，但效果不是特别理想，还是决定自己动手做一个适合自己的。目录效果就在右边，这其实是借鉴layui官网文档目录导航的样式和功能。制作过程就不再细讲了，这里主要讲如何将这个目录整合到你的文章中（建议先看该注意事项，若不能接受可直接退出节省时间）。
1.1 页首 HTML 代码
步骤比较简单，具体的图我就不贴了，首先就是将下面这行代码粘贴至 博客园后台-->设置-->页首 HTML 代码中。
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/liuguo/createDir.css">
1.2
接下来就是将下面的代码粘贴至 博客园后台-->设置-->页脚 HTML 代码中。
<script src="https://blog-static.cnblogs.com/files/liuguo/createDir.js"></script>
<script>
window.onload = function() {
var id = "cnblogs_post_body";
var elem = document.getElementById(id);
//页面不包含名为cnblogs_post_body的id或屏幕宽度小于450时不生成目录
if (!elem || screen.width < 450) return false;
createDir(id, {
h2: "h2",
h3: "h3"
});
drag();
a();
}
</script>
1.3 注意事项
经过以上两步操作，目录的引入工作就算完成了，但这里仍有一些事情需要注意：
（1）目录兼容性：该目录不兼容移动设备如平板，手机（手机端不会生成该目录）等，已知兼容谷歌，火狐和windows 10的Edge（其他浏览器没有测试），谷歌渲染出来的可能有点怪，莫名的比火狐和Edge的要大上一点，这可能和博客使用的模板样式设定有关（我使用的模板在谷歌上有水平滚动条，火狐，IE则没有）。
（2）目录获取：该目录只支持二级体系，具体是对哪些标签获取，可根据传入参数而改变，默认为H2和H3标签。
（3）界面美化：目录的美观与否与文章的排版有一定的关系，所以一定注意文章排版的美观。另外目录对获取的文字有截取功能，防止文字过长影响美感，限制的最大文字长度为20个汉字，超出文本将用“···”替换，目录对高度也有限制，超出高度会追加竖直滚动条。
（4）二次制作：建议大家把相应的Js和Css文件下载并上传到自己的博客园文件中，这样当我把文件删除时不会影响到大家的使用体验。另外，Js文件中有大量的注释，如果大家对该目录不满意可以根据注释尝试对其二次制作。
1.4 致谢
在制作目录导航的过程中，我也参观了不少优秀的制作目录导航的博文，也受到了一定程度的启发。非常感谢这些文章，下面将文章链接贴上。
二、知识总结
看似是一个简单的小功能，但由于前段基础薄弱，制作这个也确实花费了我不少的时间，下面对制作过程中收获的知识点进行总结。
2.1 HTML5的锚点问题
相较于HTML4只能通过a标签的name属性设置锚点而言，HTML5设置锚点的方式更加灵活，它是使用id属性设置锚点（无论什么标签，只要有id属性都可以），这样以来就不需要再去嵌套a标签做锚点了，跳转也更加灵活方便。
2.2 浏览器渲染页面的两种模式
W3C标准推出以后，浏览器都开始采纳新标准，但为了兼容以前的页面，浏览器保留了旧的渲染模式。区分这两种渲染模式的方式就是HTML头部的doctype声明，当浏览器能正常识别doctype声明时为Standars mode（标准模式），当页面没有doctype声明或浏览器无法识别doctype时采用Quirks mode（怪异模式）。
这两种模式的主要区别如下：
在Standars mode中： 元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
在Quirks mode中： width则是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
在Js中可以通过window.top.document.compatMode来查看浏览器对当前页面的渲染模式，结果BackCompat对应怪异模式，CSS1Compat对应标准模式。
在JQuery中使用 $.boxModel 和 $.support.boxModel 来查看渲染模式。
2.3 Js中if 里的逻辑表达式
js中的数据类型有undefined,boolean,number,string,object等5种，前4种为原始类型，第5种为引用类型。若 if() 逻辑(表达式)判断里面的值是一个字符串, 如 user.id 是一串字符, 那据下列情况判断出的逻辑值就是:
字符串是否为空？即 “” 与 “ ”的区别(若其长度为 0，逻辑值为 false；其长度 > 0，逻辑值为 true)。
字符串是否被赋值？(若未赋值,即为undefined，或赋予空值，逻辑值为 false；否则，逻辑值为 true)。
如果 id="0"，表明字符串长度为 1， 结果，逻辑判断值为 true。
如果 id= 0 ，则认定 id 是个 number 型, 结果，逻辑判断值为 false。
如果 id= false ，则认定 id 是个 boolean 型的数据, 结果，逻辑判断值为 false。
如果 id= null ，则认定 id 是个 object 型(引用型)的数据, 结果，逻辑判断值为 false。
2.4 Js中的闭包概念
概念：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
为加深对这句话的理解，下面给出两个例子帮助理解。
//案例1
function outerFn(){
var i = 0;
function innerFn(){
i++;
console.log(i);
}
return innerFn;
}
var inner = outerFn(); //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同，都会重新创建一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2(); //1 2 3 1 2 3
//===========案例2===========
function fun(n,o) {
console.log(o);
return {
fun:function(m) {
return fun(m,n);
}
};
}
var a = fun(0); //undefined
a.fun(1); //0
a.fun(2); //0
a.fun(3); //0
var b = fun(0).fun(1).fun(2).fun(3); //undefined 0 1 2
var c = fun(0).fun(1);
c.fun(2);
c.fun(3); //undefined 0 1 1
结论：闭包找到的是同一地址中父级函数中对应变量最终的值。
2.4 致谢
关于闭包等有关知识点，我也找到了一些讲的很好的博客，同样非常感谢这些文章，下面给出链接。