Typecho Joe主题增加目录

Typecho Joe主题添加文章目录导航
方法和样式参考：https://www.cnblogs.com/weixia-blog/p/18067366

1. 安装Menutree插件

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

解压后放到typecho插件目录：usr/plugins

2. 配置插件

首先在管理后台启用插件，配置里面两个都勾上

显示模式
嵌入模式 独立模式

嵌入模式在文章里面直接输入

3. 修改主题模版

编辑Joe主题文件夹usr/themes/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>

4. 后台的主题配置界面

设置外观 --> 全局设置 --> 自定义CSS

/* 核心修正：只控制我们添加的“目录”模块，不影响其他小组件 */
/* 原来的规则：.joe_post + .joe_aside > section { display: none; } */
.joe_post + .joe_aside > .menu-tree {
    display: block !important; /* 确保目录模块在文章页显示 */
}

/* 确保“作者信息”模块显示 */
.joe_post + .joe_aside > .author {
    display: block;
}

/* 以下是纯粹的目录样式美化，按需调整 */
.menu-tree {
    background: var(--background);
    padding-bottom: 25px;
    position: sticky;
    margin-bottom: 15px;
}

.index-menu {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    overscroll-behavior: contain;
}

.index-menu-item {
    margin: 12px 0px; /* 修改这里：将上下边距从10px增加到12px或更大 */
}

.index-menu-list {
    margin: 8px 0px 8px 15px; /* 修改这里：将上下边距从5px增加到8px，左侧缩进可保留 */
}

.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;
}
/* 2. 调整“目录”标题与下方列表的间距：增加间距 */
.joe_aside__item-title {
    margin-bottom: 15px; /* 可以适当增加这个值 */
}

/* 在宽度小于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 !important;
    }
}