给极致cms加点料-目录导航

目录导航

有很多种方法有

1、html5+JavaScript 直接遍历内容h2,h3d的生成目录的

2、html5+jquery 直接遍历内容h2,h3d的生成目录的

3、开发语言代码直接生成的


这三种不管用哪一种都能实现。

当然第一种和第二种只需要html5模板支持就能很容易的实现(推荐第二种效果更好

而第三种需要修改php代码,也是最麻烦的不是说不好,而是有些模板的需要必须用php来搞。


那么今天我们就来做一个最麻烦的修改开发代码之极致cms目录导航

修改PHP代码


首先要修改极致cms内核文件HomeController.php

文件路径在HomecHomeController.php

在源文件里直接查询 (大概在532行)

$this->jz = $details;

在上面直接加上一下代码


//yutian只支持小写html标签

        $details['catalogues'] = [];

        $dom = new DOMDocument();

        $encoding = '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';

        $dom->loadHTML($encoding.$details['body']);

        foreach($dom->getElementsByTagName('h2') as $key=>$node) {

            $details['catalogues'][$key] = ['name' => strip_tags($dom->saveHtml($node))];

            while(($node = $node->nextSibling) && strtolower($node->nodeName) !== 'h2') {

                if(strtolower($node->nodeName) == 'h3') {

                    $details['catalogues'][$key]['child'][] = ['name' => strip_tags($dom->saveHtml($node))];

                }

            }

        }

        //_yutian


代码的意思很好理解。就是遍历文章内容body字段里的h2和h3然后过滤掉html 标签,然后在生成出来。


然后在内容模板需要显示的地方用以下标签进行调用


 {foreach $jz['catalogues'] as $key=>$value}

           <a class="toc-link" href="#{$value['name']}">{$value['name']}</a>

                {foreach $value['child'] as $k=>$v}

        <a class="toc-link" href="#{$v['name']}">-{$v['name']}</a>

                {/foreach}

            {/foreach}



然后自己在添加文章内容的时候载编辑器里选择文字段落。比如设置h2或者h3。设置完后保存看下是不是文章内容已经出现了你的导航,如果想实现点击目录导航那么就在编辑器里插入下瞄点就行了。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 237326904@qq.com

×

喜欢就点赞,疼爱就打赏