首页 > 生活 > typecho主题增加目录树实现页内导航

作者：ghostry 发布时间：2020-01-02 浏览: 7914

内容来源

https://www.offodd.com/76.html

具体实现

具体实现分为三个部分,下面分别来进行代码添加.

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] . '><a name="cl-' . $catalog_count . '"></a>' . $obj[3] . '</h' . $obj[1] . '>';
    }, $obj);
    return $obj;
}

function getCatalog() {
    //输出文章目录容器
    global $catalog;
    $index = '';
    if ($catalog) {
        $index = '<ul>' . "\n";
        $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>' . "\n";
                } elseif ($catalog_depth > $prev_depth) {
                    $to_depth++;
                    $index .= '<ul>' . "\n";
                } 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>' . "\n" . '</ul>' . "\n";
                            $to_depth--;
                        }
                    }
                    $index .= '</li>';
                }
            }
            $index .= '<li><a href="#cl-' . $catalog_item['count'] . '">' . $catalog_item['text'] . '</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i = 0; $i <= $to_depth; $i++) {
            $index .= '</li>' . "\n" . '</ul>' . "\n";
        }
        $index = '<div title="目录树" class="gottree glyphicon glyphicon-list"></div>' .
            '<div id="toc-container">' . "\n" .
            $index .
            '</div>' . "\n";
    }
    echo $index;
}
function themeInit($archive) {
    if ($archive->is('single')) {
        $archive->content = createCatalog($archive->content);
    }
}

/* 文章目录结束 */

以上内容写入 functions.php
由于我的主题有回顶部漂浮,最好的情况当然是和他放到一起 footer.php

<?php getCatalog();?>

加入如上代码.

css部分

.topdown #topdown #toc-container{position:absolute;width:auto!important;left:25px;background:#e7e7e7;height:auto!important;padding:20px;border-radius:4px;}
#toc-container ul{list-style:none;}
#toc-container li{white-space:nowrap;line-height:170%;}
#toc-container>ul{margin-left:-35px;}
#toc-container>ul ul{margin-left:-25px;}

在style.css加入以上代码

js部分

$('.gottree').click(function() {
    if ($("#toc-container").css("display") == "none") {
        $("#toc-container").show();
    } else {
        $("#toc-container").hide();
    }
    return false; // 返回false可以避免在原链接后加上#
});

在style.js文件的 $(document).ready(function(e) { 内加入以上代码

实现效果

见页面回顶部漂浮右侧,在回顶部下面有一个按钮,可以点击切换目录树的显示状态.

标签: typecho