网站添加文章目录

DamonHu

2016 年 03 月 27 日

8705 次浏览

暂无评论

1742字数

建站备忘

为了展示应有的文章目录效果，所以分了下目录，具体效果可以看右侧的悬浮。

一、项目寻找

网站的文章一直没有目录，一直在找插件，但是wordpress有现成的，其他的也没有什么类似的可以一键生成的，今天又在搜，终于找到了，又让哥们在原来的基础上修改了，适合现在的样子。

二、项目来源

这个工程是在孤傲苍狼在博客园发表的，用来使用在博客园的，但是是使用的js抓取的方式，所以网站都可以通用。就是需要修改几个地方。

三、项目下载

Github下载：https://github.com/DamonHu/web_mulu

Gitosc下载：http://git.oschina.net/DamonHoo/web_mulu

因为项目之前是为了博客园的使用的，而我使用的是Emlog，所以我这个github上面的是已经为emlog修改好的，其他的程序依旧需要修改相应的地方。

四、项目修改

因为js最后的调用

window.onload=function(){
    /*页面加载完成之后生成博客目录*/
    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
}

这个是根据博客园的div格式来写的cnblogs_post_body这个id，所以如果不是博客园的程序需要做相应的更改。

1、博客园的修改

博客园的修改请参考孤傲苍狼的原文章：http://www.cnblogs.com/xdp-gacl/p/3718879.html

2、emlog修改

找到模板中的echo_log.php文件，因为程序没有在文章内容输出这里写上div，所以需要手动加上一个div，我的是这样加的

<article class="article_content">
				<div id="demo_1">
				<?php echo handleContent($log_content); ?>
				<p>---</p>
				<p style="text-indent:0;margin:10px 0 0 0;">本文由<a target="_blank" href="http://dongge.org/blog" title="胡东东博客">胡东东博客</a>整理,转载请注明本文标题和链接<br/>本文标题: 《<a href="<?php echo Url::log($logid);?>"><?php echo $log_title;?></a>》<br/>本文链接: <a href="<?php echo Url::log($logid);?>"><?php echo Url::log($logid);?></a></p>
				</div>
			</article>

这样手动加上一个id为demo_1的div，之后在相应想显示的地方，调用这个显示的js就可以了

<script type="text/javascript">
				  window.onload=function(){
    /*页面加载完成之后生成博客目录*/
    BlogDirectory.createBlogDirectory("demo_1","h2","h3",20);
}
				</script>