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

初缘Cvps小站

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

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

1. //初缘Cvps小站-https://cvps.top
   
2. //文章目录
   
3. if (_hui('index_c')) {
   
4. function article_index($content) {
   
5. $matches = array();
   
6. $ul_li = '';
   
7. $r = "/<h4>([^<]+)<\/h4>/im";
   
8. if(preg_match_all($r, $content, $matches)) {
   
9. foreach($matches[1] as $num => $title) {
   
10. $content = str_replace($matches[0][$num], '<h4 class="title-'.$num.'">'.$title.'</h4>', $content);
    
11. $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
    
12. }
    
13. $content = "\n<div id="article-index" class="article-index hidden-xs">
    
14. <strong class="title">文章目录</strong>
    
15. <ul id="index-ul" class="index-ul">\n" . $ul_li . "</ul>
    
16. </div>\n" . $content;
    
17. }
    
18. return $content;
    
19. }
    
20. add_filter( "the_content", "article_index" );
    
21. }

复制代码

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

1. #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;}
   
2. #article-index strong{border-bottom:1px dashed #DDDDDD;display:block;line-height:30px;padding:0 4px}
   
3. #index-ul{margin:0;padding-bottom:10px;}
   
4. #index-ul li{background:none repeat scroll 0 0 transparent;list-style-type:disc;padding:0;margin-left:20px}
   
5. .index-more{padding-left:20px;}

复制代码

JS代码：js/main.js

1. //滚动到某个位置
   
2. function scrollTo(ele, speed){
   
3. if(!speed) speed = 300;
   
4. if(!ele){
   
5. $("html,body").animate({scrollTop:0},speed);
   
6. }else{
   
7. if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);
   
8. }
   
9. return false;
   
10. }
    
11. 
    
12. //右侧滑动到某个位置时，复制文章目录，并添加到侧栏指定标签内“.mulu ul”内，样式保持一致
    
13. var muluBox = $(".mulu ul");
    
14. var _html = $(".index-ul").html();
    
15. if(_html){
    
16. muluBox.html(_html);
    
17. //当滚动距离大于侧栏高度和目录的原本高度时，目录才会显示。
    
18. function resizeWindow(e){
    
19. if($(window).width()>1000){
    
20. var sidebarHeight = $(".sidebar").height();
    
21. 
    
22. //文章滚动的过程中，目录的列表锚点会随着高度的变化而相应的改变，如上图中的图片规范是亮点
    
23. $(window).scroll(function(){
    
24. var winScrollTop = $(window).scrollTop();
    
25. var items = muluBox.find("li");
    
26. for(var i=0; i<items.length; i++){
    
27. var anchor = $(".title-"+i);
    
28. // console.log(anchor);
    
29. var pos = anchor.offset();
    
30. var winH = $(window).height();
    
31. if(pos.top < (winScrollTop+20)){
    
32. // console.log(i);
    
33. muluBox.find("li").eq(i).addClass("current").siblings().removeClass();
    
34. }
    
35. }
    
36. if(winScrollTop > sidebarHeight){
    
37. $(".mulu").show().stop(true,false);
    
38. }else{
    
39. $(".mulu").hide();
    
40. }
    
41. })
    
42. }
    
43. }
    
44. resizeWindow();
    
45. 
    
46. //点击目录下边的小按钮可以隐藏目录和展开目录
    
47. $(window).bind("resize", resizeWindow);
    
48. $(".mulu-toggle").on("click",function(){
    
49. var muLu = $(".mulu");
    
50. $(this).toggleClass("active");
    
51. if(muLu.is(":visible")) muLu.hide();
    
52. else muLu.show();
    
53. })
    
54. }else{
    
55. $(".mulu, .mulu-toggle").hide();
    
56. }
    
57. 
    
58. var indexUL = $(".index-ul");
    
59. var indexLi = $(".index-ul li").length;
    
60. 
    
61. //目录的个数大于7时，收缩起来，点击展开更多后展开，点击收缩起来时，恢复原样
    
62. if(indexLi >7 ){
    
63. $(".index-ul li:gt(6)").hide();
    
64. indexUL.after("<li class='index-more'><a href='#'>展开更多</a>");
    
65. $(".index-more").on("click","a",function(){
    
66. var more =$(".index-ul li:gt(6)");
    
67. var _this = $(this);
    
68. if(more.is(":visible")){
    
69. more.hide();
    
70. _this.text("展开更多");
    
71. }else{
    
72. more.show();
    
73. _this.text("伸缩起来");
    
74. }
    
75. return false;
    
76. })
    
77. }
    
78. 
    
79. //点击目录的链接，会跳转到相对应的位置
    
80. $(".index-ul, .mulu ul").on("click","li",function(){
    
81. var itemName = $(this).find("a").attr("href").slice(1);
    
82. $(this).addClass("current").siblings().removeClass();
    
83. scrollTo("."+itemName,500);
    
84. return false;
    
85. })

复制代码

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

1.         $options[] = array(
   
2.                 'name' => '文章目录',
   
3.                 'desc' => '四级标题作为文章索引目录',
   
4.                 'id' => 'index_c',
   
5.                 'std' => '1',
   
6.                 'type' => 'checkbox');

复制代码

大致样式如下：

wolfewong

感谢分享，有空试一试

hxuf

大佬真能折腾

宁静致远

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

初缘Cvps小站

宁静致远 发表于 2019-4-30 03:30
大佬快去继续折腾更多功能出来

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

Ashin

买不起哦 这个主题

ownones

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

初缘Cvps小站

ownones 发表于 2019-4-30 18:35
tocbot貌似更好看，但是我不会弄……

css可以改，，但是我也不会好看的，只会抄抄，哈。

zzz123

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