Typecho之Joe主题开启文章目录功能 Typecho之Joe主题开启文章目录功能本文参考其他博客，整理配置了Typecho博客的Joe主题文章目录功能，希望能够帮到你一、环境介绍假设网站根目录为：/data/www主题目录为：usr/theme/Gmork二、资源下载途径可以参考https://github.com/typecho-fans/plugins/releases/download/plugins-M_to_R/MenuTree.zip也可以使用本站快捷下载三、下载并解压插件到指定目录cd /data/www/usr/plugins wget https://download.gmork.cc/typecho/joe/MenuTree.zip unzip MenuTree.zip四、修改主题模版cd /data/www编辑usr/themes/Gmork/public/aside.php文件，预留目录空间，添加如下代码<section class="joe_aside__item menu-tree" style="display:none;"> <div class="joe_aside__item-title menu_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> </div> <?php $this->treeMenu(); ?> </section>代码添加完如下图：五、编写CSS样式文件编写 assets/css/menutree.css，样式文件/*，侧边栏目录导航只在文章页面生效*/ .joe_post + .joe_aside > section { display: none; } .joe_post + .joe_aside > .author { display: block; } .joe_post + .joe_aside > .menu-tree { display: block !important; } .menu-tree { background: var(--background); padding: 15px 0px; top: 50px; position: sticky; } .index-menu { max-height: 500px; overflow-y:auto; overflow-x:hidden; margin-top: 10px; } /** 父元素<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; } /* 锚点跳转定位 */ .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) { .menu-tree{ display:none; } }六、在typecho中引用样式文件编辑Joe主题文件夹post.php文件,在标签中添加以下代码<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/menutree.css'); ?>">七、最后在Typecho管理后台启用目录插件切记选择独立模式八、测试效果图