CSDN中根据文章自动生成文章目录

2021-07-02 15:41:47

概述

CSDN中有根据文件内容中H标签在文章中自动生成文章目录，看起来比较专业，就想把它搬到自己的博客园中。类似下图

提取JS脚本

通过浏览器开发者工具(IE/Chrome)找到产生文章目录javascript脚本(我直接用IE开发工具中搜索相关字符串”系统根据文章中H1到H6标签自动生成文章目录”搜索到的)，

并把其中文章内容ID修改成博客园的ID(#cnblogs_post_body)

产生脚本如下脚本如下：

$(document).ready(function() {

    buildCTable();

    });

function buildCTable() {

    var hs = $('#cnblogs_post_body').find('h1,h2,h3,h4,h5,h6');

    if (hs.length < 2)

        return;

    var s = '';

    s += '<div style="clear:both"></div>';

    s += '<div class="cnblogs_toc">';

    s += '<p style="text-align:right;margin:0;"><span style="float:left;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span><a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a></p>';

    s += '<ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;">';

    var old_h = 0, ol_cnt = 0;

    for (var i = 0; i < hs.length; i++) {

        var h = parseInt(hs[i].tagName.substr(1), 10);

        if (!old_h)

            old_h = h;

        if (h > old_h) {

            s += '<ol>';

            ol_cnt++;

        }

        else if (h < old_h && ol_cnt > 0) {

            s += '</ol>';

            ol_cnt--;

        }

        if (h == 1) {

            while (ol_cnt > 0) {

                s += '</ol>';

                ol_cnt--;

            }

        }

        old_h = h;

        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) {

            s += '<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) {

        s += '</ol>';

        ol_cnt--;

    }

    s += '</ol></div>';

    s += '<div style="clear:both"><br></div>';

    $(s).insertBefore($('#cnblogs_post_body'));

}

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;

}

编写CSS样式

脚本中产生文章目录样式通过cnblogs_toc来自定义，可以按照不同需求来定义。我这里把我的定义写出来；

我也是按照CSDN的样式不断调整的，最终还是和CSDN有点不一样。

.cnblogs_toc {

   float:left;

   min-width:200px;

   padding: 4px 10px;

   font-size: 12px;

   background-color: #eee;

   border: 1px solid #ccc;

}

.cnblogs_toc a {

   color: #369;

   border-bottom: 0px;

}

.cnblogs_toc ol {

   margin: 5px 14px 5px;

   line-height: 160%;

}

.cnblogs_toc li {

   list-style: decimal;

}

博客园设置

在博客园中启用自动产生文章目录的脚本，需要在管理设置中添加新增的脚本和CSS。

在博客园文件页中把javascript文件上传到服务器，并获取到文件连接地址。
在博客园设置页中添加自定义脚本文件，在”页首Html代码”中添加<script src="http://files.cnblogs.com/files/Quincy/buildCTable.js" type="text/javascript"></script>