当前位置:首页 » 好文分享 » 详情

    如何给文章添加内容目录索引?

    目录索引,顾名思义就是给文章内容添加一个目录,通过索引快速定位到指定的内容。那么如何给文章添加这样的目录索引勒,网上有许许多多的教程或者插件,其原理都大同小异,但是很多的都不理想,不能达到多级目录的效果,在这里分享下一个比较好的代码(可以看下本文的目录索引效果,也可以看下多级目录效果),分为三部分:
    php代码(建立目录)

        //文章目录索引
        function article_index($content){
        $matches = array();
        $ul_li = '';
        $r = "/<(h[2-5])>([^<]+)<\/(h[2-5])>/im";
        if(preg_match_all($r, $content, $matches)){
        foreach($matches[2] as $num => $title){
        //if($num==0)
        if(true){
        $content = str_replace($matches[0][$num], '<'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'>', $content);
        }else{
        $content = str_replace($matches[0][$num], '<div id="content_title"><'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'><span id="article-index-top"><a href="#article-index">top</a></span></div>', $content);
        }
        if($matches[1][$num] == 'h2')
        $ul_li .= '<li class="level2"><a href="#title-'.$num.'" >'.$title."</a></li>\n";
        else if($matches[1][$num] == 'h3')
        $ul_li .= '<li class="level3"><a href="#title-'.$num.'" >'.$title."</a></li>\n";
        }
        $content = '<div id="article-index">
        <div id="index-title"><span id="the-index-title">正文目录</span><span id="show-index">[ 隐藏 ]</span></div><div id="index-ul"><ul>' . $ul_li . '</ul></div></div>' . $content;
        }
        return $content;
        }


    把article_index()函数添加到function.php文件中,然后直接调用就行了,方法:article_index(“输出的内容”);
    css代码(添加样式)

        /** article-index -start**/
        #article-index{float: right;position: relative;margin: 0 0 10px 10px;width: 250px;border-radius: 6px;-webkit-border-radius: 6px;-khtml-border-radius: 6px;-moz-border-radius: 6px;border: 1px solid #aaa;background-color:#fff;}
        #article-index ul{margin: 0;}
        #article-index ul li{list-style: square;padding: 0;color: #A3C159;font-size: 12px;line-height:15px;background:url(''); }
        #article-index ul li a{text-decoration:none;}
        #index-title{border-radius: 7px 7px 0 0;padding: 4px 8px;border-bottom: 1px solid #aaa;background-color: #EEE}
        #the-index-title{line-height: 1.6;color: #019858;font-weight: bold}
        #show-index{cursor: pointer;margin-left: 8px;margin-right: 8px}
        #index-ul{list-style: none;padding: 4px 5px 4px 7px;margin: 0}
        #index-ul .level2{margin-left: 10px;}
        #index-ul .level3{margin-left: 30px;}
        #content_title{position: relative}
        #article-index-top{position: absolute;top: 5px;right: 10pxz-index: 111;}
        /** article-index -end**/


    利用上面的css给目录索引添加样式,效果如本文上的目录索引。
    js代码(隐藏与展开)

        /** article_index -start **/
        $("#show-index").click(function() {
        if ($("#show-index").html() == "[ 隐藏 ]") {
        $("#index-ul").fadeOut("normal");
        $("#show-index").html("[ 展开 ]")
        } else if ($("#show-index").html() == "[ 展开 ]") {
        $("#index-ul").fadeIn("normal");
        $("#show-index").html("[ 隐藏 ]")
        } else {
        return false
        }
        })
        /** article_index -end **/


    我们注意到了,目录上有隐藏和展开的按钮,就是利用js实现的。

    好了,代码分享就到这里,那么我们怎么才能正确建立目录索引呢?很简单,只要为文字添加二级标题(编辑器自带)或者三级标题(编辑器自带)标签就行了,对,就这么简单。


    感谢作者:阿伟博客的投稿,欢迎大家投稿: https://www.blogs.hk/post-87.html

    打赏
    X
    打赏方式:
    • 支付宝
    • 微信
    • QQ红包

    打开支付宝扫一扫
    日期:2015年02月05日 08:38:02 星期四   分类:好文分享   浏览(85379)   评论(21)
    本文地址:https://www.blogs.hk/post-432.html   [百度已收录]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
    版权所有:《博客之家
    文章标题:《如何给文章添加内容目录索引?
    除非注明,文章均为 《博客之家》 原创
    转载请注明本文短网址:https://www.blogs.hk/post-432.html  [生成短网址]

    留言咨询

    自动获取QQ

    昵称

    邮箱

    网址

    15楼、上海保险网 [回复该留言]
    2015-02-14 14:45
    博主要不把百度百科的目录代码扒下来,那个效果比较酷。
    14楼、广志博客 [回复该留言]
    2015-02-06 23:17
    方法有点复杂,我直接用锚文本加float
    阿伟 [回复该留言]
    2015-02-07 09:14
    @广志博客:这个一次性解决加锚点的问题,不用在手工加锚点
    13楼、清知枫 [回复该留言]
    2015-02-06 21:42
    老大,你这里也不整个自适应或者手机主题,回家了,手机上看有点惨不忍睹
    李明 [回复该留言]
    2015-02-06 23:17
    @清知枫:我也经常使用手机看,沒感觉有问题的,哈哈!
    12楼、学史博客 [回复该留言]
    2015-02-06 20:55
    要是有效果图就更完美了,还是非常谢谢分享!
    11楼、WingsBlog [回复该留言]
    2015-02-06 15:40
    又图文的话就更好了
    10楼、森灭 [回复该留言]
    2015-02-06 14:25
    如果博文再加上目录

    那不是彻底成百科了啊

    ------

    特来看望博主,望回访
    9楼、秋天日记 [回复该留言]
    2015-02-06 07:24
    有机会再试试,哈哈
    8楼、包装盒 [回复该留言]
    2015-02-05 21:45
    过来支持一下
    7楼、凌远 [回复该留言]
    2015-02-05 21:27
    过来支持一下
    6楼、Louis Han [回复该留言]
    2015-02-05 20:27
    平时写博客没有添加索引的习惯
    5楼、姜辰 [回复该留言]
    2015-02-05 18:17
    (⊙o⊙)哇,可惜我又不用……李兄的博客之家源码是自己写的?
    李明 [回复该留言]
    2015-02-05 19:01
    @姜辰:其实这套源码在网上有很多,博客之家源码内核来自每来访一个IP,就会自动排到第一的导航源码修改而成的。
    4楼、消灭星星 [回复该留言]
    2015-02-05 17:23
    交换友链   消灭星星
    李明 [回复该留言]
    2015-02-05 17:41
    @消灭星星:不好意思,暂时不换的。

        站点统计

        • 收录网址:3370 个
        • 发布文章:3008 条
        • 在线人数:1人
        • 总访问量:270546392次
        • 本站运行:12年5月3天
        Copyright © 2025 博客之家 版权所有  
        關於本站免責聲明sitemap新站登錄