Typecho插件实现添加文章目录的方法详解（苹果149充电器）一篇读懂

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录添加文章标题锚点显示文章目录添加文章目录样式定位到文章定位到目录

我的长博文不少，比较影响阅读体验，有必要添加一个文章目录功能。相比 WordPress， Typecho 的插件就比较少了。我想找一个像掘金那样为文章添加目录的插件，没一个合适的。此类教程也不是很多，而且差不多都是前台 JavaScript 来实现的，感觉这样不如后台实现来的好。

注意：我使用的是Joe主题7.3，其他主题文件路径可能不一样。

1.声明 createAnchor 函数

在中添加如下代码：

// 添加文章标题锚点
function createAnchor($obj) {
global $catalog;
global $catalog_count;
$catalog=array();
$catalog_count=0;
$obj=preg_replace_callback(‘/<h([1-4])(.*?)>(.*?)</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.'”>’.$obj[3].'</h’.$obj[1].’>’;
}, $obj);
return $obj;
}

也可以在标题元素内添加标签，然后该标签新增属性。

函数主要是通过正则表达式替换文章标题H1~H4来添加锚点，接下来我们需要调用它。

2.调用函数

同样在中的方法最后一行之前添加如下代码：

if ($self->is(‘single’)) {
$self->content=createAnchor($self->content);
}

现在可以查看一下文章详情页面的源代码。文章的元素应该添加了诸如、之类的属性值。具体啥名不是关键，好记就行。

1.声明 getCatalog 函数

在中添加如下代码：

// 显示文章目录
function getCatalog() {
global $catalog;
$str=”;
if ($catalog) {
$str='<ul class=”list”>’.”\n”;
$prev_depth=”;
$to_depth=0;
foreach($catalog as $catalog_item) {
$catalog_depth=$catalog_item[‘depth’];
if ($prev_depth) {
if ($catalog_depth==$prev_depth) {
$str .='</li>’.”\n”;
} elseif ($catalog_depth > $prev_depth) {
$to_depth++;
$str .='<ul class=”sub-list”>’.”\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++) {
$str .='</li>’.”\n”.'</ul>’.”\n”;
$to_depth–;
}
}
$str .='</li>’;
}
}
$str .='<li class=”item”><a class=”link” href=”https://www.jb51.net/article/275778.htm#cl-‘.$catalog_item[‘count’].'” rel=”external nofollow” title=”‘.$catalog_item[‘text’].'”>’.$catalog_item[‘text’].'</a>’;
$prev_depth=$catalog_item[‘depth’];
}
for ($i=0; $i<=$to_depth; $i++) {
$str .='</li>’.”\n”.'</ul>’.”\n”;
}
$str='<section class=”toc”>’.”\n”.'<div class=”title”>文章目录</div>’.”\n”.$str.'</section>’.”\n”;
}
echo $str;
}

方法通过递归数组生成文章目录，接下来我们需要调用它。

2.函数

最好将放在右侧边栏中。为此在中添加如下代码：

<?php if ($this->is(‘post’)) getCatalog(); ?>

注意：只有文章才使用目录，独立页面那些不需要，所以加了判断。Typecho 有一些神奇的语法可以方便二次开发，可以访问它的官网文档了解更多。

现在点击右侧的文章目录，可以滚动到相应的文章小标题位置了。

可以看到，当前的文章目录还比较丑陋，我们来美化一下。在中添加如下 SCSS 代码：

.joe_aside {
.toc {
position: sticky;
top: 20px;
width: 250px;
background: var(–background);
border-radius: var(–radius-wrap);
box-shadow: var(–box-shadow);
overflow: hidden;

.title {
display: block;
border-bottom: 1px solid var(–classA);
font-size: 16px;
font-weight: 500;
height: 45px;
line-height: 45px;
text-align: center;
color: var(–theme);
}

.list {
padding-top: 10px;
padding-bottom: 10px;
max-height: calc(100vh – 80px);
overflow: auto;

.link {
display: block;
padding: 8px 16px;
border-left: 4px solid transparent;
color: var(–main);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

&:hover {
background-color: var(–classC);
}

&.active {
border-left-color: var(–theme);
}
}
}
}
}

为了方便操作，将设置成实现了吸顶定位。考虑到文章目录可能很多，为列表添加了，如代码第行。

由于（主题标头）也使用了吸顶定位，导致和文章目录有遮挡，所有加了来取消页面主题标头的吸顶功能，如下代码：

.has_toc {
.joe_header {
position: relative;
}
}

要显示文章目录当前选中项的状态，需要用到 JavaScript 给选中项添加一个样式。在中添加如下代码：

var headings=$(‘.joe_detail__article’).find(‘h1, h2, h3, h4’);
var links=$(‘.toc .link’);
var tocList=document.querySelector(‘.tocr > .list’);
var itemHeight=$(‘.toc .item’).height();
var distance=tocList.scrollHeight – tocList.clientHeight;
var timer=0;
// 是否自动滚动
var autoScrolling=true;

function setItemActive(id) {
links.removeClass(‘active’);
var link=links.filter(“[href=’https://www.jb51.net/article/275778.htm#” + id + “‘]”)
link.addClass(‘active’);
}