Typroa导出HTML带大纲

hkSDK

已于 2022-07-29 10:12:11 修改

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： typora带左侧大纲导出Html带大纲文章标签： html

于 2022-07-26 19:24:06 首次发布

本文链接：https://blog.youkuaiyun.com/hkSDK/article/details/126001532

typora带左侧大纲同时被 2 个专栏收录

1 篇文章

订阅专栏

导出Html带大纲

1 篇文章

订阅专栏

本文介绍了如何在HTML导出中保留大纲侧边栏，并通过添加JavaScript和CSS代码实现大纲的隐藏与显示功能。步骤包括勾选导出设置、编辑HTML以及使用Notepad++插入特定代码，最终实现一个可点击的收起/展开按钮来控制大纲的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、勾选大纲

文件 > 偏好设置 > 导出 > HTML 勾上【保留大纲侧边栏】
如图所示：
在这里插入图片描述

2、增加Html代码

编辑框内插入一段代码，如图所示：
在这里插入图片描述

将以下代码复制粘贴到编辑框内

<script>
    // 隐藏按钮
    var outlineBtn = document.querySelector(".outline-btn");
    var outlineContent = document.querySelector(".outline-content");
    var isHide = false;
    var outlineFunction = () => {
        if (isHide) {
            outlineContent.style.display = "none";
            outlineBtn.style.left = "0.5rem";
			outlineBtn.style.width = "5rem"
            outlineBtn.innerHTML = "展开大纲";
		
        } else {
            outlineContent.style.display = "block";
            let leftLength = outlineContent.offsetWidth/16 + 2.5;
            outlineBtn.style.left = `${leftLength}rem`;
			outlineBtn.style.width = "3rem"
            outlineBtn.innerHTML = "收起";

        }
		outlineBtn.style.display = "block";
    }
    outlineFunction();
    outlineBtn.onclick = function () {
        isHide = !isHide;
        outlineFunction();
    }
</script>
<style/>
.typora-export-show-outline .typora-export-content { max-width: 2440px; margin: auto; display: flex; flex-direction: row; }
.outline-btn{
        width: 4.5rem;
        height: 1.5rem;
        background-color: #ccc;
        position: fixed;
        left: 0.5rem;
        top: 0.8rem;
        text-align: center;
        color: #595959;
        cursor: pointer;
        line-height: 1.5rem;
        border-radius: 0.3rem;
        user-select:none;
    }
</style>

3、导出Html

文件->导出->HTML

4、编辑HTML

使用Notepad++编辑HTML，插入一段代码，插入位置如图所示：
在这里插入图片描述

复制以下代码

<div class="outline-btn" style="display:none">

如图所示：
在这里插入图片描述