#DUX主题#纯代码为WordPress文章内容增加文章目录功能

初缘Cvps小站

本帖最后由 初缘Cvps小站 于 2019-4-30 08:03 编辑

献给一些需要的朋友，找了很久才找到有JS的，体验起来比没JS的好很多。哈  ，本代码带后台开关了。

在主题Functions.php文件中加入下面代码 （默认为4级标题索引）可以将h4改h2，这样就二级标题作为文章目录了。
其他主题，请自行修改“if (_hui('index_c')) {}”这段代码。这个是添加后台开关的一个判断。删除就行了，这样只不过后台没开关而已。哈
[ol]

//初缘Cvps小站-https://cvps.top

//文章目录

if (_hui('index_c')) {

function article_index($content) {

$matches = array();

$ul_li = '';

$r = "/([^/im";

if(preg_match_all($r, $content, $matches)) {

foreach($matches[1] as $num => $title) {

$content = str_replace($matches[0][$num], ''.$title.'', $content);

$ul_li .= '

[url=]'.$title."[/url]\n";

}

$content = "\n

文章目录

\n" . $ul_li . "

\n" . $content;

}

return $content;

}

add_filter( "the_content", "article_index" );

}[/ol]复制代码


CSS代码：在主题目录 css/main.css

[ol]

#article-index{position:relative; z-index:2;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:1px solid #DEDFE1;float:right;margin:0 0 15px 15px;padding:0 6px;width:200px;line-height:23px; background: #fff;}

#article-index strong{border-bottom:1px dashed #DDDDDD;display:block;line-height:30px;padding:0 4px}

#index-ul{margin:0;padding-bottom:10px;}

#index-ul li{background:none repeat scroll 0 0 transparent;list-style-type:disc;padding:0;margin-left:20px}

.index-more{padding-left:20px;}[/ol]复制代码

JS代码：js/main.js

[ol]

//滚动到某个位置

function scrollTo(ele, speed){

if(!speed) speed = 300;

if(!ele){

$("html,body").animate({scrollTop:0},speed);

}else{

if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);

}

return false;

}

//右侧滑动到某个位置时，复制文章目录，并添加到侧栏指定标签内“.mulu ul”内，样式保持一致

var muluBox = $(".mulu ul");

var _html = $(".index-ul").html();

if(_html){

muluBox.html(_html);

//当滚动距离大于侧栏高度和目录的原本高度时，目录才会显示。

function resizeWindow(e){

if($(window).width()>1000){

var sidebarHeight = $(".sidebar").height();

//文章滚动的过程中，目录的列表锚点会随着高度的变化而相应的改变，如上图中的图片规范是亮点

$(window).scroll(function(){

var winScrollTop = $(window).scrollTop();

var items = muluBox.find("li");

for(var i=0; i sidebarHeight){

$(".mulu").show().stop(true,false);

}else{

$(".mulu").hide();

}

})

}

}

resizeWindow();

//点击目录下边的小按钮可以隐藏目录和展开目录

$(window).bind("resize", resizeWindow);

$(".mulu-toggle").on("click",function(){

var muLu = $(".mulu");

$(this).toggleClass("active");

if(muLu.is(":visible")) muLu.hide();

else muLu.show();

})

}else{

$(".mulu, .mulu-toggle").hide();

}

var indexUL = $(".index-ul");

var indexLi = $(".index-ul li").length;

//目录的个数大于7时，收缩起来，点击展开更多后展开，点击收缩起来时，恢复原样

if(indexLi >7 ){

$(".index-ul li:gt(6)").hide();

indexUL.after("展开更多");

$(".index-more").on("click","a",function(){

var more =$(".index-ul li:gt(6)");

var _this = $(this);

if(more.is(":visible")){

more.hide();

_this.text("展开更多");

}else{

more.show();

_this.text("伸缩起来");

}

return false;

})

}

//点击目录的链接，会跳转到相对应的位置

$(".index-ul, .mulu ul").on("click","li",function(){

var itemName = $(this).find("a").attr("href").slice(1);

$(this).addClass("current").siblings().removeClass();

scrollTo("."+itemName,500);

return false;

})[/ol]复制代码

在主题中options.php添加代码：（位置自己选了，可以在首页下任何一个，你喜欢就好，以下代码默认开启，自行选择）
[ol]

        $options[] = array(

                'name' => '文章目录',

                'desc' => '四级标题作为文章索引目录',

                'id' => 'index_c',

                'std' => '1',

                'type' => 'checkbox');[/ol]复制代码


大致样式如下：

wolfewong

感谢分享，有空试一试

hxuf

大佬真能折腾

宁静致远

大佬快去继续折腾更多功能出来

初缘Cvps小站

"

其实还折腾了一些功能，不过都是大佬们整出来的，我只不过加个开关，修修整整。。哈

Ashin

买不起哦 这个主题

ownones

tocbot貌似更好看，但是我不会弄……

初缘Cvps小站

ownones 发表于 2019-4-30 18:35

tocbot貌似更好看，但是我不会弄……
css可以改，，但是我也不会好看的，只会抄抄，哈。

zzz123

请问有演示的网页吗，我想看看效果