百知巴巴»部署社区 › 网站建设和推广 › 网站建设 › 帖子
发新帖

typora生成html添加侧边目录/typora侧边栏与正文,toc都带序号

[复制链接]
8953 0

欢迎访问钉钉部署社区，本站发帖提问钉钉部署，部署老师必答！钉钉部署24h热线：0312-4173206

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012914436/article/details/99679320
转html
————————————————
版权声明：本文为CSDN博主「码小匠---千少」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012914436/article/details/99679320

  1. 打开typora文件 --> 导出 --> html
  2. 用编辑器(记事本,editplus,gvim,vscode,Hbuilder),我用的Hbuilder,把如下代码粘贴到</body>下方
  3. <body>
  4. ....
  5. </body>
  6. ***粘贴到此处***
复制代码
代码
  1. <!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
  2. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
  4. <script>hljs.initHighlightingOnLoad();</script>
  5. <!--侧栏目录生成代码-->
  6. <script>
  7.     //标题序号计数器
  8.     var hCount = [0, 0, 0, 0, 0, 0];
  9.     //设置计数器
  10.     function setHCount(number) {
  11.         //当前计数器加一
  12.         hCount[number - 1]++;
  13.         for (var i = number, length = hCount.length; i < length; i++) {
  14.             //子目录计数器全部置零
  15.             hCount[i] = 0;
  16.         }
  17.     }
  18.     //重命名目录名称
  19.     function setHTagValue(item, number) {
  20.         //获取标题名
  21.         var text = $(item).get(0).innerHTML;
  22.         //初始化空字符串
  23.         var before = "";
  24.         //生成序号
  25.         for (var i = 0, length = hCount.length; i < number; i++) {
  26.             if (i < number - 1)
  27.                 before += hCount[i] + ".";
  28.             else
  29.                 before += hCount[i] + " ";
  30.         }
  31.         //在标题前面加上序号
  32.         $(item).get(0).innerHTML = before + text;
  33.     }
  34.     function renameHTag(item) {
  35.         var tag = $(item).get(0).localName;
  36.         if (tag === "h1") {
  37.             setHCount(1);
  38.            //console\.log("捕获到标签:%s", tag);
  39.             setHTagValue(item, 1);
  40.         }
  41.         if (tag === "h2") {
  42.             setHCount(2);
  43.             //console.log("捕获到标签:%s", tag);
  44.             setHTagValue(item, 2);
  45.         }
  46.         if (tag === "h3") {
  47.             setHCount(3);
  48.             //console.log("捕获到标签:%s", tag);
  49.             setHTagValue(item, 3);
  50.         }
  51.         if (tag === "h4") {
  52.             setHCount(4);
  53.             //console.log("捕获到标签:%s", tag);
  54.             setHTagValue(item, 4);
  55.         }
  56.         if (tag === "h5") {
  57.             setHCount(5);
  58.             //console.log("捕获到标签:%s", tag);
  59.             setHTagValue(item, 5);
  60.         }
  61.         if (tag === "h6") {
  62.             setHCount(6);
  63.             //console.log("捕获到标签:%s", tag);
  64.             setHTagValue(item, 6)
  65.         }
  66.     }
  67.     $(document).ready(function () {
  68.         $("h1,h2,h3,h4,h5,h6").each(function (i, item) {
  69.             //给<H>类标签编号
  70.             renameHTag(item);
  71.             //获取标签的名字,h1,还是h2
  72.             var tag = $(item).get(0).localName;
  73.             //为该标签设置id属性
  74.             $(item).attr("id", "wow" + i);
  75.             //添加一个页内超链接,并设置class选择器
  76.             //      $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
  77.             $("#category").append('<a class="new' + tag + '" href="#wow' + i + '">' + $(item).text() + '</a></br>');
  78.             //为每一个标题超链接的class属性设置左边距
  79.             $(".newh1").css("margin-left", 0);
  80.             $(".newh2").css("margin-left", 20);
  81.             $(".newh3").css("margin-left", 40);
  82.             $(".newh4").css("margin-left", 60);
  83.             $(".newh5").css("margin-left", 80);
  84.             $(".newh6").css("margin-left", 100);
  85.         });
  86.         //设置class选择器为.book-body的html内容
  87.         $(".book-body").html($(".book-body").nextAll())
  88.     });
  89. </script>
  90. <style type="text/css">
  91.     @media (max-width: 1600px) {
  92.         .book-body {
  93.             /* padding-left: 200px; */
  94.             padding-right: 0px;
  95.         }
  96.     }
  97.     @media (max-width: 1400px) {
  98.         .book-body {
  99.             /* padding-left: 200px; */
  100.             padding-right: 0px;
  101.         }
  102.     }
  103.     @media (max-width: 1200px) {
  104.         .book-body {
  105.             /* padding-left: 300px; */
  106.             padding-left: 0px;
  107.         }
  108.     }
  109.     @media (max-width: 700px) {
  110.         .book-body {
  111.             padding-left: 0px;
  112.         }
  113.     }
  114.     @media (min-width: 600px) {
  115.         #category {
  116.             /* 绝对定位 */
  117.             position: fixed;
  118.             /* left: 20px; */
  119.             /* 目录显示的位置 */
  120.             right: 0px;
  121.             top: 0;
  122.             /* 目录栏的高度,这里设置为60%主要是为了不挡住返回顶部和折叠按钮 */
  123.             height: 79%;
  124.             /* 开启垂直滚动条 */
  125.             overflow-y: scroll;
  126.             /* 开启水平滚动条 */
  127.             overflow-x: scroll;
  128.         }
  129.     }
  130.     @media (-webkit-max-device-pixel-ratio: 1) {
  131.         ::-webkit-scrollbar-track-piece {
  132.             background-color: #FFF
  133.         }
  134.         ::-webkit-scrollbar {
  135.             width: 6px;
  136.             height: 6px
  137.         }
  138.         ::-webkit-scrollbar-thumb {
  139.             background-color: #c2c2c2;
  140.             background-clip: padding-box;
  141.             min-height: 28px
  142.         }
  143.         ::-webkit-scrollbar-thumb:hover {
  144.             background-color: #A0A0A0
  145.         }
  146.     }
  147. </style>
  148. <script>
  149.     // id="category" οnclick="showOrCloseCategory()"
  150.     function showOrCloseCategory() {
  151.         var id = document.getElementById("category");
  152.         var book_body=document.getElementById("book_body");
  153.         //如果展开了
  154.         if (id.style.display == 'block') {
  155.             //console.log("开始展开");
  156.             id.style.display='none';
  157.             id.style.width="0%";
  158.             book_body.style.width="100%";
  159.             book_body.style.paddingleft=0;
  160.         }
  161.         //如果被折叠了
  162.         else if (id.style.display =='none') {
  163.             //console.log("开始折叠");
  164.             id.style.display = 'block';
  165.             book_body.style.width="90%";
  166.             id.style.width="20%"
  167.         }
  168.     }
  169. </script>
  170. <!--返回顶部-->
  171. <a href="javascript:scroll(0,0)" style="position:fixed;float:right;right:40px;top:80%">返回顶部</a>
  172. <button onclick="showOrCloseCategory()" style="position:fixed;float:right;right:40px;top:85%">折叠/展开</button>
  173. <!--文章主体部分-->
  174. <div class="book-body" id="book_body" style="width:90%;display:block"> </div>
  175. <!--目录栏，设置占用宽度为20%可以根据实际情况设置-->
  176. <div  class="book-summary" id="category" style="width:20%;display:block" ></div>

