Joe主题添加文章侧边栏目录

知识分子没文化
2022-01-25 / 16 评论 / 546 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年01月26日,已超过246天没有更新,如存在内容错误、图片加载失败、链接失效等问题,请留言反馈,博主将在第一时间进行修改。

目录:

环境说明:

Typecho:正式版 V1.1-17.10.30-release

Joe:V7.3.6

一、安装插件

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、启用插件

  1. 将下载好的插件放在 usr/plugins/ 目录中,确保文件夹名为 MenuTree

  2. 激活插件,设置内可勾选“嵌入模式”与“独立模式”:

    “嵌入模式”勾选时,编辑文章用按钮插入或手写 < !-- 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 文件,如果修改失败可以随时还原回来。

总共需要修改两个地方:

  1. 导入 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 主题,样式可能需要重新设计。

5

评论 (16)

取消
  1. 头像
    xcshare
    Windows 7 · Google Chrome

    同主题,受教了,感谢,只是要调整一下div,让目录树尽量不要占用文章的内容,挤压文章,外挂到文章侧边就完美了,个人审美

    回复
  2. 头像
    浮生若梦
    Windows 10 · Google Chrome

    谢谢,教程很详细,效果很好!

    回复
  3. 头像
    zhenwei
    MacOS · Google Chrome

    还想问下您,您文章的目录是固定在页面相对位置,请问是怎么做到的呢?我设置之后,页面往下划就看不到目录了。

    回复
    1. 头像
      知识分子没文化 作者
      Windows 10 · Google Chrome
      @ zhenwei

      给容器设置 position:sticky 的样式就好了,具体用法可以参考:https://www.runoob.com/css/css-positioning.html。
      如果你是全部按照这篇博客中的代码来设置目录的,目录悬浮效果出不来的话,试着检查一下JS文件是不是没有引入进去

      回复
      1. 头像
        lkk
        Windows 10 · Google Chrome
        @ 知识分子没文化

        搞了半天搞不定,请教具体如何操作

        回复
  4. 头像
    zhenwei
    MacOS · Google Chrome

    感谢感谢,就是那个目录高度,为什么要改成最高直到500呢,直接取实际高度感觉会更好啊表情

    回复
    1. 头像
      知识分子没文化 作者
      Windows 10 · Google Chrome
      @ zhenwei

      表情这个就看个人习惯了,我是觉得目录过长的时候将目录多余部分折叠起来比较好,如果你不想要这个效果,可以去掉JS中的if判断条件,只执行调整目录高度的那个函数就行了表情

      回复
  5. 头像
    bearjun
    Windows 10 · Google Chrome

    本来打算升级到新版本的joe的,但是一直没看到侧边目录栏。一直关注,今天终于找到了。终于可以升级了。感谢感谢。。。

    回复
  6. 头像
    MrSnake
    MacOS · Google Chrome

    hello up 我编辑文章时,点击插入目录树没有反应!

    回复
    1. 头像
      知识分子没文化 作者
      Windows 10 · Google Chrome
      @ MrSnake

      好吧插件的链接没显示出来,单独补一下:https://github.com/mrgeneralgoo/typecho-markdown,1.31版本以上的会报错(至少我这里是这样的),慎用表情

      回复
      1. 头像
        MrSnake
        MacOS · Google Chrome
        @ 知识分子没文化

        好嘞表情

        回复
    2. 头像
      知识分子没文化 作者
      Windows 10 · Google Chrome
      @ MrSnake

      这个文章编辑器界面的插入目录树按钮的功能貌似是用不了的,如果想在文章中显示目录,可以手动添加目录 标签,或者使用这个插件替换Typecho自带的Markdown解析器,从而解析Markdown中的[TOC]目录标签,因为[TOC]目录标签的通用性更强,大部分Markdown应该都是能解析的,所以建议使用后面一种方式

      回复
      1. 头像
        MrSnake
        MacOS · Google Chrome
        @ 知识分子没文化

        手动添加的话,是要自己定义标签的id么

        回复
        1. 头像
          知识分子没文化 作者
          Windows 10 · Google Chrome
          @ MrSnake

          参考目录插件的Readme说明,在文章中添加<#!-- index-menu -->(去掉#)短代码就行

          回复
          1. 头像
            MrSnake
            MacOS · Google Chrome
            @ 知识分子没文化

            感谢表情

            回复
      2. 头像
        MrSnake
        MacOS · Google Chrome
        @ 知识分子没文化

        3q!3q!

        回复