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

需求

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

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

效果展示

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

实现逻辑

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

实现代码

php部分:

snipaste20230721123220.jpg
因为我客户是帝国程序,你可以根据实际情况调整。例如message、post、body 等类似变量
 
前端调用
 
将原有的:[!--newstext--]  替换为 <?=tables_of_content($navinfor[newstext])?>
 
css代码美化
<style>
 
#article-index{-moz-border-radius:6px 6px 6px 6px;border:1px solid #DEDFE1;float:right;margin:0 0 15px 15px;padding:0 6px;width:100%;line-height:23px;}
 
#article-index strong{border-bottom:1px dashed #DDDDDD;display:block;line-height:30px;padding:0 4px;}
 
#index-ul{margin:0;padding-top:10px;padding-bottom:10px;padding-inline-start:5px;}
 
#index-ul li { background: none repeat scroll 0 0 transparent; list-style-type: disclosure-closed; padding: 0; margin-left: 10px; font-size: 15px; margin-bottom: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; list-style-position: inside; }
 
.top_h_title{ position: relative; padding-top: 50px; margin-top: -50px; }
 
</style>

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

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

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

客户案例展示

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

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



本页面信息来源互联网,如您认为该页面内容侵犯您的权益,请拨打电话处理。 备案号:陕ICP备2022008266号-1陕公网安备61030302000361