首页
关于
Search
1
AdGuardHome 安装及部署教程
38,214 阅读
2
搭建基于telegram的无限网盘
9,645 阅读
3
最新Cloudflare免费自选IP教程(非Partner)
8,930 阅读
4
关于微软Azure学生白嫖指南
8,826 阅读
5
Oracle开放全部端口并关闭防火墙
8,647 阅读
默认分类
技术搬砖
教学设计
故事奇谈
生活琐事
错题分析
精品软件
登录
Search
标签搜索
docker
张至顺
图床
Cloudflare
金刚长寿功
PT
qBittorrent
阿里云
onedrive
telegram
PHP
青龙
python
内网穿透
一键
telegraph
ipv6
cf_workers
签到框架
目录列表
myedunote
累计撰写
94
篇文章
累计收到
1
条评论
首页
栏目
默认分类
技术搬砖
教学设计
故事奇谈
生活琐事
错题分析
精品软件
页面
关于
搜索到
1
篇与
Joe
的结果
2023-11-20
Joe主题添加文章侧边栏目录
环境说明:Typecho:正式版 V1.1-17.10.30-releaseJoe:V7.7.1一、安装插件Github 仓库链接:plugins/MenuTree at master · typecho-fans/plugins · GitHub下载链接:https://github.com/typecho-fans/plugins/releases/download/plugins-M_to_R/MenuTree.zip二、插件使用2.1、启用插件将下载好的插件放在 usr/plugins/ 目录中,确保文件夹名为 MenuTree;激活插件,设置内可勾选“嵌入模式”与“独立模式”:“嵌入模式”勾选时,编辑文章用按钮插入或手写 < !-- index-menu -->(插入按钮功能貌似是无效的,还有注意,别照抄这个标签,我在标签的 ! 前面加了一个空格,不然它就会被解析成目录了) 标签发布即可显示目录树;“独立模式”勾选时,修改模板文件如 post.php 中写入 <?php $this->treeMenu(); ?> 也可显示。需要注意的是,在文章中渲染出来的目录默认是没有任何样式的,所以需要我们自定义样式。为了使目录显示为侧边栏,并且样式与 Joe 本来的侧边栏风格保持一致,这里使用“独立模式”,并用相应的 CSS 与 JS 文件来定义其样式。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.3、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"; } // 如果目录的高度小于500px,调用函数将目录修改为实际高度,反之则将侧边栏的高度固定为500px if(menuHeight < 500){ changeMenuHeight(); } else { aside.style.height = "500px"; }2.4、修改 post.php 文件建议修改之前先备份 post.php 文件,如果修改失败可以随时还原回来。总共需要修改两个地方:导入 CSS 文件在文件前面的导入 CSS 文件:<!-- 导入目录的css文件 --> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/menutree.css'); ?>"> 2.添加目录代码 然后在 <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>保存,刷新文章页面即可看到左边的侧边栏目录。以上的样式代码经过一定时间的使用,可以完美契合 Joe 主题,并且加入了部分响应式布局的代码,在移动设备上目录会自动隐藏,不会影响内容阅读。当然,如果是非 Joe 主题,样式可能需要重新设计。
2023年11月20日
40 阅读
0 评论
0 点赞