Typecho教程 - 如何免插件为主题集成文章目录功能

通过这个目录也能让访客大概的知道这篇文章的主要内容,大大提升了访客的体验。那么这一次的Typecho教程就教大家如何实现这个有趣的功能吧

一些Typecho主题集成了文章目录功能,能在文章旁边列出一级级的目录,方便访客阅读比较长的文章,而且,通过这个目录也能让访客大概的知道这篇文章的主要内容,大大提升了访客的体验。那么这一次的Typecho教程就教大家如何实现这个有趣的功能吧。

Typecho教程 - 如何免插件为主题集成文章目录功能-Npcink
背景图片
  • 代码来源: https://www.offodd.com/76.html

代码内容

不过毕竟是WP下的东西,要移植到Typecho还是要改一改的,下面直接放出修改后的代码吧,使用方法继续往下看。

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 id="toc-container">'."\n".'<div id="toc">'."\n".'<strong>文章目录</strong>'."\n".$index.'</div>'."\n".'</div>'."\n";
    }
    echo $index;
}

使用方法

1. 把上面的代码放到主题文件functions.php最后一行之前

2. 继续在functions.php内搜索关键词function themeInit

如果有themeInit这个函数,则在themeInit这个函数内添加下面的代码

if ($archive->is('single')) {
    $archive->content = createCatalog($archive->content);
}

如果没有themeInit这个函数,则在functions.php最后一行之前添加下面的代码

function themeInit($archive) {
    if ($archive->is('single')) {
        $archive->content = createCatalog($archive->content);
    }
}

3. 最后在需要输出文章目录的位置调用<?php getCatalog(); ?>即可

这是通用的方法,具体到每个人使用时,可以根据自己的需求修改,不再赘述。

除了给主题增加功能,希望这一篇Typecho教程也能帮助到您:

Typecho教程 - 如何免插件为主题集成文章目录功能-Npcink
Typecho教程 - 如何免插件为主题集成文章目录功能-Npcink

Typecho教程 - 如何开启伪静态并隐藏index.php?

在我们的Typecho博客后台设置永久链接后,会在域名后自动的加上index.php,这样不好看,这次就教大家如何设置一个干净的永久链接
Typecho

UpyunFile 新版又拍云 - Typecho插件

2019-5-11 9:54:15

Typecho

Initial - 主题使用文档

2019-5-11 13:19:28

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索