码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-19 14:54:25      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

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>

大家记得把文件路径完成自己修改上传过的。

技术分享

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



如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。

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

标签:

原文地址:http://www.cnblogs.com/jycboy/p/5787477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!