php根据文章H标签为内容生成文章目录结构

需求

客户要求程序根据文章内容中的H标签，生成文章目录结构。 前期通过JS实现，发现在某些浏览器客户端效果差强人意，另外也不利于优化， 决定通过PHP代码镶嵌到源码中。

本次演示基于帝国CMS实现， 道理是想通的，方法可以借鉴。

效果展示

实现逻辑

通过对文本内容的判断， 提取H2-H6标签， 罗列出来。将原内容，以目录+内容的结构生成（如果有H标签， 返回H标签+正文）。

实现代码

php部分：

function tables_of_content($content) {

$matches = array();

$ul_li = '';

 

$r = '/<h([2-6]).*?>(.*?)</h[2-6]>/is';

 

if(preg_match_all($r, $content, $matches)) {

foreach($matches[1] as $key => $value) {

$title = trim(strip_tags($matches[2][$key]));

$content = str_replace($matches[0][$key], '<h' . $value . ' class="top_h_title"  id="title-' . $key . '">'.$title.'</h' . $value . '>', $content);

$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li> ";

}

 

$content = " <div id="article-index">

<strong>文章目录</strong>

<ol id="index-ul"> " . $ul_li . "</ol>

</div> " . $content;

}

 

return $content;

}

.top_h_title{ position: relative; padding-top: 50px; margin-top: -50px; }

这行代码比较重要，切勿删除。这段代码决定了锚点跳转之后， H标签距离顶部的位置。可以根据自己的实际情况做参数修改，除了top_h_title不建议改动以外， 其它css样式可根据实际情况调整。

客户案例展示

本文主要围绕实现过程分析，界面位置和样式可根据需求调整 。 

更新日期:2023-04-26 17:28