[原创分享]Typecho主题增加文章目录树功能
侧边栏壁纸
  • 累计撰写 69 篇文章
  • 累计收到 2,866 条评论
  • 今日撰写 0 篇文章
    今日已经过去 16 小时
    69%
    这周已经过去 1
    14%
    本月已经过去 22
    70%
    今年已经过去 8 个月
    66%
[原创分享]Typecho主题增加文章目录树功能
2023年03月13日210阅读1评论3点赞
苏晓晴
发布时间:2023年03月13日 / 1 / 210 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年03月30日,已超过340天没有更新,若内容或图片失效,请留言反馈。

注意事项

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

具体演示可以看我博客!

教程开始

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

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

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

QQ图片20230313160355.png

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; ?>

3
打赏

海报

正在生成.....

♥评论♥(1)

使用cookie技术保留您的个人信息以便您下次快速评论,继续评论表示您已同意该条款
取消
  1. 头像
    沉默剑士
    浙江省杭州市移动
    Windows 11 Windows 11 / Microsoft Edge 111 Microsoft Edge 111
    沙发

    使用插件并引入css、js生成目录可能会简单一些:https://blog.szfx.top/typecho/joe-theme-article-menu.html

    Windows 11 Windows 11 / Microsoft Edge 111 Microsoft Edge 111
    回复