复制代码
typora 侧边栏带序号

base.user.css

_仅侧边栏带序号

  1. /* 正文标题区: #write */
  2. /* [TOC]目录树区: .md-toc-content */
  3. /* 侧边栏的目录大纲区: .sidebar-content */
  4. /*仅侧边栏有序号*/

  6. /**
  7. * 说明：
  8. *     Typora的标题共有6级，从h1到h6。
  9. *     我个人觉得h1级的标题太大，所以我的标题都是从h2级开始。
  10. *     个人习惯每篇文章都有一个总标题，有一个目录，所以h2级的标题前两个都不会计数。
  11. *     一般情况下，我虽然不使用h1级的标题，但是为了以防万一，h1级的标题前两个也都不会计数。
  12. *     若想启用h1级标题，就取消包含“content: counter(h1) "."”项的注释，然后将包含“content: counter(h2) "."”的项注释掉即可。
  13. */
  14. /** initialize css counter */
  15. /*   .sidebar-content,*/
  16. .sidebar-content{
  17.         /* 设置全局计数器的基准 */
  18.         /* 因为我喜欢从h2级标题用起，所以这里设置为h2,已修改为h1 */
  19.     counter-reset: h1
  20. }

  22. .outline-h1 {
  23.     counter-reset: h2
  24. }

  26. .outline-h2 {
  27.     counter-reset: h3
  28. }

  30. .outline-h3 {
  31.     counter-reset: h4
  32. }

  34. .outline-h4 {
  35.     counter-reset: h5
  36. }

  38. .outline-h5 {
  39.     counter-reset: h6
  40. }

  42. /** put counter result into headings */

  44. .outline-h1>.outline-item>.outline-label:before {
  45.     counter-increment: h1;
  46.     content: counter(h1) " "
  47. }

  49. /* 使用h1标题时，去掉前两个h1标题的序号，包括正文标题、目录树和大纲 */
  50. /* nth-of-type中的数字表示获取第几个h1元素，请根据情况自行修改。 */


  53. .outline-h1:nth-of-type(0)>.outline-item>.outline-label:before{
  54.         counter-reset: h1;
  55.         content: ""
  56. }


  59. h2.md-focus.md-heading:before, /** override the default style for focused headings */
  60. .outline-h2>.outline-item>.outline-label:before {
  61.         text-decoration: none;
  62.     counter-increment: h2;
  63.     content: counter(h1) "." counter(h2) " "
  64. }

  66. /* 使用h2标题时，去掉前两个h2标题的序号，包括正文标题、目录树和大纲 */
  67. /* nth-of-type中的数字表示获取第几个h2元素，请根据情况自行修改。 */




  72. h3.md-focus.md-heading:before, /** override the default style for focused headings */
  73. .outline-h3>.outline-item>.outline-label:before {
  74.         text-decoration: none;
  75.     counter-increment: h3;
  76.      content: counter(h1) "." counter(h2) "." counter(h3) " "
  77.     /*content: counter(h2) "." counter(h3) ". " */
  78. }


  81. h4.md-focus.md-heading:before,
  82. .outline-h4>.outline-item>.outline-label:before {
  83.         text-decoration: none;
  84.     counter-increment: h4;
  85.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
  86.     /*content: counter(h2) "." counter(h3) "." counter(h4) ". " */
  87. }


  90. h5.md-focus.md-heading:before,
  91. .outline-h5>.outline-item>.outline-label:before {
  92.         text-decoration: none;
  93.     counter-increment: h5;
  94.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
  95.     /*content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " */
  96. }


  99. h6.md-focus.md-heading:before,
  100. .outline-h6>.outline-item>.outline-label:before {
  101.         text-decoration: none;
  102.     counter-increment: h6;
  103.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
  104.     /*content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " */
  105. }
  106. /*侧边栏文字颜色*/

  108. .outline-h1,
  109. .outline-h2,
  110. .outline-h3,
  111. .outline-h4
  112. .outline-h5
  113. {
  114.   /*color: rgba(0, 160, 233, 0.5);*/
  115.   color: rgba(0, 128, 0, 1);
  116. /** override the default style for focused headings */

  118. h3.md-focus:before,
  119. h4.md-focus:before,
  120. h5.md-focus:before,
  121. h6.md-focus:before {
  122.     color: inherit;
  123.     border: inherit;
  124.     border-radius: inherit;
  125.     position: inherit;
  126.     left:initial;
  127.     float: none;
  128.     top:initial;
  129.     font-size: inherit;
  130.     padding-left: inherit;
  131.     padding-right: inherit;
  132.     vertical-align: inherit;
  133.     font-weight: inherit;
  134.     line-height: inherit;
  135. }

复制代码
typora侧边栏与正文,toc都带序号

base.user.css

_侧边栏与正文,toc都带序号

  1. /* 正文标题区: #write */
  2. /* [TOC]目录树区: .md-toc-content */
  3. /* 侧边栏的目录大纲区: .sidebar-content */

  5. /**
  6. * 说明：
  7. *     Typora的标题共有6级，从h1到h6。
  8. *     我个人觉得h1级的标题太大，所以我的标题都是从h2级开始。
  9. *     个人习惯每篇文章都有一个总标题，有一个目录，所以h2级的标题前两个都不会计数。
  10. *     一般情况下，我虽然不使用h1级的标题，但是为了以防万一，h1级的标题前两个也都不会计数。
  11. *     若想启用h1级标题，就取消包含“content: counter(h1) "."”项的注释，然后将包含“content: counter(h2) "."”的项注释掉即可。
  12. */
  13. /** initialize css counter */
  14. #write, .sidebar-content,.md-toc-content{
  15.         /* 设置全局计数器的基准 */
  16.         /* 因为我喜欢从h2级标题用起，所以这里设置为h2,已修改为h1 */
  17.     counter-reset: h1
  18. }

  20. #write h1, .outline-h1, .md-toc-item.md-toc-h1 {
  21.     counter-reset: h2
  22. }

  24. #write h2, .outline-h2, .md-toc-item.md-toc-h2 {
  25.     counter-reset: h3
  26. }

  28. #write h3, .outline-h3, .md-toc-item.md-toc-h3 {
  29.     counter-reset: h4
  30. }

  32. #write h4, .outline-h4, .md-toc-item.md-toc-h4 {
  33.     counter-reset: h5
  34. }

  36. #write h5, .outline-h5, .md-toc-item.md-toc-h5 {
  37.     counter-reset: h6
  38. }

  40. /** put counter result into headings */
  41. #write h1:before,
  42. .outline-h1>.outline-item>.outline-label:before,
  43. .md-toc-item.md-toc-h1>.md-toc-inner:before {
  44.     counter-increment: h1;
  45.     content: counter(h1) " "
  46. }

  48. /* 使用h1标题时，去掉前两个h1标题的序号，包括正文标题、目录树和大纲 */
  49. /* nth-of-type中的数字表示获取第几个h1元素，请根据情况自行修改。 */

  51. #write h1:nth-of-type(0):before,
  52. .outline-h1:nth-of-type(0)>.outline-item>.outline-label:before,
  53. .md-toc-item.md-toc-h1:nth-of-type(0)>.md-toc-inner:before{
  54.         counter-reset: h1;
  55.         content: ""
  56. }

  58. #write h2:before,
  59. h2.md-focus.md-heading:before, /** override the default style for focused headings */
  60. .outline-h2>.outline-item>.outline-label:before,
  61. .md-toc-item.md-toc-h2>.md-toc-inner:before {
  62.         text-decoration: none;
  63.     counter-increment: h2;
  64.     content: counter(h1) "." counter(h2) " "
  65. }

  67. /* 使用h2标题时，去掉前两个h2标题的序号，包括正文标题、目录树和大纲 */
  68. /* nth-of-type中的数字表示获取第几个h2元素，请根据情况自行修改。 */



  72. #write h3:before,
  73. h3.md-focus.md-heading:before, /** override the default style for focused headings */
  74. .outline-h3>.outline-item>.outline-label:before,
  75. .md-toc-item.md-toc-h3>.md-toc-inner:before {
  76.         text-decoration: none;
  77.     counter-increment: h3;
  78.      content: counter(h1) "." counter(h2) "." counter(h3) " "
  79.     /*content: counter(h2) "." counter(h3) ". " */
  80. }

  82. #write h4:before,
  83. h4.md-focus.md-heading:before,
  84. .outline-h4>.outline-item>.outline-label:before,
  85. .md-toc-item.md-toc-h4>.md-toc-inner:before {
  86.         text-decoration: none;
  87.     counter-increment: h4;
  88.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
  89.     /*content: counter(h2) "." counter(h3) "." counter(h4) ". " */
  90. }

  92. #write h5:before,
  93. h5.md-focus.md-heading:before,
  94. .outline-h5>.outline-item>.outline-label:before,
  95. .md-toc-item.md-toc-h5>.md-toc-inner:before {
  96.         text-decoration: none;
  97.     counter-increment: h5;
  98.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
  99.     /*content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " */
  100. }

  102. #write h6:before,
  103. h6.md-focus.md-heading:before,
  104. .outline-h6>.outline-item>.outline-label:before,
  105. .md-toc-item.md-toc-h6>.md-toc-inner:before {
  106.         text-decoration: none;
  107.     counter-increment: h6;
  108.      content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
  109.     /*content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " */
  110. }

  112. /** override the default style for focused headings */
  113. #write>h3.md-focus:before,
  114. #write>h4.md-focus:before,
  115. #write>h5.md-focus:before,
  116. #write>h6.md-focus:before,
  117. h3.md-focus:before,
  118. h4.md-focus:before,
  119. h5.md-focus:before,
  120. h6.md-focus:before {
  121.     color: inherit;
  122.     border: inherit;
  123.     border-radius: inherit;
  124.     position: inherit;
  125.     left:initial;
  126.     float: none;
  127.     top:initial;
  128.     font-size: inherit;
  129.     padding-left: inherit;
  130.     padding-right: inherit;
  131.     vertical-align: inherit;
  132.     font-weight: inherit;
  133.     line-height: inherit;
  134. }

