zoukankan      html  css  js  c++  java
  • 博客园自动生成章节目录索引

    第一章节 - 源码

    <script language="javascript" type="text/javascript">
    //生成目录索引列表
    function GenerateContentList()
    {
        var jquery_h3_list = $('#cnblogs_post_body h3');  //如果你的章节标题不是h3,只需要将这里的h3换掉即可
        if(jquery_h3_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content    += '<div id="navCategory">';
            content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
            content    += '<ul>';
            for(var i =0;i<jquery_h3_list.length;i++)
            {
                var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
                $(jquery_h3_list[i]).before(go_to_top);
                var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
                content += li_content;
            }
            content    += '</ul>';
            content    += '</div>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }    
    }
    GenerateContentList();
    </script>

    第二章节 - 使用

    使用方法:
         登录到博客园之后,打开博客园的后台管理,切换到“设置”选项卡,将上面的代码,粘贴到 “页脚HTML代码” 区保存即可。
    
    注意:上述js代码中提取的h3作为章节的标题,如果你的标题不是h3请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外,
         还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接,以方便读者回到目录。本篇文章的目录结构就是自动生成的效果,
         如果你觉得有用,就赶快试用一下吧。

    第三章节 - 源博客链接

    http://www.cnblogs.com/wangqiguo/p/4355032.html#3913995

    第四章节

    再次感谢源博主的代码~ (*^▽^*)
    • 123
    • 123
    • 123
    • 213
    • 123
  • 相关阅读:
    五月八日冲刺
    五月七号冲刺
    五月六日站立会议
    prufer序列学习笔记
    批量数据导入优化
    索引失效
    慢查询定位与分析
    redis主从同步
    redis RBD机制
    redis AOF机制
  • 原文地址:https://www.cnblogs.com/clement-jiao/p/8981845.html
Copyright © 2011-2022 走看看