【分享】博客美化(6)为你的博文自动添加目录

　　博客园美化相关文章目录：博客园博客美化相关文章目录

　　这篇文章使用的代码来自于博客园的marvin，很是感谢。在他的文章：如何给你的为知笔记添加一个漂亮的导航目录中，介绍了给文章自动添加目录的过程，我当时就很是兴奋，一直想要个相似的插件，就是不会写。因此当天就咨询了marvin，在他的提示下，我把他博客的CSS和js文件扒下来了，通过一番改进，成为了我博客目前使用的，因此分享出来。有了目录，的确是方便不少，能够快速的跳到指定的段落。固然博客园也有其余网友分享了一些其余的目录样式，我的感受在底部侧边栏要好一点，根据喜爱吧，另外薰衣草的旋律 在21号发表的一篇文章连接：http://www.cnblogs.com/wangqiguo/p/4355032.html，也不错，原理都差很少，你们能够借鉴下。可是是加在页面顶部，若是目录不少，会占用比较大篇幅和空间。你们按需选择。

　　本文原文地址：博客美化(6)为你的博文自动添加目录

　　marvin也把这个自动目录添加到了他的博客中，效果很是好。 看看他的原始效果：

效果很是好，并且前面的标号1，2，。。都是自动的。这一点不太符合我写博客的习惯，觉得个人标题会把这个标号固定下来，因此就重复了，并且我想在这个目录前面添加点东西，例如推荐博客目录等等，通过个人一番修改，成了这个样子(在某些浏览器中貌似出不来，特别是IE，Chrom内核的浏览器好像都比较好)：

我修改的地方主要有3个：

1.调整了宽度，而后标题字符数h1提升到了30个字符(其余的不截断显示)；字体也变大了点，貌似比原来的要丑陋点，呵呵，不要紧，有空再改回来吧。

2.根据本身博客的设置和写做习惯，提取h1,h2做为目录结果，原来做者是使用h2,h3，这个要看博客模版的状况和博客正文标题的样式；

3.在最前面增长了一个推荐博客，其实和文章推荐插件原理差很少，这里只不过是测试了一下，能够固定推荐几篇文章。 

看看源码和使用过程：

1.目录样式文件

　　样式文件定义了目录的范围和相关格式，例如缩进等。原始文件在这里下载：marvin.nav.my1502.css，你们记得要本身下载，安装需求修改，而后上传到本身博客的文件去，再添加引用，若是直接添加我博客这个文件的引用，之后我要是改动了，你就杯具了。

2.为文章添加固定的信息

　　这个功能不属于自动生成目录里面的，只不过我在扒皮的时候，一块儿拔下来了，就是能够为每篇文章添加一个固定的结尾，或者加一个微信扫描功能，样子就是这样，我进行了一些修改：

是经过js来完成的，js文件下载，使用方法仍是本身下载而后上传到本身的文件目录中再引用：marvin.cnblogs.js

3.自动生成目录代码

　　自动生成目录的代码是经过js完成的，就是寻找正文的h1,h2，而后把标题按照长度截断处理一下，拼接就能够了，我把我修改的部分代码贴出来看看：

//推荐博客
    j += '<li><span style="font-size: 14pt;">★推荐博客</span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4288836.html' + '">' + '1.本博客全部文章分类目录' + '</a><span class="sideCatalog-dot"></span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329737.html' + '">' + '2.开源Math.NET基础数学类库使用' + '</a><span class="sideCatalog-dot"></span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329742.html' + '">' + '3.微软Infer.NET机器学习组件使用' + '</a><span class="sideCatalog-dot"></span></li>';    
    j += '<li><span style="font-size: 14pt;">★本文目录</span></li>';
    o.each(function (t) {
        var u = $(this),
            v = u[0];

        var title=u.text();
        var text=u.text();

        u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
        
        if (v.localName === 'h1') {
            l++;
            m = 0;
            if(text.length>26) text=text.substr(0,26)+"...";
            j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
        } else if (v.localName === 'h2') {
            m++;
            n = 0;
            if(q){
                if(text.length>30) text=text.substr(0,30)+"...";
                j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
            }
        } 
    });

我修改过的文件下载：marvin.nav.my1502.js，原始的文件能够到做者marvin的博客去扒下来。

最后就把要添加的代码说一下吧，直接引用这几个js和css文件就能够了，注意的是，还有一个公共的bootstrap.js文件，地址为：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>

你们记得把文件路径完成本身修改上传过的。

保存以后，刷新应该能够看到效果了。有了这个思路，能够在上面添加你想要展示的信息了，而不拘泥于只是个目录。