网站添加文章目录

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

屏幕快照 2016-03-27 17.22.45.png

一、项目寻找

网站的文章一直没有目录,一直在找插件,但是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://www.hudongdong.com" 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>

3、其他项目修改

其他的程序的话也可以参考上面,原理主要就是抓取文章内容的第一个div,然后截取h2,h3这种标签,对应即可

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment