背景

joe主题没有目录功能，想要

目标

• 能自动创建文章目录，支持显示H1-H3共3级标题
• 标题和目录联动

效果

https://cloud.szfx.top/font/10.html

话不多说，上代码！

修改php文件

• 需要修改的文件： /usr/themes/Joe/public/aside.php
• 在 aside.php 的合适位置增加如下代码，用于在侧边栏创建目录容器

# 仅在文章和页面生效
<?php if (($this->is('post') || $this->is('page'))) : ?>
    <section class="joe_aside__item catalogue">
        <div class="joe_aside__item-title">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2084" width="18" height="18"><path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="2085"></path></svg>
            <span class="text">目录</span>
            <span class="line"></span>
        </div>
        <div class="joe_aside__item-contain">
            <ul class="catalogue-items">
            </ul>
        </div>
    </section>
<?php endif; ?>

增加js代码

• 下面的js可以直接在Joe主题的设置中添加
• 位置：控制台->外观->设置外观->全局设置->自定义js

function get_catalogs(article_content) {
    const titleTag = ["H1", "H2", "H3"];
    let titles = [];
    article_content.childNodes.forEach((e, index) => {
        const id = "header-" + index;
        if(titleTag.includes(e.nodeName)){
            titles.push({
                id: id,
                text: e.textContent,
                level: Number(e.nodeName.substring(1, 2))
            });
            e.setAttribute("id", id);
        }
    });
    return titles;
}
// 找到目录容器
article_content = document.querySelector('.joe_detail__article');
if (article_content) {
    var catalog = get_catalogs(article_content);
    if (catalog.length == 0) {
        // 无目录，隐藏
        $('.catalogue').hide();
    } else {
        let catalogue = '';
        for (let i = 0; i < catalog.length; i++) {
            let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>';
            if (i == catalog.length - 1) {
                catalogue += node + '</li>'
            } else {
                if (catalog[i + 1].level == catalog[i].level) {
                    catalogue += node + '</li>';
                } else if (catalog[i + 1].level > catalog[i].level) {
                    catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>';
                } else {
                    if (catalog[i + 1].level - catalog[i].level == -2) {
                        catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>';
                    } else {
                        catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>';
                    }

                }
            }
        }
        document.querySelector('.catalogue-items').innerHTML = catalogue;
        $('.catalogue-item > a').on('mouseenter', function () {
            $(this).parent().addClass('_active');
        });
        $('.catalogue-item > a').on('mouseleave', function () {
            $(this).parent().removeClass('_active');
        });
        // 根据目录定位到标题
        $('.catalogue-item > a').on('click', function () {
            document.removeEventListener("scroll", autoActive);
            $('.catalogue-item').removeClass('active');
            $(this).parent().addClass('active');
            let aim = document.querySelector('#' + $(this).attr('to'));
            let aim_top = aim.offsetTop;
            let aim_h = aim.clientHeight;
            let above_h = document.querySelector('.joe_header__above').clientHeight;
            let below_h = document.querySelector('.joe_header__below').clientHeight;
            let offset = 0;
            let case1 = !document.querySelector('.joe_header__above').className.includes('active');
            let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
            if (case1 && case2) {
                offset = above_h;
            }
            window.scrollTo({
                top: aim_top - offset - below_h - 10,
                behavior: 'smooth'
            });
            setTimeout(() => {
                document.addEventListener("scroll", autoActive);
            }, 500);
        });
        if (catalog.length)
            $('.catalogue-item').eq(0).addClass('active');
        // 目录侧标题自动定位
        let autoActive = function () {
            let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
            for (let i = 0; i < catalog.length; i++) {
                let offset = 0;
                let h_id = '#' + catalog[i].id;
                let h_offset = document.querySelector(h_id).offsetTop;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;

                if (!document.querySelector('.joe_header').className.includes('active'))
                    offset = above_h;
                if (h_offset + below_h + offset + 10 >= html_top) {
                    $('.catalogue-item').removeClass('active');
                    if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                        //还没到下一个标题
                        i--;
                    }
                    $('#to-' + catalog[i].id).parent().addClass('active');
                    break;
                }
            }
        };
        document.addEventListener("scroll", autoActive);
    }
} else {
    // 不是文章，隐藏目录
    $('.catalogue').hide();
}

