typora生成html添加侧边目录

最新推荐文章于 2024-07-22 18:56:29 发布

原创

最新推荐文章于 2024-07-22 18:56:29 发布 · 3.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #typora

本文介绍了一种方法，通过在HTML文件中插入JavaScript和CSS代码，实现在文档中自动生成标题序号和侧边栏目录。代码包括设置标题序号、创建页内链接以及响应式布局的实现，适用于Markdown或其他HTML文档转换后的格式美化，方便阅读和导航。

先导出HTML文件：
在这里插入图片描述
然后找到导出的HTML文件，用记事本或notepad++或别的文本编辑器打开，把如下代码粘贴到</body>下面，保存即可

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--侧栏目录生成代码-->
<script>
    //标题序号计数器
    var hCount = [0, 0, 0, 0, 0, 0];
    //设置计数器
    function setHCount(number) {
   
   
        //当前计数器加一
        hCount[number - 1]++;
        for (var i = number, length = hCount.length; i < length; i++) {
   
   
            //子目录计数器全部置零
            hCount[i] = 0;
        }
    }
    //重命名目录名称
    function setHTagValue(item, number) {
   
   
        //获取标题名
        var text = $(item).get(0).innerHTML;
        //初始化空字符串
        var before = "";
        //生成序号
        for (var i = 0, length = hCount.length; i < number; i++) {
   
   
            if (i < number - 1)
                before += hCount[i] + ".";
            else
                before += hCount[i] + " ";
        }
        //在标题前面加上序号
        $(item).get(0).innerHTML = before + text;
    }
    function renameHTag(item) {
   
   
        var tag = $(item).get(0).localName;
        if (tag === "h1") {
   
   
            setHCount(1);
           //console\.log("捕获到标签:%s", tag);
            setHTagValue(item, 1);
        }
        if (tag === "h2") {
   
   
            setHCount(2);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 2)