复制代码

typora 终极vlook 插件

https://github.com/MadMaxChow/VLOOK/releases


https://gitee.com/maxchow/VLOOK


End

https://blog.csdn.net/qq_21808961/article/details/81437750#t3


MarkdownPad2 导出带侧边栏目录的html，自动生成markdown文档侧边栏

————————————————

版权声明：本文为CSDN博主「码小匠---千少」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u012914436/article/details/99679320



html5侧边栏元素, css实现侧边栏, html网页侧边栏
无聊，除了天天弄网站，白之家您还会干什么嘛...

举报 使用道具

回复
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

钉钉部署专家
管理员

2604

主题

2847

帖子

14536

积分
Ta的主页发信息

钉钉部署和网站SEO电话
136-6130-5028

更多

精彩推荐

更多

热点动态

更多

随手拍

更多

客服中心

0312-4173206 周一至周日8:30-20:30 仅收市话费

意见反馈

caogenba@qq.com

小黑屋|精美源码推荐|版权声明| |客服QQ：903085212

Copyright © 2008-2015 百知巴巴 https://shequ.know88.com/ 版权所有 All Rights Reserved.

Powered by 百知巴巴 X3.4  技术支持: 百知信息 冀ICP备19004344号-1

声明:1、本站是的建站源码全部免费下载，仅需注册回复即可下载,用户可在允许的范围内发表观点,本站不对网友评论负责!2、钉钉文案图片部分来源钉钉官方，如有版权，联络管理员删除。
所有信息仅供参考,未经许可严禁拷贝转载,否则将追究相关法律责任!如涉及版权，请联络管理员删除！禁止发表与国家法律相抵触的言论!
网页设计和钉钉部署业务热线：0312-4173206和17600182511

快速回复 返回顶部 返回列表