css样式表

• 样式表同js，也可以在Joe主题的设置中添加
• 位置： 控制台->外观->设置外观->全局设置->自定义css
• 以下样式表是我自己博客使用的，仅供参考

function get_catalogs(article_content) {
    const titleTag = ["H1", "H2", "H3"];
    let titles = [];
    article_content.childNodes.forEach((e, index) => {
        const id = "header-" + index;
        if(titleTag.includes(e.nodeName)){
            titles.push({
                id: id,
                text: e.textContent,
                level: Number(e.nodeName.substring(1, 2))
            });
            e.setAttribute("id", id);
        }
    });
    return titles;
}
// 找到目录容器
article_content = document.querySelector('.joe_detail__article');
if (article_content) {
    var catalog = get_catalogs(article_content);
    if (catalog.length == 0) {
        // 无目录，隐藏
        $('.catalogue').hide();
    } else {
        let catalogue = '';
        for (let i = 0; i < catalog.length; i++) {
            let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>';
            if (i == catalog.length - 1) {
                catalogue += node + '</li>'
            } else {
                if (catalog[i + 1].level == catalog[i].level) {
                    catalogue += node + '</li>';
                } else if (catalog[i + 1].level > catalog[i].level) {
                    catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>';
                } else {
                    if (catalog[i + 1].level - catalog[i].level == -2) {
                        catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>';
                    } else {
                        catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>';
                    }

                }
            }
        }
        document.querySelector('.catalogue-items').innerHTML = catalogue;
        $('.catalogue-item > a').on('mouseenter', function () {
            $(this).parent().addClass('_active');
        });
        $('.catalogue-item > a').on('mouseleave', function () {
            $(this).parent().removeClass('_active');
        });
        // 根据目录定位到标题
        $('.catalogue-item > a').on('click', function () {
            document.removeEventListener("scroll", autoActive);
            $('.catalogue-item').removeClass('active');
            $(this).parent().addClass('active');
            let aim = document.querySelector('#' + $(this).attr('to'));
            let aim_top = aim.offsetTop;
            let aim_h = aim.clientHeight;
            let above_h = document.querySelector('.joe_header__above').clientHeight;
            let below_h = document.querySelector('.joe_header__below').clientHeight;
            let offset = 0;
            let case1 = !document.querySelector('.joe_header__above').className.includes('active');
            let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
            if (case1 && case2) {
                offset = above_h;
            }
            window.scrollTo({
                top: aim_top - offset - below_h - 10,
                behavior: 'smooth'
            });
            setTimeout(() => {
                document.addEventListener("scroll", autoActive);
            }, 500);
        });
        if (catalog.length)
            $('.catalogue-item').eq(0).addClass('active');
        // 目录侧标题自动定位
        let autoActive = function () {
            let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
            for (let i = 0; i < catalog.length; i++) {
                let offset = 0;
                let h_id = '#' + catalog[i].id;
                let h_offset = document.querySelector(h_id).offsetTop;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;

                if (!document.querySelector('.joe_header').className.includes('active'))
                    offset = above_h;
                if (h_offset + below_h + offset + 10 >= html_top) {
                    $('.catalogue-item').removeClass('active');
                    if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                        //还没到下一个标题
                        i--;
                    }
                    $('#to-' + catalog[i].id).parent().addClass('active');
                    break;
                }
            }
        };
        document.addEventListener("scroll", autoActive);
    }
} else {
    // 不是文章，隐藏目录
    $('.catalogue').hide();
}

提醒

• 假如后期升级Joe主题，记得重新修改 aside.php

本文转载自：[Typecho小试牛刀]Joe主题增加文章目录（非插件方式）