Typora 生成的HTML左侧增加导航

最新推荐文章于 2024-02-11 15:04:08 发布
最新推荐文章于 2024-02-11 15:04:08 发布
阅读量5.5k 收藏 9
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen_t/article/details/104901486
版权

使用notepad或notepad++等编辑器打开html，

<body class='typora-export os-windows' >

将以下代码内容全选，复制，粘贴在这里，如截图

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        //是否显示导航栏
        var showNavBar = true;
        //是否展开导航栏
        var expandNavBar = true;
        var currentIndex = 0;
        var currentScrollHigh = 0;
        var currentContentScrollHigh = 0;
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }
        $(window).onbeforeunload = function(){
            currentIndex = 0;
        }
        $(window).load(function(){
            var h1s = $("body").find("h1");
            var h2s = $("body").find("h2");
            var h3s = $("body").find("h3");
            var h4s = $("body").find("h4");
            var h5s = $("body").find("h5");
            var h6s = $("body").find("h6");

            var headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length];
            var vH1Tag = null;  // 显示的最高层级
            var vH2Tag = null;   // 显示的最低层级
            var sum = 0;
            for(var i = 0; i < headCounts.length; i++){
                if(headCounts[i] > 0){
                    for( var y = 0; y < headCounts[i]; y++)
                        sum = sum + 1;
                }
            }
            for(var i = 0; i < headCounts.length; i++){
                if(headCounts[i] > 0){
                    if(vH1Tag == null){
                        vH1Tag = 'h' + (i + 1);
                    }else{
                        vH2Tag = 'h' + (i + 1);
                    }
                }
            }
            if(vH1Tag == null){
                return;
            }

            $("body").prepend('<div class="BlogAnchor">' +
//                '<span style="color:red;position:absolute;top:-6px;left:0px;cursor:pointer;" onclick="$(\'.BlogAnchor\').hide();">×</span>' +
                '<p>' +
//                '<b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录▲</b>' +
                '</p>' +
                '<div class="AnchorContent" id="AnchorContent"> </div>' +
                '</div>' );

            var vH1Index = 0;
            var vH2Index = 0;
            var vIndexH1 = 0;
            var vIndexH2 = 0;
            var vIndexH3 = 0;
            var vIndexH4 = 0;
            var vIndexH5 = 0;
            var vIndexH6 = 0;
            var headerALL = [];
            var headerIDALL = [];
            var headerHightALL = [];
            $("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
                var id = '';
                var name = '';
                var tag = $(item).get(0).tagName.toLowerCase();
                var className = '';
                // i=0 tag=h1          i=1 tag=h2     i=2 tag=h2

                if(tag == "h1"){
                    id = name = ++vIndexH1;
                    vIndexH2 = 0;
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    className = 'item_h1';

//alert("tag ="+ tag +"----   i = "+ i + " name ="+ name +"    className= "+ className);
//tag =h1----   i = 0 name =1    className= item_h1
                }else if(tag == "h2"){

                    id = vIndexH1 + '_' + ++vIndexH2;
                    name = vIndexH1 + '.' + vIndexH2;
                    className = 'item_h2';
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }else if(tag == "h3"){
                    id = vIndexH1 + '_' + vIndexH2+ '_' + ++vIndexH3;
                    name = vIndexH1 + '.' + vIndexH2+ '.' + +vIndexH3;
                    className = 'item_h3';
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }
                else if(tag == "h4"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_'+ ++vIndexH4 ;
                    name =  vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.'+  vIndexH4 ;
                    className = 'item_h4';
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }
                else if(tag == "h5"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_'+ ++vIndexH5;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.'+ vIndexH5;
                    className = 'item_h5';
                    vIndexH6 = 0;
                }
                else if(tag == "h6"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_' +vIndexH5+'_'+ ++vIndexH6;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.' +vIndexH5+'.'+ vIndexH6;
                    className = 'item_h6';
                }
                if(name.length > 2){
                    var mFirstName = name.substring(0,2);
                    while(mFirstName == "0."){
                        name = name.substring(2,name.length);
                        mFirstName = name.substring(0,2);
                    }
                }
                $(item).attr("id","wow"+id+"_index_"+i);
                $(item).addClass("wow_head");
                var itemHeight = $(item).offset().top
                $("#AnchorContent").css('max-height', ($(document).height()) + 'px');
                $("#AnchorContent").css('height', ($(window).height()) + 'px');
                $("#AnchorContent").css('overflow','auto');
                $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link"  href="#wow'+id+'_index_'+i+'" link="#wow'+id+'" index="'+i+'">'+$(this).text()+" "+'</a></li>');
                var str = "#wow"+id+"_index_"+i;
                headerALL.push($(item));
                headerIDALL.push(str);
                console.log("  i = "+ i +"   id =" + id +"  itemHeight = "+ itemHeight);
            });

            // 1
            // 1.1
            // 1.1.1
            // 1.1.1.1
            // 1.1.1.1.1
            // 1.1.1.1.1.1
            $("#AnchorContentToggle").click(function(){
                var text = $(this).html();
                if(text=="目录▲"){
                    $(this).html("目录▼");
                    $(this).attr({"title":"展开"});
                    $(".BlogAnchor").html("<a>目录</a>");
                }else{
                    $(this).html("目录▲");
                    $(this).attr({"title":"收起"});
                    $(".BlogAnchor").show();
                }
                $("#AnchorContent").toggle();
            });


            $(".anchor-link").click(function(){
                //$("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 10);
                var index  = $(this).attr("index");
                $(".BlogAnchor li .nav_item.current").removeClass('current');
                $(headerNavs[index]).addClass('current');
                var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
                currentScrollHigh = scrollTop;
                currentContentScrollHigh = headerHightALL[index];
                var value = headerTops[index];
                currentIndex = value;
                console.log("index = "+ index+ "  headerTops["+index+"] ="+ value + "scrollTop="+ scrollTop);
            });
            var headerNavs = $(".BlogAnchor li .nav_item");
            var headerTops = [];
            var mHeight = 0;
            $(".wow_head").each(function(i, n){
                var value = $(n).offset().top;
                headerTops.push($(n).offset().top);
                console.log("i = "+ i+ "  offset().top ="+ value);
            });
            headerTops.push($(document).height());
            window.onresize = function(){
                headerTops = [];
                $.each(headerNavs, function(i, n){
                        $(n).trigger("click");
                        document.querySelector(headerIDALL[i]).scrollIntoView(true);
//var high = $(n).offset().top;
                        var scrollTop = $(window).scrollTop();
                        headerTops.push(scrollTop);
                        console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
                    }
                );
                headerTops.push($(document).height());
//$("#AnchorContent").height($(window).height());
                $("#AnchorContent").css('height', ($(window).height()) + 'px');
                var xcontentWidth =  $("#AnchorContent").width();
                var xWidth = $(window).width();
                var xlength = xWidth - xcontentWidth;
                $("body").css("marginLeft",xcontentWidth+'px');
                $("body").css("max-width",xlength);
                $(headerNavs[currentIndex]).trigger("click");
                document.querySelector(headerIDALL[i]).scrollIntoView(true);
            }

            $(window).scroll(function(){
                var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
                $.each(headerTops, function(i, n){
                        if( (scrollTop >= (headerTops[i])  && scrollTop < (headerTops[i+1] -1))  ){
                            console.log("headerTops[i-1]"+headerTops[i-1]+"headerTops[i]"+headerTops[i]+"  scrollTop ="+ scrollTop+"  headerTops[i+1]= "+headerTops[i+1] +"  i ="+i);
                            $(".BlogAnchor li .nav_item.current").removeClass('current');
                            $(headerNavs[i]).addClass('current');
                            currentScrollHigh = scrollTop;
                            currentContentScrollHigh = headerHightALL[i];
                            currentIndex = i;
                            var mxxHeight = $("#AnchorContent").height()
                            var mscrollTop1 = $("#AnchorContent").scrollTop();  // 当前标签的高度
                            console.log("zukgit2 currentIndex="+ currentIndex );
                            console.log("zukgit2 windows.scrollTop="+ scrollTop );
                            console.log("zukgit2 $(window).height()="+ $(window).height() );
                            console.log("zukgit2 currentContentScrollHigh="+ currentContentScrollHigh );
                            console.log("zukgit2 AnchorContent.mscrollTop="+ mscrollTop1 );
                            console.log("zukgit2 AnchorContent.high="+ mxxHeight );
                            if((currentContentScrollHigh - mscrollTop1)>  ($(window).height()/2)){ //↓ // 如果当前index超出  界面的高度
                                //var sum =   Math.floor(headerHightALL(i) / $(window).height());
                                var dif = currentContentScrollHigh - mscrollTop1;
                                $("#AnchorContent").animate({scrollTop: (currentContentScrollHigh)}, 50);
                                console.log("  i(zukgit3) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
                                console.log(" $(window).height()="+ $(window).height() );

                            } else if( ( mscrollTop1 - currentContentScrollHigh )>  0 ){  //↑
                                $("#AnchorContent").animate({scrollTop: currentContentScrollHigh-($("#AnchorContent").height()/3)}, 50);
                                console.log("  i(zukgit4) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
                                console.log(" $(window).height()="+ $(window).height() +"   $(#AnchorContent).height()="+mxxHeight);
                            }
                            return false;
                        }
                    }
                );
                if(scrollTop == 0){
                    $("#AnchorContent").animate({scrollTop: 0}, 50);
                }
                if(scrollTop == $(document).height()){
                    $("#AnchorContent").animate({scrollTop: headerHightALL[headerHightALL.length-1]}, 50);
                }
            });
            $.each(headerNavs, function(i, n){
                    var high = $(n).offset().top;
                    headerHightALL.push(high);
                    console.log("high"+high);
                }
            );
            headerTops = [];
            $.each(headerNavs, function(i, n){
                    $(n).trigger("click");
                    document.querySelector(headerIDALL[i]).scrollIntoView(true);
                    var scrollTop = $(window).scrollTop();
                    headerTops.push(scrollTop);
                    console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
                }
            );
            headerTops.push($(document).height());
            $(headerNavs[0]).trigger("click");
            document.querySelector(headerIDALL[0]).scrollIntoView(true);
            var xcontentWidth =  $("#AnchorContent").width();
            var xWidth = $(window).width();
            var xlength = xWidth - xcontentWidth;
            $("body").css("marginLeft",xcontentWidth+'px');
            $("body").css("max-width",xlength);
            if(!showNavBar){
                $('.BlogAnchor').hide();
            }
            if(!expandNavBar){
                $(this).html("目录▼");
                $(this).attr({"title":"展开"});
                $("#AnchorContent").hide();
            }
        });
    </script>
    <style>
        /*导航*/
        .BlogAnchor {
			//background: #f1f1f1;
			//padding: 10px;
            line-height: 180%;
            position: fixed;
            left: 0px;   // right: 48px;
            top: 0px;
            border: 1px solid #aaaaaa;
            width: 25%;
            height:90%;
        }
        .BlogAnchor p {
            font-size: 18px;
            color: #15a230;
            margin: 0 0 0.3rem 0;
            text-align: right;
        }
        .BlogAnchor .AnchorContent {
        //padding: 5px 0px;
            overflow: auto;

        }
        .BlogAnchor li{
            text-indent: 0.5rem;
            font-size: 14px;
            list-style: none;
        }
        .BlogAnchor li .nav_item{
            padding: 3px;
        }
        .BlogAnchor li .item_h1{
            margin-left: 0rem;
        }
        .BlogAnchor li .item_h2{
            margin-left: 2rem;
            font-size: 0.8rem;
        }

        .BlogAnchor li .item_h3{
            margin-left: 4rem;
            font-size: 0.8rem;
        }

        .BlogAnchor li .item_h4{
            margin-left: 5rem;
            font-size: 0.8rem;
        }

        .BlogAnchor li .item_h5{
            margin-left: 6rem;
            font-size: 0.8rem;
        }


        .BlogAnchor li .item_h6{
            margin-left: 7rem;
            font-size: 0.8rem;
        }

        .BlogAnchor li .nav_item.current{
            color: #ff1e45;
            background-color: white;
        }
        #AnchorContentToggle {
            font-size: 13px;
            font-weight: normal;
            color: #FFF;
            display: inline-block;
            line-height: 20px;
            background: #9bc2c1;
            font-style: normal;
            padding: 1px 8px;
        }
        .BlogAnchor a:hover {
            color: #5cc26f;
        }
        .BlogAnchor a {
            text-decoration: none;
        }
    </style>

 

 

