Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js为博客文章自动生成目录

js为博客文章自动生成目录

作者头像
泽泽社长
发布于 2023-04-17 09:01:00
发布于 2023-04-17 09:01:00
99000
代码可运行
举报
文章被收录于专栏:泽泽社泽泽社
运行总次数:0
代码可运行

前言

早就想给博客文章加个目录了,以前是能力不够,即使看了别人的Demo,也不会搞,现在只要克服懒癌,应该也没啥困难。于是开始搞起。 代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script language="javascript" type="text/javascript">// 生成两级目录索引列表
function GenerateContentList()
{
 var mainContent = $('#mulu'); //在id为mulu的div里面加载目录
 var h1_list = $('#yl h1');  
  var h2_list = $('#yl h2');  //代码中所有的yl指的是在id为yl的div里面匹配h1,h2,h3
 if(mainContent.length < 1)
  return;  
 if(h1_list.length>0)
 {
  var content = '';
  content += '';
  content += '<h2 id="table-of-contents">目录</h2>';
  content += '<ol class="toc">';
  for(var i=0; i<h1_list.length; i++)
  {
   var go_to_top = '<a name="_label' + i + '"></a>';
   $(h1_list[i]).before(go_to_top);   
   var h2_list = $(h1_list[i]).nextAll("h2");
   var li2_content = '';
   for(var j=0; j<h2_list.length; j++)
   {
    var tmp = $(h2_list[j]).prevAll('h1').first();
    if(!tmp.is(h1_list[i]))
     break;
    var li2_anchor = '<a name="_label' + i + '_' + j + '"></a>';
    $(h2_list[j]).before(li2_anchor);
    li2_content += '<li class="toc-item toc-level-' + i + '_' + j + '"><a class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h2_list[j]).text() + '</span></a></li>';
   } 
   var li1_content = '';
   if(li2_content.length > 0)
    li1_content = '<li class="toc-item toc-level-' + i + '"><a class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + '</ol>';
   else
    li1_content = '<li class="toc-item toc-level-' + i + '"><a class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li>';
   content += li1_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } else{
if(h1_list.length==0&&h2_list.length>0)
 {
  var content = '';
  content += '';
  content += '<h2 id="table-of-contents">目录</h2>';
  content += '<ol class="toc">';
  for(var i=0; i<h2_list.length; i++)
  {
   var go_to_top = '<a name="_label' + i + '"></a>';
   $(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 class="toc-item toc-level-' + i + '_' + j + '"><a class="toc-link" href="#_label' + i + '_' + j + '"><span class="toc-text">' + $(h3_list[j]).text() + '</span></a></li>';
   }  
   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '<li class="toc-item toc-level-' + i + '"><a class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + '</ol>';
   else
    li2_content = '<li class="toc-item toc-level-' + i + '"><a class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li>';
   content += li2_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } 
}
}
GenerateContentList();
</script>

留言

以上是我的代码,需要说明的地方我加了注释,其他的标签可根据你的模板自行更改。这个代码能匹配h1,h2,h3。其中h1,h2可单独匹配,h3无法单独匹配,简单来说就是文章中只有h3的话目录不会启用。

参考

脚本之家:利用JS生成博文目录及CSS定制博客

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
博客园文章自动生成目录-3级
首先我们需要申请开通js权限,然后将目录js代码复制到博客侧边栏公告(支持HTML代码) (支持 JS 代码)中,如下所示:
追逐时光者
2020/06/19
6080
博客园文章自动生成目录-3级
为博客园添加目录的方法总结
参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblogs.com/zzqcn/p/4657124.html http://www.cnblogs.com/jiangz/p/3734968.html
shirayner
2018/08/10
8440
为博客园添加目录的方法总结
Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)
如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等
逸鹏
2018/06/14
6.7K5
Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)
在博客园平台为博客自动化添加目录
以下示例效果文章的源地址是这篇博客,在完成配置后,在markdown里面的一级标题二级标题等都会在这里的目录中显示,这里仅提供了文章开头目录以及每一个标题中回到顶部的功能,如果需要悬浮窗的目录显示,需要参考其他文章,如这篇博客介绍了小型悬浮窗的效果,但是只能用于二级标题和三级标题的文章。本文的配置方法使用了参考链接1中所给出的方法,效果如下图所示:
DechinPhy
2021/05/21
5760
jQuery 实现富文本的标题自动生成目录
参考文档 JQuery 实现自动生成二级目录 JQuery 点击事件回到页面顶部效果 配置步骤 content 内容的标题要固定某个号,如:h2 设置 content 内容 div 的 id 属性,如:id="yzq-blog-content" 实现的 js 代码 只生成一级目录,指定 h2(效果): <script language="javascript" type="text/javascript"> //生成一级目录索引列表 function GenerateContentList(
卓越笔记
2023/02/18
6970
博客园_01_为博客园添加目录的方法总结
本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html
shirayner
2018/08/10
1.4K0
两分钟搞定博客园自定义样式
选用的是在 SimpleMemory 基础上进行改造。所以注意:引用模板css样式取药取消勾选
Daotin
2019/07/08
1K0
自定义侧边栏博客目录
侧边栏目录有个问题,在15.6的显示器上会出现遮挡情况。(当初设置的时候是用23寸显示器来写的)
Noneplus
2019/09/24
4190
自定义侧边栏博客目录
你真的了解博客园的目录么。。
非常感谢这位盆友能发现这个问题,奖励鸡腿,这是那篇博文:要嫁就嫁程序员,因为。。。
Dawnzhang
2018/10/18
8480
你真的了解博客园的目录么。。
菜鸡博客开……开……开源了!
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!
attack
2018/09/21
2.9K0
博客园 主题自定义美化
在浏览器中直接打开https://files.cnblogs.com/files/JetpropelledSnake/cnblogs.css,然后按ctrl + s,即可将本人博客用到的自定义css下载下来。接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件:
Jetpropelledsnake21
2019/02/15
1.3K0
页面点击特效
<script src="js/jquery.js"></script> <div class="changeColor" style="height:500px"> <h1 style="text-align:center">啦啦啦啦啦啦</h1> </div> <style type="text/css"> /*滚动文字样式*/ #container { position: relative; width: 200px; } /*滚动文字样式*/ #content {
小语雀网
2022/05/06
2.8K0
Jupyter-Notebook版的博客园美化
文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html
逸鹏
2018/06/20
1.1K0
Jupyter-Notebook版的博客园美化
前端那点事儿——Tocify自动生成文档目录
今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置;窗口滑动也能自动更新目录的焦点。 效果 框架 原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面,把指定的DOM元素抽取出来形成目录。 下载地址参考gitub : [gfranko/jquery.tocify.js] 开发者可以直接下载zip包使用,压缩包里面的内容包括: demos 演示页面(里面有一个google的链接,访问会超时,去掉即可) images 可以忽略 libs 额外使用的文件,如
用户1154259
2018/01/17
1.3K0
markdownpad2:输出Html时自动生成目录TOC
版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net/10km/article/details/78937008
10km
2019/05/25
1.9K0
小白如何在博客园上创建一个自己的超美化博客
我总想着一个人学了那么多东西,最后究竟有什么留了下来了?到现在回过头来一看,发现没有看到有什么时留下来的,保存在记忆中的知识也会逐渐的忘掉。所以,弄一个自己的博客,把学过的,学到的东西留下来,让自己看得到,也能让别人看得到。与这个世界的交互,从此刻开始吧!
西西嘛呦
2020/08/26
5.4K5
小白如何在博客园上创建一个自己的超美化博客
利用jquery自动生成导航目录
翻译自:http://www.jankoatwarpspeed.com/post/2009/08/20/Table-of-contents-using-jQuery.aspx 原文提供了3种样式,但是基本思想都是一样,那就是利用jquery选择器找到文章中的h1,h2,h3标签,修改这个标签的ID并生成对应的锚点链接地址。
零式的天空
2022/03/16
1.8K0
基于django的个人博客网站建立(二)
首先接上一次内容,昨天只是完成了一个登录的跳转,其他信息并没有保存到session中,今天先完善一下
py3study
2020/01/16
2K0
主题通过outline.js生成文章目录
有现成的轮子肯定不用重复去造,在主题本来就用了JQuery的情况下,肯定优先使用JQuery的插件。 ChatGPT给推荐了几个:
XiaoA
2024/07/22
1350
个人博客网站主题阿里秀xiu网页模板
个人博客网站主题阿里秀xiu网页模板采用HTML5+CSS3设计,自适应支持PC,手机,平板电脑多种设备适用到个人博客模板、新闻资讯博客模板、科技个人博客模板,个人生活博客模板等。在各行业建站上有较好的效果,目前,用的最多是推荐类个人博客网站dedecms织梦模样,帝国cms模板...演示http://bokequ.com/blog/alixiu/
博客趣
2024/05/03
1910
个人博客网站主题阿里秀xiu网页模板
相关推荐
博客园文章自动生成目录-3级
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验