typora生成html添加侧边目录

先导出HTML文件：

然后找到导出的HTML文件，用记事本或notepad++或别的文本编辑器打开，把如下代码粘贴到</body>下面，保存即可

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--侧栏目录生成代码-->
<script>//标题序号计数器var hCount = [0, 0, 0, 0, 0, 0];//设置计数器function setHCount(number) {//当前计数器加一hCount[number - 1]++;for (var i = number, length = hCount.length; i < length; i++) {//子目录计数器全部置零hCount[i] = 0;}}//重命名目录名称function setHTagValue(item, number) {//获取标题名var text = $(item).get(0).innerHTML;//初始化空字符串var before = "";//生成序号for (var i = 0, length = hCount.length; i < number; i++) {if (i < number - 1)before += hCount[i] + ".";elsebefore += hCount[i] + " ";}//在标题前面加上序号$(item).get(0).innerHTML = before + text;}function renameHTag(item) {var tag = $(item).get(0).localName;if (tag === "h1") {setHCount(1);//console\.log("捕获到标签:%s", tag);setHTagValue(item, 1);}if (tag === "h2") {setHCount(2);//console.log("捕获到标签:%s", tag);setHTagValue(item, 2);}if (tag === "h3") {setHCount(3);//console.log("捕获到标签:%s", tag);setHTagValue(item, 3);}if (tag === "h4") {setHCount(4);//console.log("捕获到标签:%s", tag);setHTagValue(item, 4);}if (tag === "h5") {setHCount(5);//console.log("捕获到标签:%s", tag);setHTagValue(item, 5);}if (tag === "h6") {setHCount(6);//console.log("捕获到标签:%s", tag);setHTagValue(item, 6)}}$(document).ready(function () {$("h1,h2,h3,h4,h5,h6").each(function (i, item) {//给<H>类标签编号renameHTag(item);//获取标签的名字,h1,还是h2var tag = $(item).get(0).localName;//为该标签设置id属性$(item).attr("id", "wow" + i);//添加一个页内超链接,并设置class选择器//      $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');$("#category").append('<a class="new' + tag + '" href="#wow' + i + '">' + $(item).text() + '</a></br>');//为每一个标题超链接的class属性设置左边距$(".newh1").css("margin-left", 0);$(".newh2").css("margin-left", 20);$(".newh3").css("margin-left", 40);$(".newh4").css("margin-left", 60);$(".newh5").css("margin-left", 80);$(".newh6").css("margin-left", 100);});//设置class选择器为.book-body的html内容$(".book-body").html($(".book-body").nextAll())});
</script>
<style type="text/css">@media (max-width: 1600px) {.book-body {/* padding-left: 200px; */padding-right: 0px;}}@media (max-width: 1400px) {.book-body {/* padding-left: 200px; */padding-right: 0px;}}@media (max-width: 1200px) {.book-body {/* padding-left: 300px; */padding-left: 0px;}}@media (max-width: 700px) {.book-body {padding-left: 0px;}}@media (min-width: 600px) {#category {/* 绝对定位 */position: fixed;/* left: 20px; *//* 目录显示的位置 */right: 0px;top: 0;/* 目录栏的高度,这里设置为60%主要是为了不挡住返回顶部和折叠按钮 */height: 79%;/* 开启垂直滚动条 */overflow-y: scroll;/* 开启水平滚动条 */overflow-x: scroll;}}@media (-webkit-max-device-pixel-ratio: 1) {::-webkit-scrollbar-track-piece {background-color: #FFF}::-webkit-scrollbar {width: 6px;height: 6px}::-webkit-scrollbar-thumb {background-color: #c2c2c2;background-clip: padding-box;min-height: 28px}::-webkit-scrollbar-thumb:hover {background-color: #A0A0A0}}
</style>
<script>// id="category" οnclick="showOrCloseCategory()"function showOrCloseCategory() {var id = document.getElementById("category");var book_body=document.getElementById("book_body");//如果展开了if (id.style.display == 'block') {//console.log("开始展开");id.style.display='none';id.style.width="0%";book_body.style.width="100%";book_body.style.paddingleft=0;}//如果被折叠了else if (id.style.display =='none') {//console.log("开始折叠");id.style.display = 'block';book_body.style.width="90%";id.style.width="20%"}}
</script>
<!--返回顶部-->
<div style="position: fixed;float: right;top: 85%;right: 40px;width: 160px;"><a href="javascript:scroll(0,0)">返回顶部</a><button οnclick="showOrCloseCategory()" style="cursor:pointer;border:0;background-color:white;text-decoration:underline;display:inline-block;color:#4183C4;">折叠/展开</button>
</div>
<!--文章主体部分-->
<div class="book-body" id="book_body" style="width:90%;display:block"> </div>
<!--目录栏，设置占用宽度为20%可以根据实际情况设置-->
<div  class="book-summary" id="category" style="width:20%;display:block" ></div>

效果如下：

参考：
https://blog.csdn.net/u012914436/article/details/99679320

typora生成html添加侧边目录相关推荐

typora生成目录
转自:https://steemit.com/utopian-io/@jubi/typora-typora-tutorial-create-a-directory-or-outline 使用typor ...
word文档添加多级目录，自动生成目录
word文档添加多级目录转载:http://jingyan.baidu.com/article/8ebacdf0c32c5f49f65cd53f.html Word如何添加一级二级标题等多级标题有 ...
IDEA中Maven创建webapp项目时不能自动生成src、webapp目录解决【手动添加】
首先,我标题为什么说必看呢,是因为我因为创建web项目时没有自动生成src目录.webapp目录,也不知道我为什么一定要让去自动生成呢?反正就是去看了很多"大佬"的文章,也尝试了很 ...
将 Typora 小工具添加到右键菜单中
将 Typora 小工具添加到右键菜单中 1.参考资料 Windows下在所有的文件添加右键菜单功能程序添加右键菜单运行并传右键文件全名 bat 传递参数批处理判断是文件还是文件夹的几种方法 %~ ...
Typecho Joe 主题添加访目录
Typecho 添加访目录作者BLOG Joe 主题效果图如下在 core/function.php 文件中添加函数,解析目录 /* 生成目录树 */ function _createCatal ...
next主题侧边目录点击失效无法正常跳转
next主题侧边目录点击失效无法正常跳转错误描述: 1.点击侧边栏目录无法正常跳转: 2.控制台报错:Uncaught TypeError: Cannot read properties of un ...
生成doc文档目录，aspose word技术实现
生成doc文档目录,比较了Spire.Doc和aspose word两个技术,Spire.Doc生成目录过多的话会出现问题,使用aspose word解决此问题. //输出到文件 String dir ...
给PDF添加书签目录
给PDF添加书签目录作为一个强迫症,下载到扫描版PDF后,必须将其电子化,先用Adobe Acrobat将其OCR,然后添加书签. OCR可以没有,但书签是万万不能没有的,否则那么一大块书翻阅起来绝 ...
word 中添加图片目录、内部链接
目录 1. 图片.表格添加目录 1.1 插入题注 1.2 添加目录 2. 添加内部链接 1. 图片.表格添加目录 1.1 插入题注只有正确地插入题注,图表目录才能快速生成. (1)两个方法调用&qu ...

typora生成html添加侧边目录

typora生成html添加侧边目录相关推荐

最新文章

热门文章