首页 > 其他分享 >为博客园添加目录

为博客园添加目录

时间:2025-01-17 12:10:33浏览次数:1  
标签:cnblogs h2 博客园 list content 添加 li3 var 目录

原文链接:https://www.cnblogs.com/clwydjgs/p/9415632.html

个人配置:目录显示在侧边栏和文章开头

首先需要申请博客园的js权限,然后在博客后台,设置里添加代码

显示在侧边栏

页首HTML代码添加:

<link href="https://files.cnblogs.com/files/DSYR/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/DSYR/scrollspy.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/DSYR/stickUp.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/DSYR/cnblog-scroller.js" type="text/javascript"></script>

推荐把这四个文件下载到本地,然后上传到自己博客园的“文件”里。

显示在开头

页脚HTML代码添加

<a href="https://tingxuanr.github.io/">欢迎访问我的个人博客</a>
<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>

标签:cnblogs,h2,博客园,list,content,添加,li3,var,目录
From: https://www.cnblogs.com/DSYR/p/18676681

相关文章

  • Winserver用指令批量添加修改AD域控用户.210702
    实践证明,批处理啥的,真的没有ExcelVlookup快。做以下步骤前,记得用好Excel,用公式把内容拼接好,然后愉快地玩耍。1.查找现在OU下的所有用户dsqueryuserou=ZTGM,dc=zt,dc=com-limit0>1.txt2.新增用户:dsadduser指令dsadduser"CN=叶是,OU=采购中心,OU=ZTGM,DC=zt,DC=com"......
  • k8s添加新master或node.210709
    Master1,在master上生成新的token[root@it-1c2d]#kubeadmtokencreate--print-join-commandkubeadmjoink8s.test:6443--tokenapzooq.r9zivb2vaakn72k7--discovery-token-ca-cert-hash`sha256:255fc6a65316054aa5f1bfd92467ebce52f557983f5e901663a3a460af2c60b5......
  • Linux 找到占用磁盘最多的文件或目录,可以使用du和sort
    想要找到占用磁盘最多的文件或目录,可以使用du和sort命令: du-h/path/to/directory|sort-rh|head-n10其中:du-h/path/to/directory用于计算指定目录下的所有文件和子目录的大小,并以人类可读的格式显示。sort-rh用于按磁盘使用情况的大小(逆序)对输出进行排序。h......
  • MCP(Model Context Protocol)模型上下文协议 理论篇8 - 根目录(Roots)
    模型上下文协议(ModelContextProtocol,MCP) 提供了一种标准化的方式,使客户端能够向服务器暴露文件系统的“根目录”(Roots)。根目录定义了服务器在文件系统中可以操作的边界,使服务器能够了解它们可以访问哪些目录和文件。支持该协议的客户端可以从服务器请求根目录列表,并在列表......
  • Linux基础02:+文件系统+ 目录操作+ 文件操作+ 存储转换
    内容提要文件系统目录操作文件操作存储转换文件系统Linux本质就是一个文件系统,Linux文件系统是操作系统组织、存取、保存数据的一种手段,整体采用层级式的倒状目录结构。倒树状结构中的目录/:根目录,Linux中的绝对路径就是由这个开始的/bin:主要存放系统的普通指令......
  • 【虚拟机硬盘的添加及分区挂载】
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档虚拟机硬盘的添加及分区挂载一、添加类型为SCSI的硬盘二、添加类型为STAT的硬盘三、添加类型为NVME的硬盘一、添加类型为SCSI的硬盘第一块硬盘,虚拟磁盘类型选择SCSI。大小选择5G。按mbr格式分区。分......
  • Linux:文件与目录管理
    ------------------------------------------------------------一、目录结构在控制台输入ls/查看根目录。Linux有着将一切视为文件的原则,根目录就是所有文件的起始点。 其拥有树状的目录结构,下面开始介绍各个根目录下文件夹的作用。/:根目录/bin:普通用户可执行......
  • 博客园 & 1Panel 联合终身会员上线
    园子和飞致云合作的联合会员这周开始上线,1月13日上线了1Panel联合终身会员,1月14日上线了Halo联合终身会员。在博客园团队博客转发一下飞致云的全资子公司凌霞软件针对「博客园&1Panel联合终身会员上线」的官方发文:2025新年伊始,凌霞软件与博客园达成战略合作,推出博客园......
  • Mac——Automator自动化工具,把TextEdit(文本编辑器)新建文档添加到鼠标右键
    在macOS系统上,TextEdit(文本编辑器)本身并不直接支持通过鼠标右键来新建文本文件。然而,你可以通过一些自定义设置或第三方工具来实现类似的功能。一、使用Automator创建服务打开Automator:Automator 是macOS系统自带的一个自动化工具,可以用来创建各种工作流程和服务。......
  • HTML5怎么为输入框添加语音输入的功能呢?
    在HTML5中,你可以使用WebSpeechAPI中的webkitSpeechRecognition接口来实现语音输入的功能。然而,需要注意的是,这个API目前主要是WebKit浏览器(如Chrome和Safari)支持,并且它的前缀webkit也暗示了这一点。此外,这个API在未来的浏览器中可能会被更改或移除,所以在生产环境中使用时需要谨......