首页 > 其他分享 >为Markdown/HTML文档生成一个简易目录

为Markdown/HTML文档生成一个简易目录

时间:2022-11-22 17:14:53浏览次数:38  
标签:index Markdown ele HTML 文档 跳转 生成 标题 hLevel

现在阅览文章的网页往往都带有一个目录,方便点击跳转。目录一般都是根据文档中的标题级别直接生成的。

知乎

现在我们也来模仿一个简单的,无非就是把<h1><h2>...的序列转化成树嘛

image

思路是这样,我们首先找到所有文章的所有标题并且标记上,然后开始从前往后遍历标题,如果如果遇到同一级的标题,那就直接添加这个标题到后面,如果遇到级别更低的标题(h2 遇到 h3),说明从h3开始都是我的子目录,我们递归进入h2的子目录,直到遇到下一个高级别的标题(递归中找到更高的h2),说明完整的子目录生成完成,可以返回了。每一个新的子目录<ul>都是原<li>的子目录。

image

// 函数的含义是,在第index个标题处生成目录树,该标题级别为hLevel
function genFromTitle(hLevel, index){
	let ele = ''
	while (index < $('.isTitle').length) {
		let t = $('.isTitle').eq(index)
		if (t.attr('hLevel') > hLevel) {
			// 遇到更小的标题,递归生成
			let nt = genFromTitle(t.attr('hLevel'), index)
			ele += `<li>${nt.ele}</li>`
			// 从nt.index到index-1的标题都处理完毕,更新index
			index = nt.index 
		}
		else if (t.attr('hLevel') < hLevel) break // 遇到更大的标题,向上返回
		else {
			// 相同等级平行关系,直接添加标题项,下一个
			ele += `<li>
						<a> ${ t.text() } </a>
					</li>`;
			index ++;
		}
	}
	ele = `<ul>${ele}</ul>`
	return {ele, index} //index 也要返回去,父函数继续往后生成
}

// elEssay为文档挂载点,elContent为生成的目录挂载点
function makeEssayContent(elEssay, elContent) {
	// 首先标记所有标题
	for (let i = 1; i <= 6; i++) {
		elEssay.find('h'+i).addClass('isTitle').attr('hLevel', i)
	}
	elContent.html(genFromTitle(1, 0).ele);//从第一个一级标题开始生成
}

对于下面的标题,可以生成正确结果:

数据结构复习

一、线性结构

1.栈和队列

2.链表

二、树形结构

1.二叉排序树

三、排序

<ul>
<li><a> 数据结构复习 </a></li>
<li>
	<ul>
	<li><a> 一、线性结构</a></li>
	<li>
		<ul>
		<li><a> 1.栈和队列 </a></li>
		<li><a> 2.链表</a></li>
		</ul>
	</li>
	<li><a> 二、树形结构 </a></li>
	<li>
		<ul>
		<li><a> 1.二叉排序树 </a></li>
		</ul>
	</li>
	<li><a> 三、排序 </a></li>
	</ul>
</li>
</ul>

添加跳转功能

不能跳转的目录是没有什么用的,我们知道网页可以通过锚点直接跳转到对应的id,所以只要给每个标题添加一个id,再给对应的目录项设置跳转点就可以了

else {
	t.attr('id', 'tp'+index) // 恰好每个标题有唯一index 直接拿来用
	ele += `<li>
				<a href="#tp${index}"> ${ t.text() } </a>
			</li>`;
	index ++;
}

添加折叠功能

根据上面的图,每个ul外面的li的上一个元素就是这个ul的父元素,所以可以在这个父元素设置标记,点击时将ul折叠即可。

//econtent是我的外包裹元素,这里选中所有符合条件的父元素(能展开和收缩的)
$('.econtent li ul').parent().prev().before($('<span class="foldable">&gt;</span>')) //添加一个标记
$('.foldable').on("click", (this)=>{
	$(this).next().next().slideToggle()
	$(this).toggleClass('collapsed')
})

标记有各种方法,我直接使用了一个大于号,在点击的时候旋转一下,就有生动的效果:

.foldable{
	display: inline;
	float: left;
	margin-left: -1rem;//左移一个字符,与没有子项的同级标题对齐
	transition: all .2s;
}
.collapsed{
	transform: rotate(90deg);
	transform-origin: center;
}

最终效果:见左侧

标签:index,Markdown,ele,HTML,文档,跳转,生成,标题,hLevel
From: https://www.cnblogs.com/ofnoname/p/16915381.html

相关文章

  • wkhtmltopdf 如何自定义字体(前端操作的方法,最简单方案)
    如下:我们可以利用css3的@font-face特性,自定义一个完全由自己下载的.ttf为格式的文件作为webkit内核浏览器临时支持的字体。woff格式请自行测试开发环境:C#wkhtmlto......
  • 配置yum源时出现格式问题: file: file:///etc/yum.repos.d/CentOS-Base.repo, line: 1
    一般或者yum源的配置文件“http://mirrors.aliyun.com/repo/Centos-7.repo”很多人直接喜欢用wget,这样下载下来会出现跟源文件MD5不一致,原因可能是里面的文件格式发生了变......
  • websocket html网页
    <html><body>Welcome<br/><inputid="text"type="text"/><buttononclick="send()">Send</button><buttononclick="closeWebSocket()">Close</bu......
  • 【校招VIP】【约起来】产品PRD文档:重点在于能约起来的类别
    VIP的服务,不一样的校招。大家好,我是校招VIP的大拿老师。那么我们今天继续约起来第一期活动发布模块的PRD文档,就是产品需求文档的描述。这里面会有一些重要点,让我们来一起......
  • heimdall安装器安装使用文档
    Heimdall安装器安装使用文档目录Heimdall安装器安装使用文档1.概述2.编写目的3.修改记录4.安装流程4.1安装前环境检查4.2安装包启动4.1.1获取安装包4.1.2安装器启动4.3......
  • HTML-样式
    1 style属性用于改变HTML元素的样式。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Lightly-HTML-Project</title><......
  • 使用vscode+evernote印象笔记+markdown写在线笔记
    1.vscode安装evermonkey插件2.vscode快捷键:Ctrl+Shift+P,输入ever按提示进行操作EverNew:创建新evernote笔记;愉快地玩耍点击下列图片标红位置,可以实时预览......
  • Markdown编辑环境搭建
    摘要:这篇文章主要介绍我本人搭建Markdown编辑环境的全过程,并记录下在这个过程中所遇到的问题及解决方法。一、VSCode安装进入VSCode官网:VSCode官网然后根据自己的电......
  • 公司平台尝试搭建文档
    平台搭建:mkdir/home/nari1.Java环境tar-xvfjdk-8u351-linux-x64.tar.gzln-s/home/nari/jdk1.8.0_351//home/nari/java  添加Java的环境变量:编辑/etc/profi......
  • 自动获取网页内容,然后写入excel文档中
     今天需要将北京物业公司名称以及电话给整理出来,发现爱帮网上的数据比较多,自己一个一个的去摘取,太麻烦了,于是写一段代码来完成,并自动写入excel文档中,主要用的Jsoup以及jxl......