请注意,本文编写于 2768 天前,最后修改于 1854 天前,其中某些信息可能已经过时。
其实就是想想试试PS的制作长阴影的插件==(传送门:http://lab.rayps.com/lsg/)
也是记录下来。
HTML结构
<tree id="mulu"></tree>
说明一下:
把这段代码插到post.php 文章内容的div下面即可!
把代码中的#haha
改成你的文章内容div 的 ID。
调用文章内容的php代码是<?php parseContent($this); ?>
即,用div层把这段内容包括起来就行。
代码来自这篇文章:js为博客文章自动生成目录
JS 代码
function GenerateContentList() {
var mainContent = $("#mulu");
var h1_list = $("#haha h1");
var h2_list = $("#haha h2");
if (mainContent.length < 1) {
return
}
if (h1_list.length > 0) {
var content = "";
content += "";
content += ' <a class="title_menue">[文章目录]</a>';
content += '<ol class="toc">';
for (var i = 0; i < h1_list.length; i++) {
var go_to_top = '<a name="_label' + i + '"></a>';
$(h1_list[i]).before(go_to_top);
var h2_list = $(h1_list[i]).nextAll("h2");
var li2_content = "";
for (var j = 0; j < h2_list.length; j++) {
var tmp = $(h2_list[j]).prevAll("h1").first();
if (!tmp.is(h1_list[i])) {
break
}
var li2_anchor = '<a pjax="no" name="_label' + i + "_" + j + '"></a>';
$(h2_list[j]).before(li2_anchor);
li2_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h2_list[j]).text() + "</span></a></li>"
}
var li1_content = "";
if (li2_content.length > 0) {
li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + "</ol>"
} else {
li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + "</span></a></li>"
}
content += li1_content
}
if ($("#mulu").length != 0) {
$($("#mulu")[0]).prepend(content)
}
} else {
if (h1_list.length == 0 && h2_list.length > 0) {
var content = "";
content += "";
content += '<a class="title_menue">[文章目录]</a>';
content += '<ol class="toc">';
for (var i = 0; i < h2_list.length; i++) {
var go_to_top = '<a pjax="no" name="_label' + i + '"></a>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = "";
for (var j = 0; j < h3_list.length; j++) {
var tmp = $(h3_list[j]).prevAll("h2").first();
if (!tmp.is(h2_list[i])) {
break
}
var li3_anchor = '<a pjax="no" name="_label' + i + "_" + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h3_list[j]).text() + "</span></a></li>"
}
var li2_content = "";
if (li3_content.length > 0) {
li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + "</ol>"
} else {
li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + "</span></a></li>"
}
content += li2_content
}
if ($("#mulu").length != 0) {
$($("#mulu")[0]).prepend(content)
}
}
}
}
GenerateContentList();
CSS代码
我根据小伙伴|真|以歌。先生的目录树基础上写的。
悬浮在文章右侧,你可以根据你的主题进行修改。
#mulu {
float: right;
margin-left: 10px;
background: #f8f8f8;
position: relative;
z-index: 100
}
span.toc-text {
color: #707070
}
span.toc-text:hover {
color: #adadad;
}
ol.toc {
padding-left: 15px;
margin-left: 6px;
margin-top: 0
}
a.title_menue {
padding-left: 10px
}
.toc-item {
margin-left: 10px;
margin-right: 10px
}
撒花!!动手起来,开始享受你的文章目录树吧!