前言

之前测试过几种无插件为Typecho的热门主题Joe主题添加文章目录方法，最后发现都因为这样那样的问题，有点不太满意，于是又在网站找到的这个使用MenuTree插件为主题添加文章目录的方法，经测试，暂时的效果还不错，做个备份。

方法非创，有疑惑可跳转原文章讨论：https://www.wlplove.com/archives/84

具体步骤

一、为Typecho下载并安装插件

MenuTree插件下载地址：

https://github.com/typecho-fans/plugins/releases/download/plugins-M_to_R/MenuTree.zip

Github 仓库链接中有插件的详细资料，如下图

使用MenuTree插件为Typecho的Joe主题添加文章目录

点击展开，查看MenuTree安装及使用

根据文章内容中的子标题结构生成锚点目录树，点击链接即可快速跳转至相应位置。

支持在文内或模板中控制输出位置，新版添加了编辑器快捷插入按钮。

使用方法：

  1. 下载本插件，放在 usr/plugins/ 目录中，确保文件夹名为 MenuTree；
  2. 激活插件，设置内可开关“嵌入模式”即文章标签输出，“独立模式”即模板函数输出；
  3. “嵌入模式”勾选时，编辑文章用按钮插入或手写<!-- index-menu -->标签发布即可显示目录树；
  4. “独立模式”勾选时，修改模板文件如post.php中写入<?php $this->treeMenu(); ?>也可显示。

