方法和样式参考https://www.wlplove.com/archives/84/
1、安装Menutree插件
wget https://github.com/typecho-fans/plugins/releases/download/plugins-M_to_R/MenuTree.zip
解压后放到typecho插件目录
2、修改主题模版
编辑Joe主题文件夹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>
编写样式
编辑Joe主题文件夹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;
}
}
4、应用样式
编辑Joe主题文件夹post.php文件,在<head>标签中添加以下代码
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/menutree.css'); ?>">
5、效果图
