首页 > 生活 > typecho主题增加目录树实现页内导航
作者:ghostry 发布时间:2020-01-02 浏览: 7710
转载注明出处: https://blog.ghostry.cn/mood/979.html内容来源
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) {
内加入以上代码
实现效果
见页面回顶部漂浮右侧,在回顶部下面有一个按钮,可以点击切换目录树的显示状态.
上一篇: Linux下一种使用加密目录的方式下一篇: distrotest.net 试用
新手学 前端+后端要多久啊
博主你好,想问下你这个回顶部漂浮是插件集成的吗
不是,漂浮是我主题里的,你想要可以抄走。右键检查就可以抄css。