注意事项：

  • 插件仅输出html不带css，请根据以下class命名自行处理样式：
    .index-menu    容器 div
    .index-menu-list    列表 ul
    .index-menu-item    列表项 li
    .index-menu-link    列表项链接 a
    .menu-target-fix {display:block; position:relative; top:-60px; //偏移量}    锚点跳转定位

二、启用插件并添加样式

MenuTree的使用注意事项有提到，插件公输出html，不带css样式，因此后面你要做为 Joe 主题定制专用的css和js 来适应原本的风格。

目标是把文章目录悬浮到文章页的左右，形成3栏的样式。

2.1 启用插件

到后台启用插件，把独立模式勾选上并保存。

使用MenuTree插件为Typecho的Joe主题添加文章目录

2.2 CSS文件

将以下 CSS 代码保存至文件中，文件名为 menutree.css，文件放到主题目录的 assets/css 文件夹下。

.menutree {
    position:sticky;
    top:60px;
    width:15%;
    margin:15px 15px 15px 0px;
    /* 溢出内容添加滚动条 */
    overflow-y:auto;
    overflow-x:auto;
    background: var(--background);
}

/** 父元素<ul>与其中的子元素<li> **/
.index-menu-item {
    margin: 10px 0px;
}

.index-menu-list {
    margin: 5px 0px 5px 10px;
}

/** 所有<a>标签 **/
.index-menu-link{
    color: var(--main);
    transition:all 0.2s ease-in-out 0s;
    padding:5px 0px;
}

.index-menu-link:hover {
    color: var(--theme);
    text-shadow: var(--text-shadow);
    font-weight:500;
    background-color:#efefef;
}

/* 锚点跳转定位 */
.menu-target-fix {
    display: block;
    position: relative;
    /* 偏移量 */
    top:-100px;
}

/* 在宽度小于1000px的设备上隐藏短划线，以使目录的标题正常显示 */
@media screen and (max-width:1000px) {
    .joe_aside__item-title > .line {
        display:none;
    }
}

/* 在宽度小于800px的设备上隐藏目录侧边栏 */
@media screen and (max-width:800px) {
    .menutree{
        display:none;
    }
}

2.2 JS文件

将以下 JS 代码保存至文件中，文件名为 menutree.js，文件放到主题目录的 assets/js 文件夹下。

/* 获取渲染好的目录的高度 */
menuHeight = document.getElementsByClassName("index-menu")[0].offsetHeight;

/* 获取容器高度 */
containHeight = document.getElementsByClassName("joe_aside__item-contain")[0].offsetHeight;
/* 获取容器 title 的高度 */
titleHeight = document.getElementsByClassName("joe_aside__item-title")[0].offsetHeight;
/* 获取整个目录侧边栏对象 */
aside = document.getElementsByClassName("menutree")[0];

// 定义一个函数来修改目录的显示长度，从而使侧边栏能自适应目录的高度，避免出现大片空白部分
function changeMenuHeight(){    
    /* 调整容器高度 */
    aside.style.height = titleHeight + containHeight + "px";
}

// 如果目录的高度小于800px，调用函数将目录修改为实际高度，反之则将侧边栏的高度固定为800px
if(menuHeight < 800){
    changeMenuHeight();
} else {
    aside.style.height = "800px";
}
原作者给的目录高度是500，经测试，500px太短。

如果文章字数比较多，h1-h6嵌套自然也多，过早出现折叠，感觉怪怪的，这里博主自己调整成800px，多少无所谓，纯看个人喜好。

2.3 修改 post.php 文件

建议修改之前先备份 post.php 文件，如果修改失败可以随时还原回来。

当然，你想改page.php也是可以的，不改page.php就只在文章页中显示目录结构，在page页面不显示。

总共需要修改两个地方：

2.3.1 导入 CSS 文件

在文件前面的导入 CSS 文件：

<!-- 导入目录的css文件 -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/menutree.css'); ?>">

使用MenuTree插件为Typecho的Joe主题添加文章目录

一般把引入代码插进<head></head>标签之间即可。

2.3.2 添加目录代码

同样是post.php文件，后在 <div class="joe_container"> 与 div class="joe_main joe_post"> 之间添加如下代码：

<!-- 文章目录代码 -->
<section class="joe_aside__item menutree">
    <div class="joe_aside__item-title">
        <svg t="1642997936013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2169" width="128" height="128"><path d="M838.3 895.9H197.9c-53.9 0-97.7-43.8-97.7-97.7V236.7c0-53.9 43.8-97.7 97.7-97.7h640.3c53.9 0 97.7 43.8 97.7 97.7v561.4c0.1 53.9-43.7 97.8-97.6 97.8zM197.9 203.8c-18.1 0-32.9 14.8-32.9 32.9v561.4c0 18.1 14.8 32.9 32.9 32.9h640.3c18.1 0 32.9-14.8 32.9-32.9V236.7c0-18.1-14.8-32.9-32.9-32.9H197.9z" fill="#666666" p-id="2170"></path><path d="M695.1 455.2H341.2c-17.9 0-32.4-14.5-32.4-32.4s14.5-32.4 32.4-32.4h353.9c17.9 0 32.4 14.5 32.4 32.4s-14.5 32.4-32.4 32.4zM695.1 578.2H341.2c-17.9 0-32.4-14.5-32.4-32.4s14.5-32.4 32.4-32.4h353.9c17.9 0 32.4 14.5 32.4 32.4s-14.5 32.4-32.4 32.4zM695.1 701.2H341.2c-17.9 0-32.4-14.5-32.4-32.4s14.5-32.4 32.4-32.4h353.9c17.9 0 32.4 14.5 32.4 32.4s-14.5 32.4-32.4 32.4zM379.1 281.1c-17.9 0-32.4-14.5-32.4-32.4V115.4c0-17.9 14.5-32.4 32.4-32.4s32.4 14.5 32.4 32.4v133.2c0 17.9-14.5 32.5-32.4 32.5zM657.1 281.1c-17.9 0-32.4-14.5-32.4-32.4V115.4c0-17.9 14.5-32.4 32.4-32.4s32.4 14.5 32.4 32.4v133.2c0 17.9-14.5 32.5-32.4 32.5z" fill="#666666" p-id="2171"></path></svg>
        <span class="text">目录</span>
        <span class="line"></span>
    </div>
    <div class="joe_aside__item-contain">
        <?php $this->treeMenu(); ?>
    </div>
</section>
<!-- 导入的js文件，必须在这里导入，否则不生效 -->
<script src="<?php $this->options->themeUrl('assets/js/menutree.js'); ?>"></script>

使用MenuTree插件为Typecho的Joe主题添加文章目录

保存，刷新文章页面即可看到左边的侧边栏目录。

以上的样式代码经过一定时间的使用，可以完美契合 Joe 主题。

并且加入了部分响应式布局的代码，在移动设备上目录会自动隐藏，不会影响内容阅读。

效果图

使用MenuTree插件为Typecho的Joe主题添加文章目录

可以看到，这种方法，使用MenuTree插件为Joe主题添加的文章目录，最终效果是在左边添加一个会漂浮的目录树。

样式经作者定制，与joe原生主题契合，也能满足之前说的超链接后缀带#链接的需求，以后网站就先用这个方法的生成侧边栏目录了。