功能描述
1.提取树结构
从文章内容中提取h1-h6标记以生成树结构列表
2.替换原有H1-H6标签
正则替换原有h1-h6标签增加一些前端使用到的class和属性等
3.前端增加特效
目录结构跟屏效果使用scrollspy.js实现特效
已实现无需引入scrollspy.js的方式, 具体效果可以看本文的目录树哦????
PHP的代码
正则提取H标签
下面代码在提取结构的时候
首先对H标签进行了判断是否包含h1or h2标签
因为目录树结构通常是要以h1or h2开始的
因此为了没必要的正则检测, 所以提前判断一下
对匹配到的H标签进行处理以及生成树形结构
截取标题字符
标题内特殊符号转为html实体, 以及特殊字符, 修正
构建目录树，生成索引
在最后再获取目录
使用方法
提取目录树开关$data['is_toc']
通常在发布人确定使用时才开启这个功能
前端的代码
文章目录HTML变量输出
将变量$toc输出在合适的位置, 例如文章的右侧
输出变量的时候需要原样输出, 不能被模版引擎过滤html实体
下面在blade模版引擎中是这样输出的
关于blade模版引擎
有一篇TP6中使用blade模版引擎的文章可以看看
引入一个基于jquery的组件scrollspy.js
修改scrollspy.js中的改动
如果未使用seajs可以删除这部分
新增/让导航菜单区域, 跟随显示区域滚动
更改/nav选中时父节点是否选中效果开关
因原来会将父节点也设为选中, 所以不能达到预期效果
所以更改了原有代码增加一个开关
写一个目录菜单具体的特效js类
相关css
下面的css需要把rem转px请按1rem=100px转换
兼容手机端尺寸JS
将下面代码加入head之间, 上面css里面的rem就可以不用改了, 在小屏设备上面会更改html标签上的font-size尺寸达到显示效果和pc一样,前提是px换成rem
比例: 1rem=100px
重写目录JS类,弃用scrollspy.js
以jquery插件方式使用
普通方式
如果不想用jquery把代码内相关语法替换成原生js的方法, 插件写的并不复杂, 替换应该也不麻烦????
本文结语
具体的代码已经分享出来, 剩下的就由
u自己补充喽基于其他的前端框架可以尝试用类似于
scrollspy, 滚动scroll使nav能current的组件或自己根据
scrollspy用原生JS写一个相似的组件, 功能很单一, 实现也不难的