前言

去年写过一篇 Joe主题开启文章目录结构，最近感觉有点难看，而且默认是隐藏的，每次都得用鼠标点一下。网上找了其他的目录树方案教程，都很老了。设置了都没有效果。参考着别人的网站，折腾了一下午终于弄好了，特此记录下来。

修改

post.php

加载js和css

<!--加在头部-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/jfloor.min.css'); ?>">

<!-- body标签 最下面 -->
<?php if ($this->options->jfloor === 'on') : ?>
  <!-- 目录树 -->
      <script src="<?php  $this->options->themeUrl('assets/js/jfloor.min.js'); ?>"></script>
<?php endif; ?>

加载功能代码,大概41行

      <div class="joe_container j-post">
          <section class="j-adaption" style="height: auto !important;">
          <?php if ($this->options->jfloor === 'on') : ?>
              <?php GetCatalog(); ?>
          <?php endif; ?>
          ...
      </div>

functions.php

    //开启文章目录树显示
    $jfloor = new Typecho_Widget_Helper_Form_Element_Select(
        'jfloor',
        array(
            'off' => '关闭（默认）',
            'on' => '开启',
        ),
        'off',
        '是否启用文章目录树显示',
        '介绍：开启之后 在文章最左侧显示目录树(手机端不显示)'
    );
    $jfloor->setAttribute('class', 'joe_content joe_post');
    $form->addInput($jfloor->multiMode());

core/function.php

/*生成文章目录树*/
function CreateCatalog($obj)
{
    global $catalog;
    global $catalog_count;
    $catalog = array();
    $catalog_count = 0;
    $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function ($obj) {
        global $catalog;
        global $catalog_count;
        $catalog_count++;
        $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count);
        return '<h' . $obj[1] . $obj[2] . ' id="cl-' . $catalog_count . '"><span>' . $obj[3] . '</span></h' . $obj[1] . '>';
    }, $obj);
    return $obj;
}

/*获取文章目录树*/
function GetCatalog()
{
    global $catalog;
    $index = '';
    if ($catalog) {
        $index = '<ul>';
        $prev_depth = '';
        $to_depth = 0;
        foreach ($catalog as $catalog_item) {
            $catalog_depth = $catalog_item['depth'];
            if ($prev_depth) {
                if ($catalog_depth == $prev_depth) {
                    $index .= '</li>';
                } elseif ($catalog_depth > $prev_depth) {
                    $to_depth++;
                    $index .= '<ul>';
                } else {
                    $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth;
                    if ($to_depth2) {
                        for ($i = 0; $i < $to_depth2; $i++) {
                            $index .= '</li></ul>';
                            $to_depth--;
                        }
                    }
                    $index .= '</li>';
                }
            }
            $index .= '<li><a href="#cl-' . $catalog_item['count'] . '" data-href="#cl-' . $catalog_item['count'] . '">' . $catalog_item['text'] . '</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i = 0; $i <= $to_depth; $i++) {
            $index .= '</li></ul>';
        }
        $index = '<div class="j-floor s-j-floor"><div class="contain" id="jFloor" style="top: 126px;"><div class="title">文章目录</div>' . $index . '<svg class="toc-marker" xmlns="http://www.w3.org/2000/svg"><path stroke="var(--theme)" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" /></svg></div></div>';
    }
    echo $index;
}

core/core.php

      /* 文章目录树 */
      if ($self->is('single')) {
        $self->content = CreateCatalog($self->content);
      }

需要的资源

文件

下载

独立页面

修改page.php,和post.php一样。参考着改就可以。

隐藏二级标签

二级标签有点多，默认不显示。当鼠标放到一级标签时，二级标签自动下拉。

jfloor.min.css

新增代码

.j-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.j-menu > li {
  margin-right: 10px;
  position: relative;
}

.j-submenu {
  display: none;
}

.j-submenu > li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.j-menu > li:hover .j-submenu {
  display: block;
}

functions.php

更新GetCatalog函数

/*获取文章目录树*/
function GetCatalog()
{
    global $catalog;
    $index = '';
    if ($catalog) {
        $index = '<ul class="j-menu">';
        $prev_depth = '';
        $to_depth = 0;
        foreach ($catalog as $catalog_item) {
            $catalog_depth = $catalog_item['depth'];
            if ($prev_depth) {
                if ($catalog_depth == $prev_depth) {
                    $index .= '</li>';
                } elseif ($catalog_depth > $prev_depth) {
                    $to_depth++;
                    $index .= '<ul class="j-submenu">';
                } else {
                    $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth;
                    if ($to_depth2) {
                        for ($i = 0; $i < $to_depth2; $i++) {
                            $index .= '</li></ul>';
                            $to_depth--;
                        }
                    }
                    $index .= '</li>';
                }
            }
            $index .= '<li><a href="#cl-' . $catalog_item['count'] . '" data-href="#cl-' . $catalog_item['count'] . '">' . $catalog_item['text'] . '</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i = 0; $i <= $to_depth; $i++) {
            $index .= '</li></ul>';
        }
        $index = '<div class="j-floor s-j-floor"><div class="contain" id="jFloor" style="top: 126px;"><div class="title">文章目录</div>' . $index . '<svg class="toc-marker" xmlns="http://www.w3.org/2000/svg"><path stroke="var(--theme)" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" /></svg></div></div>';
    }
    echo $index;
}