当前位置: 首页 > news >正文

typora导出html添加目录

typora导出html添加目录

使用方法
首先要从typora导出html文件,之后用记事本编辑器html文件

找到文档最后面,如图:

请添加图片描述

用文字编辑类工具打开sideBar.txt,复制其中所有内容【内容在下面】
请添加图片描述
在如上图的位置插入所复制的内容

打开修改过的html文件后左上角会出现一个按钮

在这里插入图片描述
点击按钮出现标题的大纲视图

在这里插入图片描述
sideBar.txt

<div class="sideBar"><div class="sidebarText"></div><div class="hideBtn">显示目录</div><div class="author">Powered by me</div>
</div><script>// 隐藏按钮var hideBtn = document.querySelector(".hideBtn");var hideMain = document.querySelector(".sidebarText");var author = document.querySelector(".author");var isHide = true;var hidFun = () => {if (isHide) {hideMain.style.display = "none";hideBtn.style.left = "0.5rem";hideBtn.innerHTML = "显示目录";author.style.display = "none";} else {hideMain.style.display = "block";let leftLength = hideMain.offsetWidth/16 + 0.5;hideBtn.style.left = `${leftLength}rem`;hideBtn.innerHTML = "隐藏目录";author.style.display = "block";}}// hidFun();hideBtn.onclick = function () {isHide = !isHide;hidFun();}var write = document.querySelector("#write").childNodes;//渲染子节点var list = [];write.forEach((item,index)=>{   if (item.localName == 'h1' || item.localName == 'h2' || item.localName == 'h3' || item.localName == 'h4' || item.localName == 'h5' || item.localName == 'h6') {let title = "";for (let i = 1; i < item.childNodes.length; i++) {//console.log(item);//console.log(item.childNodes[i].data);//title = title + item.childNodes[i].innerHTML;title = title + item.childNodes[i].data;}list.push({text: title,a: item.childNodes[0].name,tag:item.nodeName})}})list.forEach((item, index) => {let sideH1 = document.createElement("div");sideH1.setAttribute("class", `side`+`${item.tag}`);sideH1.setAttribute("id", `${item.a}`);sideH1.innerHTML = item.text;hideMain.appendChild(sideH1);})// 点击事件hideMain.onclick = (event) => {if (event.target.className != "sidebarText") {let jumpArr = document.querySelector(`a[name=` + `"${event.target.id}"` + `]`);jumpArr.scrollIntoView();}}
</script><style>   body { margin: 0px 0px 0px 150px;}.sidebarText{min-width: 16rem;max-width: 25rem;height: 100vh;background-color: #f3f4f4;position: fixed;left: 0;top: 0;display: none;overflow-x:auto;white-space:nowrap;padding: 0.8rem 0.8rem 2.5rem 0.8rem;}.hideBtn{width: 5rem;height: 2rem;background-color: #ccc;position: fixed;left: 0.5rem;top: 0.8rem;text-align: center;color: #595959;cursor: pointer;line-height: 2rem;border-radius: 0.5rem;user-select:none;}.author{min-width: 16rem;max-width: 25rem;text-align: center;position: fixed;left: 0;bottom: 0.7rem;display: none;user-select:none;}.sideH1{margin: 0.2rem 0 0.2rem 0;cursor: pointer;}.sideH2{margin: 0.2rem 0 0.2rem 0.6rem;cursor: pointer;}.sideH3{margin: 0.2rem 0 0.2rem 1.2rem;cursor: pointer;}.sideH4{margin: 0.2rem 0 0.2rem 1.8rem;cursor: pointer;}.sideH5{margin: 0.2rem 0 0.2rem 2.4rem;cursor: pointer;}.sideH6{margin: 0.2rem 0 0.2rem 3rem;cursor: pointer;}
</style>
http://www.lryc.cn/news/276458.html

相关文章:

  • vue3 封装一个按钮组件(可自定义按钮样式)
  • Docker 中使用超级用户
  • git打tag以及拉取tag
  • TS 36.212 V12.0.0-信道编码、复用和交织(1)-通用过程
  • 纯前端上传word,xlsx,ppt,在前端预览并下载成图片(预览效果可以,下载图片效果不太理想)
  • WPS Office找回丢失的工作文件
  • 【MATLAB源码-第106期】基于matlab的SAR雷达系统仿真,实现雷达目标跟踪功能,使用卡尔曼滤波算法。
  • 【机器学习】scikit-learn机器学习中随机数种子的应用与重现
  • 欧洲编程语言四巨头
  • 检查密码(字符串)
  • Pointnet++改进注意力机制系列:全网首发LSKAttention大核卷积注意力机制 |即插即用,实现有效涨点
  • C++常用库函数大小写转换
  • 基于springboot+html的汽车销售管理系统设计与实现
  • pyside6 界面美化库的使用
  • 通过Docker搭建4节点的Tendermint集群
  • element plus 表格组件怎样在表格中显示图片
  • cad快速看图软件免费版(手机在线cad快速看图)
  • C#: Label、TextBox 鼠标停留时显示提示信息
  • .NET 8.0 本机 AOT
  • phpcms v9未审核推荐信息出现在推荐列表中【BUG修复】
  • Linux第20步_在虚拟机上安装“Visual Studio Code”
  • 【服务器数据恢复】Raid5热备盘同步失败导致lvm结构损坏的数据恢复案例
  • react+AntDesign 之 pc端项目案例
  • 实验笔记之——基于COLMAP的Instant-NGP与3D Gaussian Splatting的对比
  • 实战环境搭建-linux下安装悟空CRM
  • Redis 7.0性能大揭秘:如何优化缓存命中率?
  • 【深度学习每日小知识】Data Augmentation 数据增强
  • 网络调试 UDP1,开发板用动态地址-入门6
  • 【Gin实战教程】快速入门
  • WPF真入门教程26--项目案例--欧姆龙PLC通讯工具