搜索到
1
篇与
的结果
-
Typecho Joe主题增加目录 Typecho Joe主题添加文章目录导航方法和样式参考：https://www.cnblogs.com/weixia-blog/p/180673661. 安装Menutree插件wget https://github.com/typecho-fans/plugins/releases/download/plugins-M_to_R/MenuTree.zip解压后放到typecho插件目录：usr/plugins2. 配置插件首先在管理后台启用插件，配置里面两个都勾上显示模式 嵌入模式 独立模式嵌入模式在文章里面直接输入1. 安装Menutree插件2. 配置插件3. 修改主题模版4. 后台的主题配置界面即可显示目录独立模式需要在模板文件写入<?php $this->treeMenu(); ?>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; } }
