使用markdown语法写文档，生成左侧导航目录_v1.0.0.1

最新推荐文章于 2024-05-17 10:05:05 发布

学生宫布

最新推荐文章于 2024-05-17 10:05:05 发布

阅读量3.6k

点赞数 2

分类专栏：技术栈-文档技术栈-语言-大前端文章标签： markdown markdown导航目录 html目录自增目录

本文链接：https://blog.csdn.net/cc007cc009/article/details/116125496

版权

技术栈-语言-大前端同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

技术栈-文档

5 篇文章 0 订阅

订阅专栏

v1.0.0.1

文章目录

前言
本文介绍的方法

前言

本文实现的效果👇 可以继续开发样式

在这里插入图片描述

目录类型

i5ting_ztree_toc插件

缺点

可以转换成功，但是无法解析复杂md语法，如绘图、LaTex等。

[toc]语法

缺点

在md文档增加[toc]语法，可以生成目录，但是没显示在左侧，如图👇
在这里插入图片描述

vuepress博客框架

可以解析出左侧导航，但是对复杂语法支持略显不足。

本文介绍的方法

自动

将手动方式写成程序或脚本，执行脚本就自动追加目录到html文档。

手动

第一步，生成目录内容

将[toc]增加到md文档合适位置，生成目录

第二步，导出HTML

将md文档导出为html文件

第三步，修改html

使用好的IDE，如JetBrains相关IDE修改html

1) 增加js、css

在header标签增加：

<!--  左侧悬浮 - start-->
  <script type="text/javascript">
    // 禁止拷贝，同时body标签增加 <body οncοpy="return false"
    document.oncopy = function(e){
      return false
    };
    // 禁止选择
    document.onselectstart = function(e){
      return false
    };
    // 禁止右键
    document.oncontextmenu = function(e){
      return false
    };
    function scrollx(p) {
      var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;
      if (o) {
        cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
        if (p.r != undefined && p.l == undefined) {
          o.style.cssText += cssPub + ('right:'+p.r+'px;');
        } else {
          o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
        }
        if(p.f&&ie6){
          cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
          cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
          if (p.r != undefined && p.l == undefined) {
            o.style.cssText += cssRight + cssTop;
          } else {
            o.style.cssText += cssTop;
          }
          dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
        }else{
          if(!p.f){
            w.onresize = w.onscroll = function(){
              clearInterval(timer);
              timer = setInterval(function(){
          //双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
                var st = (dd.scrollTop||db.scrollTop),c;
                c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
                if(c!=0){
                  o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
                }else{
                  clearInterval(timer);
                }
              },10)
            }
          }
        }
      }
    }
  </script>
<!--  左侧悬浮 - end-->
<!--  css - start-->
  <style>
    ul li a{
      text-decoration:none;
    }
    ul li a {
      color: #666;
    }
  </style>
<!--  css - end-->

2) 增加左侧悬浮和样式

在之前增加左侧悬浮js

<!--悬浮 - start-->
  <script type="text/javascript">
    //左右侧固定浮动的div建议放在html的最低部
    //右侧固定
    // scrollx({id:'float_right', r:0, t:200, f:1});
    //左侧固定
    scrollx({id:'toc_header', f:1});
    //相对父级相定固定
    // scrollx({id:'float_father', l:300, t:200, f:1});
    //页面滚动同时滚动固定对像
    // scrollx({id:'float_father_scroll_fixed', l:500, t:300, f:0});
  </script>
<!--悬浮 - end-->

scrollx参数说明

术语项	释义
r	右边距（窗口右边距，不写为靠左浮动）
l	左边距（距离父级对象的左边距） “r”和“l”只能有其中一个参数
t	上边距（默认贴着底边，0是贴着顶边）
f	1表示固定（不写或者0表示滚动）

在目录DIV标签内增加<div id="toc_header"以绑定事件，并在上述DIV增加下述样式：

font-size:14px; 
width:300px;
height:930px;
border:1px solid #0c93e4;
float:left;
position: fixed;
top: 0;
bottom: 10px;
left: 30px;
overflow-y:scroll; 
overflow-x:hidden;

3) 保存，查看效果：

在这里插入图片描述

学生宫布

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用markdown语法写文档，生成左侧导航目录_v1.0.0.1

v1.0.0文章目录前言本文实现的效果????目录类型i5ting_ztree_toc插件缺点[toc]语法缺点vuepress博客框架本文介绍的方法第一步，生成目录内容第二步，导出HTML第三步，修改html1) 增加js、css2) 增加左侧悬浮和样式3) 保存，查看效果：前言本文实现的效果????目录类型i5ting_ztree_toc插件缺点可以转换成功，但是无法解析复杂md语法，如绘图、LaTex等。[toc]语法缺点在md文档增加[toc]语法，可以生成目录，但是没显示在左
复制链接

扫一扫