typora导出html添加目录

typora导出html添加目录

使用方法

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

找到文档最后面,如图:

用文字编辑类工具打开sideBar.txt,复制其中所有内容【内容在下面】

在如上图的位置插入所复制的内容

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

点击按钮出现标题的大纲视图

sideBar.txt

bash 复制代码
<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>
相关推荐
Mr_Xuhhh18 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端