博客园美化相关文章目录：
这篇文章使用的代码来自于博客园的，非常感谢。在他的文章：中，介绍了给文章自动添加目录的过程，我当时就非常兴奋，一直想要个类似的插件，就是不会写。所以当天就咨询了，在他的提示下，我把他博客的CSS和js文件扒下来了，经过一番改进，成为了我博客目前使用的，所以分享出来。有了目录，的确是方便很多，可以快速的跳到指定的段落。当然博客园也有其他网友分享了一些其他的目录样式，个人感觉在底部侧边栏要好一点，根据喜好吧，另外 在21号发表的一篇文章链接：，也不错，原理都差不多，大家可以借鉴下。但是是加在页面顶部，如果目录很多，会占用比较大篇幅和空间。大家按需选择。
本文原文地址：
也把这个自动目录添加到了他的博客中，效果非常好。 看看他的原始效果：
效果非常好，而且前面的标号1，2，。。都是自动的。这一点不太符合我写博客的习惯，以为我的标题会把这个标号固定下来，所以就重复了，而且我想在这个目录前面添加点东西，例如推荐博客目录等等，经过我的一番修改，成了这个样子(在某些浏览器中貌似出不来，特别是IE，Chrom内核的浏览器好像都比较好)：
我修改的地方主要有3个：
1.调整了宽度，然后标题字符数h1提高到了30个字符(其他的不截断显示)；字体也变大了点，貌似比原来的要丑陋点，呵呵，没关系，有空再改回来吧。
2.根据自己博客的设置和写作习惯，提取h1,h2作为目录结果，原来作者是使用h2,h3，这个要看博客模版的情况和博客正文标题的样式；
3.在最前面增加了一个推荐博客，其实和文章推荐插件原理差不多，这里只不过是测试了一下，可以固定推荐几篇文章。
看看源码和使用过程：
1.目录样式文件
样式文件定义了目录的范围和相关格式，例如缩进等。原始文件在这里下载：，大家记得要自己下载，安装需求修改，然后上传到自己博客的文件去，再添加引用，如果直接添加我博客这个文件的引用，以后我要是改动了，你就杯具了。
2.为文章添加固定的信息
这个功能不属于自动生成目录里面的，只不过我在扒皮的时候，一起拔下来了，就是可以为每篇文章添加一个固定的结尾，或者加一个微信扫描功能，样子就是这样，我进行了一些修改：
是通过js来完成的，js文件下载，使用方法还是自己下载然后上传到自己的文件目录中再引用：
3.自动生成目录代码
自动生成目录的代码是通过js完成的，就是寻找正文的h1,h2，然后把标题按照长度截断处理一下，拼接就可以了，我把我修改的部分代码贴出来看看：
//推荐博客 j += '
我修改过的文件下载：，原始的文件可以到作者的博客去扒下来。
最后就把要添加的代码说一下吧，直接引用这几个js和css文件就可以了，注意的是，还有一个公共的bootstrap.js文件，地址为：
大家记得把文件路径完成自己修改上传过的。
保存之后，刷新应该可以看到效果了。有了这个思路，可以在上面添加你想要展现的信息了，而不拘泥于只是个目录。