温 潭
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Typora--Windows版64位
12-02
看清！！！！64位！！！！！截止上传日期 2017-12-02 最新版 Windows 平台 Typora -> markdown软件安装包。版本：0.9.38 -beta。
typora for Windows + pandoc-2.10.1
08-27
Typora是一个功能强大的Markdown编辑器，使用GFM风格(即大名鼎鼎的github flavored markdown)，Typora目前支持Mac OS和Windows，Linux版本尚未发布。Typora可以插入数学表达式，插入表情，表格，支持标准的Markdown语法，可以使用标注
解决Typora导出HTML不显示图片
最新发布
Keven_6的博客
02-11 888
Typora导出HTML不显示图片，可能时图片存放在我们的硬盘中。我们可以将markdown中的图片转化为base64格式，嵌入到html中。
typora用Pandoc导出html,Typora安装 Pandoc实现导出功能
weixin_32660831的博客
06-27 255
Typora安装 Pandoc实现导出功能问题引入在使用Typora的时候，如果想要把写好的MarkDown文件导出到其他地方的话，是比较方便的。但是Typora本身只支持PDF和HTML两种方式的导出，如下图所示，如果想导出下面的方式他就会提示安装Pandoc插件，name看下如何安装这个插件。安装插件Typora的安装就不多少了，直接官方下载安装包，一直下一步安装就好，Typora官网下载Pa...
html typora 图片_typora导出html的命令行调用的是啥？
weixin_36329899的博客
12-29 897
一般用typora的时候，菜单栏可以直接导出 Pdf html word等文件, 后台应该是直接用的pandoc，但是我直接用pandoc，效果就没有typora倒出来的好，应该是typora加了很多参数从哪里可以知道typora是怎么调用pandoc的命令呢？MarkDown在typora上的学习兼容HTML，可以在paragraph菜单中选择YAML Front Matters得到一个HTML...
Typora操作技巧说明（二）
pcx171的博客
04-27 1205
介绍Typora的使用技巧 1.介绍自定义主题
typora导出html添加侧边栏
403 Forbidden
02-12 1351
因为typora导出的html文件没有侧边栏，网上搜的又不好用，所以只能自己写一个QWQ 使用方法 首先要从typora导出html文件，之后用记事本或者VSCode或者其他编辑器打开此html文件 找到文档最后面，如图： 之后用记事本或者其他文字编辑类工具打开sideBar.txt，复制其中所有内容 在如上图的位置插入所复制的内容 打开修改过的html文件后左上角会出现一个按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KUgcyLjo-1613133608035)
typora生成html后 添加左侧导航记录
qq_40757113的博客
05-20 4689
注： jquery-3.3.1.min.js，2h.js，style.css 在head标签中引入就可以了，jquery-3.3.1.min.js可在网上下载 1、创建base.user.css主题文件，将文件放到该目录下 base.user.css（有的只需要这个css生成的html文件左侧导航中就有序号，那么2h.js中添加序号的方法就可以注释掉） /* 正文标题区: #write */ /* [TOC]目录树区: .md-toc-content */ /* 侧边栏的目录大纲区...
Typora简单使用
wxy
11-10 717
文章目录Typora 简单使用（MAC的command键类似于windows的ctrl键）下载大纲显示在这里插入图片描述字体加粗斜体下划线删除线高亮标题列表有序列表无序列表任务列表表格代码图片/链接超链接图片其他（typora）引用分割线转义字符输入模式目录主题下载和主题更换下载（GitHub下载慢）其他下载方式（推荐）更换重启选择导入导出导入导出 Typora 简单使用（MAC的command键类似于windows的ctrl键） 下载 下载地址： 下滑点击Download 选择要下载的版本M
Typora - 自定义样式
qq_45338754的博客
07-20 1747
整体效果图： 如何你觉得这个颜色不好，那么颜色自取：https://www.cnblogs.com/5H5H/p/9784015.html （1）左侧边栏 :root { /* 左侧查找栏颜色 / –bg-color:#A9A9A9; / 左侧导航栏颜色 */ –side-bar-bg-color:#A9A9A9; –control-text-color: #777777; } （2）主页面背景颜色 /* 文本背景颜色 */ content { background-color:#C0C0C0;
Typora软件使用小技巧和MarkDown语法学习
weixin_44087492的博客
08-01 576
Typora软件使用小技巧和MarkDown语法学习 一、Typora软件使用小技巧 1.快捷键技巧 Typora的很多**快捷键**就在上面的导航栏，我也是从这里学习到了很多，下面我将介绍一些常用的快捷键： 下划线 ⌘U 斜体 ⌘I 加粗 ⌘B 代码 ⌃`（这里有个小坑，代码内部不好写入反引号`` ` ，具体解决办法可以看这里） 超链接 ⌘K 代码块 ⌥⌘C a = 1; b = 2; c = a + b; 公式块 ⌥⌘B a+b=c a + b = c a+
markdown toc 生成--自动生成markdown文档侧边栏目录
03-06
本资源提供了一个简单方法，用于生成华丽的markdown文档侧边栏目录。本资源包含一个模板文档，没有任何程序代码，简单易用。本模板是对开源项目 i5ting-i5ting_ztree_toc-0.3.0-11 的精简，主要是针对Windows下无法安装项目作者给出的软件（仅适用于Linux）的问题进行一定的优化。经过精简之后，使用方法非常简单，仅仅是一次复制&一次粘贴。
Typora导出HTML图片处理工具
03-28
为了方便分享传输，Typora导出HTML格式文件之后，本地图片路径不方便转换，通过此工具可以快速将图片进行转码，只留下一个HTML格式文件，随意储存和网络传输。
7使用typora生成pdf和html文件..pcf.mp4
04-03
1.前端开发视频教程； 2.前端开发全套教程的其中一个； 3.想学习前端的可以下载观看； 1.前端开发视频教程； 2.前端开发全套教程的其中一个； 3.想学习前端的可以下载观看；
Typora导出HTML，图片内嵌Python脚本
02-03
Typora导出设置： 1. 导出->HTML:导出后，运行自定义脚本，勾选； 2. 命令框填入：python R:\Tools\01-Source\01-Scripts\Typora_html.py --dir "${currentFolder}" --file "${currentFileFullName}" --out "${...
给markdown生成的html添加左侧边栏目录(TOC)
08-13
给markdownPad2生成的html页面添加左侧边栏目录(TOC)。
VLOOK:Typora导出HTML增强插件。 降价促销
05-12
VLOOK:trade_mark: 通过持续挖掘和扩展 Markdown 和 CSS，并结合文档的互联网化应用场景，在 文档排版、内容导航、演示辅助、交互体验 等方面提供了 一致、简洁、友好 的体验。 有关 VLOOK:trade_mark: 特性的详细...
typora打开报错解决方案
liuyu_719的博客
05-20 4411
今天一大早打开Typora准备接着记笔记，结果发现打开有报错，由于Typora现在收费了，所以可能是我这个版本还是过高，或者是没有关闭自动更新导致的，解决办法就是更新到老的版本。在日常书写过程中，往往会出现一堆报错的情况，这是因为Typora默认开始了拼写检查，只需要关闭就不会有任何提示了。由于Typora是支持HTML语法的，所以我们可以利用HTML的链接标签（a标签）来实现跳转。现在就已经完成页内跳转了，但是在Typora中，需要按着。值为其他标签的ID时，点击即可跳转到对应的标签位置。...
HTML基础学习笔记（二）
qq_51808540的博客
01-12 143
HTML基础学习笔记（二）
typora html
08-01
Typora是一款支持Markdown语法的编辑器，可以将Markdown文档导出为HTML格式。然而，在导出HTML时，默认情况下不会包含文档中的图片，这对于个人网站的上传不太方便。为了解决这个问题，可以将Markdown中的图片转化为base64格式，然后嵌入到HTML中，这样就省去了使用图床的需要，对于图片较少的网页来说非常方便。[1] HTML文档包含了文本和标签，它具有一定的结构。一个简单的HTML文档结构如下所示： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个网页</title> </head> <body> 欢迎来到蜗牛学苑 </body> </html> ``` 在Typora中，可以通过导出功能将Markdown文档转换为HTML文档。可以在Typora的偏好设置中配置导出选项，包括设置导出后的运行自定义命令。可以下载TyporaToBase64.jar并将其放置在Typora的安装目录下，然后在偏好设置中填入命令`java -jar D:\Software\Typora\TyporaToBase64.jar "${outputPath}"`，并勾选显示命令行输出。这样配置后，导出HTML时就会将Markdown中的图片转化为base64格式并嵌入到HTML中。[2][3]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值