详解如何实现博文中自动生成文章目录的做法

HTML5 herman 1492浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在CSDN写过博客的人可能会使用它提供的“文章中H1到H6标签自动生成文章目录”这个功能。而且这样的文章看起来很醒目,能够快速的定位到自己想看的内容,可以说是深受广大博友的喜爱。那么这样友好的功能是如何实现的呢?且看小编今天为大家揭开它的神秘面纱。
先看看运行效果吧:
博客文章目录
整体运行效果看起来,还不错吧!点击此处查看详细运行效果
我先说下实现思路
1.整体目录使用的是ol和li标签实现
2.点击+、-判断是否展开和收起
3.使用a标签实现锚点定位

全部源码点击此处查看
我们今天的重点是如何让你的网站也支持这样的功能。做的思路如下:
1.查找所有的h1,h2,h3,h4,h5,h6标签(排除文章标题)
2.按h1到h6的顺序添加ol和li,并拼接成html,具体做法如下:
  所有的h1都作为Tree的1级节点,h2作为上一个h1的子节点,h3作为上一个h2的子节点,以此类推。
3.给对应的节点添加自定义的锚点
4.点击+、-符号,分别执行展开和收起动作

全部代码如下:

$(document).ready(function() {
    // 业余草:www.xttblog.com
    initCatalog();
});

function initCatalog() {
    var hs = $('#article').find('h1,h2,h3,h4,h5,h6');
    if (hs.length < 2)
        return;
    var html = '';
    html += '<div style="clear:both"></div>';
    html += '<div class="xttblog_toc">';
    html += '<p style="text-align:right;margin:0;"><span style="float:left;">目录';
    html += '<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span>';
    html += '<a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a></p>';
    html += '<ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;">';
    var old_h = 0, ol_cnt = 0;
    for (var i = 1; i < hs.length; i++) {
        var h_tag = parseInt(hs[i].tagName.substr(1), 10);
        if (!old_h)
            old_h = h_tag;
        if (h_tag > old_h) {
            html += '<ol>';
            ol_cnt++;
        }else if (h_tag < old_h && ol_cnt > 0) {
            html += '</ol>';
            ol_cnt--;
        }
        if (h_tag == 1) {
            while (ol_cnt > 0) {
                html += '</ol>';
                ol_cnt--;
            }
        }
        old_h = h_tag;
        var tit = hs.eq(i).text().replace(/^\d+[.、\s]+/g, '');
        tit = tit.replace(/[^a-zA-Z0-9_\-\s\u4e00-\u9fa5]+/g, '');

        if (tit.length < 100) {
            html += '<li><a href="#t' + i + '">' + tit + '</a></li>';
            hs.eq(i).html('<a name="t' + i + '"></a>' + hs.eq(i).html());
        }
    }
    while (ol_cnt > 0) {
        html += '</ol>';
        ol_cnt--;
    }
    html += '</ol></div>';
    html += '<div style="clear:both"><br></div>';
    $(html).insertBefore($('#article'));
}

function openct(e) {
    if (e.innerHTML == '[+]') {
        $(e).attr('title', '收起').html('[-]').parent().next().show();
    } else {
        $(e).attr('title', '展开').html('[+]').parent().next().hide();
    }
    e.blur();
    return false;
}

感兴趣的网页,可以制作成插件,放到github上!

版权声明:本文为博主原创文章,未经博主允许不得转载。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 详解如何实现博文中自动生成文章目录的做法