注意事项

本教程需要改的东西众多 请各位备份好主题文件 以免失败无法恢复！
本次教程以Joe7.7.1版本 为基础 7.3.6按道理也能用

具体演示可以看我博客！

教程开始

这里我以Joe主题为例 各个主题的不相同 请自行判断

在/Joe/post.php内添加以下代码 大概41行

<?php if ($this->options->jfloor === 'on') : ?>
    <?php GetCatalog(); ?>
<?php endif; ?>

Joe主题的function.php文件在/Joe/core/function.php
在 大概290行添加以下代码

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'] . '-h'.$catalog_item['depth'].'</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i = 0; $i <= $to_depth; $i++) {
            $index .= '</li></ul>';
        }
        $index = '<div class="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;
}

然后在/Joe/core/core.php文件
大概83行 添加以下代码

  if ($self->is('single')) {
    $self->content = CreateCatalog($self->content);
  }

再然后在/Joe/function.php文件
大概920行 添加外观后台设置开关

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

解压所需的文件

将以下压缩包解压到/Joe/assets目录内
解压完 然后打开post.php
引用解压的文件 jfloor.min.css以及jfloor.min.js

在头部引用css
    <link href="<?php _getAssets('assets/css/jfloor.min.css'); ?>" rel="stylesheet">
在底部引用js
<?php if ($this->options->jfloor === 'on') : ?>
<!-- 目录树 -->
    <script src="<?php _getAssets('assets/js/jfloor.min.js'); ?>"></script>
<?php endif; ?>