最新文章:

首页 Web

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

发布时间:2015年06月03日 评论数:1 阅读数:1843

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

    php代码(建立目录)

    1. //文章目录索引
    2. function article_index($content){
    3. $matches = array();
    4. $ul_li = '';
    5. $r = "/<(h[2-5])>([^<]+)<\/(h[2-5])>/im";
    6. if(preg_match_all($r, $content, $matches)){
    7. foreach($matches[2] as $num => $title){
    8. //if($num==0)
    9. if(true){
    10. $content = str_replace($matches[0][$num], '<'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'>', $content);
    11. }else{
    12. $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);
    13. }
    14. if($matches[1][$num] == 'h2')
    15. $ul_li .= '<li class="level2"><a href="#title-'.$num.'" >'.$title."</a></li>\n";
    16. else if($matches[1][$num] == 'h3')
    17. $ul_li .= '<li class="level3"><a href="#title-'.$num.'" >'.$title."</a></li>\n";
    18. }
    19. $content = '<div id="article-index">
    20. <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;
    21. }
    22. return $content;
    23. }

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

    css代码(添加样式)

    																											
    1. /** article-index -start**/
    2. #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;}
    3. #article-index ul{margin: 0;}
    4. #article-index ul li{list-style: square;padding: 0;color: #A3C159;font-size: 12px;line-height:15px;background:url(''); }
    5. #article-index ul li a{text-decoration:none;}
    6. #index-title{border-radius: 7px 7px 0 0;padding: 4px 8px;border-bottom: 1px solid #aaa;background-color: #EEE}
    7. #the-index-title{line-height: 1.6;color: #019858;font-weight: bold}
    8. #show-index{cursor: pointer;margin-left: 8px;margin-right: 8px}
    9. #index-ul{list-style: none;padding: 4px 5px 4px 7px;margin: 0}
    10. #index-ul .level2{margin-left: 10px;}
    11. #index-ul .level3{margin-left: 30px;}
    12. #content_title{position: relative}
    13. #article-index-top{position: absolute;top: 5px;right: 10pxz-index: 111;}
    14. /** article-index -end**/

    利用上面的css给目录索引添加样式,效果如本文上的目录索引。

    js代码(隐藏与展开)

    																																										
    1. /** article_index -start **/
    2. $("#show-index").click(function() {
    3. if ($("#show-index").html() == "[ 隐藏 ]") {
    4. $("#index-ul").fadeOut("normal");
    5. $("#show-index").html("[ 展开 ]")
    6. } else if ($("#show-index").html() == "[ 展开 ]") {
    7. $("#index-ul").fadeIn("normal");
    8. $("#show-index").html("[ 隐藏 ]")
    9. } else {
    10. return false
    11. }
    12. })
    13. /** article_index -end **/

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

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

二维码加载中...
本文作者:Mr.linus      文章标题: 如何给文章添加内容目录索引?
本文地址:http://www.90qj.com/160  本文已经被百度收录,点击查看详情
版权声明:若无注明,本文皆为“挨踢 Blog”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
小静
小静2016-09-24 18:10回复
#1
好有意思的网站