首页 > 其他分享 >blog-博客美化-生成目录索引

blog-博客美化-生成目录索引

时间:2023-05-17 18:23:24浏览次数:41  
标签:content h2 目录索引 list blog li3 var 美化

博客美化-生成目录索引

  • 注意:
需要先申请开通JS接口!!
今天帮朋友设置后台代码,发现怎么都没有效果,看了下忽略了JS接口;
因为插入的代码大多有JS功能,不申请开通JS功能自然无法支持JS效果。
网上看了很多博客也都没提及这点,感觉是个坑,So,需要的朋友可以留意下。
对了、在编辑页面是显示不出目录效果的,只有你设置好目录发布文章后,发布的文章才会有目录效果哦~

js 代码

<script language="javascript" type="text/javascript">
// 生成目录索引列表

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>

标签:content,h2,目录索引,list,blog,li3,var,美化
From: https://www.cnblogs.com/tssc/p/17409665.html

相关文章

  • blog-博客美化-添加打赏按钮
    博客美化-添加打赏按钮1.获取支付宝,微信的收款码1.1.获取收款码图片支付宝的使用说明*您也可以登录支付宝,打开https://qr.alipay.com/paipai/personal.htm,保存网页上的收款二维码,然后将图片添加到自己的博客园相册里面,然后将图片的地址作为qrimg参数传入,这样别人扫描此二维......
  • Blog-2
    前言:(总结之前所涉及到的知识点、题量、难度等情况)一,菜单四难度:菜单四是在菜单三的基础上迭代的,难度较大,因为要求有很多,这次大作业只要这一道题,但是也是要花费很长时间的一些知识点:类和对象:在代码中定义了几个类,如MenuItem(菜单项)、OrderItem(订单项)、TableOrder(桌子订单)和Tab......
  • BLOG-2
    前言:这次博客分析两个菜单和一个期中考试,在这次期中考试里重点考察了接口以及我们对抽象类和接口之间的差别理解,以及对list包的理解和使用,比如ArrayList<Shape>list=newArrayList<>();这里考的list的面积排序,就是用接口的办法来解决面积大小的排序。这里接口:Comparable接口 ......
  • Go语言并发编程-cnblog
    并发编程并发vs并行举个形象点的例子并发可以理解为一边吃饭,一边喝水,因为人只有一个嘴一个咽喉,所以同一时刻饭和水只能有一样进入,二者只能交替进行并行可以理解为一边走路一边吃东西,因为走路是靠腿脚,吃东西是靠嘴,二者不相干,相当于两个独立的线程,因而可以同时进行Go语言......
  • BLOG-2
    一、前言先叠个甲,针对上次互评同学们的评论,我这次虽说也写上了题目,但我写了一万多字,真的没有水字数!!这次类图和圈复杂度也都加上了,麻烦各位帅哥美女给高点分儿,我也保证在互评时都打90分以上。1.知识点:接口,正则表达式,集合等等2.题量:额,菜单系列就一道题,不能说大吧。。。3.难度:我......
  • css美化
    编辑网页文本span标签:能让某几个字凸显出来结构:span{color:red;}  <span>123<span>字体样式:一般设置两个字体。如果浏览器第一个字体不认识,就会默认显示第二个。{font_family:"楷体",宋体;}字体大小:{font-size:20px;}字体风格:斜体{font-style:italic;}字体的粗细:{font=weig......
  • # ubuntu18.04美化教程
    随记,这是在我美化完ubuntu18.04一段时间后,同学也想要美化教程,所以我凭着记忆来写的,教程中可能会有一些不足的地方,如果你遇到了问题可以在评论区指出,我看到后会尽量回答解决问题效果图如下参考文章Ubuntu18.04桌面美化全攻略_若水似风的博客-CSDN博客_ubuntu美化Ub......
  • jmeter 美化json响应
    简介在查看结果树中,ResponseBody里的json一般是不换行的,看起来很不方便。这里通过JSR223后置处理器改变响应的格式具体实现首先,我们要把fastjson的jar包放入到jmeterHome/lib/目录(建议放入1.x的版本,因为fastjson2可能需要多个jar包,具体需要哪些我也没有测试),重启jmeter第二步......
  • C# WinForm 控件美化之改变ListView Head 的背景色
    方法1:(已测试)给ListView添加以下事件,改实例DataList为控件名称privatevoidDataList_DrawColumnHeader(objectsender,DrawListViewColumnHeaderEventArgse){e.Graphics.FillRectangle(newSolidBrush(Color.Black),e.Bounds);//设置背景颜......
  • weblogic 相关概念
    计算机服务器部署https://blog.csdn.net/cunfu/article/details/117738439https://blog.csdn.net/suixinfeixiangfei/article/details/121595225?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-4-121595225-blog-118541751.23......