为博客园添加目录的方法总结

博客园添加目录的方法主要涉及2个步骤:

1、申请开通js权限

2、添加js脚本到“页脚Html代码”

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $(‘#cnblogs_post_body‘);
    var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;

    if(h2_list.length>0)
    {
        var content = ‘<a name="_labelTop"></a>‘;
        content += ‘<div id="navCategory" style="color:#152e97;">‘;
        content += ‘<p style="font-size:18px;"><b>目录</b></p>‘;
        content += ‘<ul>‘;
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = ‘<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = ‘‘;
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll(‘h2‘).first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
                $(h3_list[j]).before(li3_anchor);
                li3_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘;
            }

            var li2_content = ‘‘;
            if(li3_content.length > 0)
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ul>‘ + li3_content + ‘</ul></li>‘;
            else
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘;
            content += li2_content;
        }
        content += ‘</ul>‘;
        content += ‘</div><p>&nbsp;</p>‘;
        content += ‘<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>‘;
        if($(‘#cnblogs_post_body‘).length != 0 )
        {
            $($(‘#cnblogs_post_body‘)[0]).prepend(content);
        }
    }
}

GenerateContentList();
</script>

js脚本

可以参考如下博文:

https://www.cnblogs.com/fmgao-technology/p/9294620.html

原文地址:https://www.cnblogs.com/wendyw/p/11629992.html

时间: 2024-10-28 20:42:59

为博客园添加目录的方法总结的相关文章

【转】为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html 目录 第一种:在正文上方直接添加目录 1. 申请开通js权限 2. 添加js脚本到“页脚Html代码” 3. 按格式写文章 第二种:在文章右上角添加目录导航 1. 申请开通js权限 2. 添加css代码到“页面定制CSS代码” 3. 添加js脚本到“页首Html代码” 4. 按格式写文章 参考链接:http://www.cnblogs.com/xdp-gacl/p

博客园添加目录索引

前面写博客一直没有添加目录,这样可能不能整体对文章内容一目了然,在参考博主"赵子清的技术文章"后,简单的修改了js代码,实现了博客的目录自动生成.参考博文地址在最后面.我的文章一般使用三级标题和四级标题,因此代码中修改成自动生成h3和h4目录,另外修改了li前面的图标为数字. 使用步骤 (1)确保博客园支持JS,没有就点击自动开通,一般需要等,着急可以给博客园发送邮件. (2)将JS脚本添加到页脚Html代码,在博客园的设置里面可以找到. 这样添加完成保存后,博客的文章就会更新目录内容

博客园自定义目录

博客园自定义目录js样式在css中设置 TOC 博客园自定义目录 参考:https://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 参考了这篇博客,但是这个只显示h2,h3的标题,就自己处理了一下,显示了h1--h5的标题 之前使用的是这样的目录https://www.cnblogs.com/ziyue7575/p/11407354.html 但是目录隐藏之后,这块区域仍然不能点击,所以,就自己写了一下....就是丑了点 js样式 在页首htm

博客园添加背景音乐,背景效果!

目录 博客园添加背景音乐,背景效果 申请博客园JS权限 添加网易云背景音乐 点击鼠标点击样式 二次元看板娘 雪花效果 原文地址:https://www.cnblogs.com/1212dsa/p/11438461.html

博客园添加markdown文章导航栏

博客园添加Markdown文章导航栏 我正在翻译Spring Framework文档,发布到博客园之后发现文章太密集,猛一看到比较懵,由于看到博客园支持自定义页面,我觉得添加一个导航栏,结构上会更加清晰一些. 所以在网上搜了搜关于添加导航栏的文章,搜到一个试了试,有些问题,所以就自己写了一个,实现功能如下: 主要搜索主页面中的h1-h6 根据1-6的级别设置字体大小和缩进宽度 滚动时页面最上方的标题对应导航将加粗 支持展开隐藏(默认隐藏,如果默认打开,就将js代码第6行display:none改

博客园添加鼠标粒子吸附特效

本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博客园的[管理] → [设置]→ 一直往下拉, 找到[博客侧边栏公告(支持HTML代码)(申请JS权限)] 向[email protected] 发送邮件, 为了尽快通过权限申请, 邮件模板如下: 尊敬的博客园管理员: 请问是否可以帮我开通js权限,我需要一些简单的js来解决问题,例如鼠标点击特效.代

为你的博客园添加平滑移动到页面顶端的锚点和tag云

首先我的目录是在marvin的基础上二次开发的.然后我发现锚点图和目录都在同一个图上面,所以就一起用了. 返回顶部锚点: 我用以前旧版bilibili的那个函数.可以做到平滑滚动到页面,并且在触顶前不能向下滚屏.具体的看我参考链接.当然因为涉及到js要申请权限,简单的话a标签href用#top当然可以,体验有点差罢了. 然后因为我懒,锚点的出现条件直接和目录的出现条件弄在一起.也就是匹配元素相对滚动条顶部的偏移超过200时显示. tag云: 我用Google随便找的.用的矢量绘图. 但是这玩意有

博客园生成目录

一.向官方申请Js权限 批准时间很快,成功有邮件提示: 二.将下段代码添加到页脚Html代码中 <script language="javascript" type="text/javascript"> //生成目录索引列表 function GenerateContentList() { var jquery_h3_list = $('#cnblogs_post_body h3'); //博客园的正文的div的id为cnblogs_post_body,

博客园个人主页目录

table标签中thead.tbody.tfoot的作用http://www.cnblogs.com/zhouxinfei/p/8001510.htmlpython selenium模拟滑动操作http://www.cnblogs.com/zhouxinfei/p/8001506.htmlSelenium webdriver定位iframe里面元素http://www.cnblogs.com/zhouxinfei/p/8001496.html[python3.5][PyUserInput]模拟鼠