全球主机交流论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

CeraNetworksBGVM服务器主机交流
IP归属甄别会员请立即修改密码Sharktech防护
查看: 1948|回复: 11

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

[复制链接]
发表于 2019-4-29 23:28:57 | 显示全部楼层 |阅读模式
本帖最后由 初缘Cvps小站 于 2019-4-30 08:03 编辑

献给一些需要的朋友,找了很久才找到有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. //右侧滑动到某个位置时,复制文章目录,并添加到侧栏指定标签内“.mulu ul”内,样式保持一致
  12. var muluBox = $(".mulu ul");
  13. var _html = $(".index-ul").html();
  14. if(_html){
  15. muluBox.html(_html);
  16. //当滚动距离大于侧栏高度和目录的原本高度时,目录才会显示。
  17. function resizeWindow(e){
  18. if($(window).width()>1000){
  19. var sidebarHeight = $(".sidebar").height();

  20. //文章滚动的过程中,目录的列表锚点会随着高度的变化而相应的改变,如上图中的图片规范是亮点
  21. $(window).scroll(function(){
  22. var winScrollTop = $(window).scrollTop();
  23. var items = muluBox.find("li");
  24. for(var i=0; i<items.length; i++){
  25. var anchor = $(".title-"+i);
  26. // console.log(anchor);
  27. var pos = anchor.offset();
  28. var winH = $(window).height();
  29. if(pos.top < (winScrollTop+20)){
  30. // console.log(i);
  31. muluBox.find("li").eq(i).addClass("current").siblings().removeClass();
  32. }
  33. }
  34. if(winScrollTop > sidebarHeight){
  35. $(".mulu").show().stop(true,false);
  36. }else{
  37. $(".mulu").hide();
  38. }
  39. })
  40. }
  41. }
  42. resizeWindow();

  43. //点击目录下边的小按钮可以隐藏目录和展开目录
  44. $(window).bind("resize", resizeWindow);
  45. $(".mulu-toggle").on("click",function(){
  46. var muLu = $(".mulu");
  47. $(this).toggleClass("active");
  48. if(muLu.is(":visible")) muLu.hide();
  49. else muLu.show();
  50. })
  51. }else{
  52. $(".mulu, .mulu-toggle").hide();
  53. }

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

  56. //目录的个数大于7时,收缩起来,点击展开更多后展开,点击收缩起来时,恢复原样
  57. if(indexLi >7 ){
  58. $(".index-ul li:gt(6)").hide();
  59. indexUL.after("<li class='index-more'><a href='#'>展开更多</a>");
  60. $(".index-more").on("click","a",function(){
  61. var more =$(".index-ul li:gt(6)");
  62. var _this = $(this);
  63. if(more.is(":visible")){
  64. more.hide();
  65. _this.text("展开更多");
  66. }else{
  67. more.show();
  68. _this.text("伸缩起来");
  69. }
  70. return false;
  71. })
  72. }

  73. //点击目录的链接,会跳转到相对应的位置
  74. $(".index-ul, .mulu ul").on("click","li",function(){
  75. var itemName = $(this).find("a").attr("href").slice(1);
  76. $(this).addClass("current").siblings().removeClass();
  77. scrollTo("."+itemName,500);
  78. return false;
  79. })
复制代码


在主题中options.php添加代码:(位置自己选了,可以在首页下任何一个,你喜欢就好,以下代码默认开启,自行选择)
  1.         $options[] = array(
  2.                 'name' => '文章目录',
  3.                 'desc' => '四级标题作为文章索引目录',
  4.                 'id' => 'index_c',
  5.                 'std' => '1',
  6.                 'type' => 'checkbox');
复制代码



大致样式如下:

发表于 2019-4-29 23:37:03 | 显示全部楼层
感谢分享,有空试一试
发表于 2019-4-29 23:39:07 | 显示全部楼层
大佬真能折腾
发表于 2019-4-30 03:30:32 来自手机 | 显示全部楼层
大佬快去继续折腾更多功能出来
 楼主| 发表于 2019-4-30 09:01:00 来自手机 | 显示全部楼层
宁静致远 发表于 2019-4-30 03:30
大佬快去继续折腾更多功能出来

其实还折腾了一些功能,不过都是大佬们整出来的,我只不过加个开关,修修整整。。哈
发表于 2019-4-30 18:09:29 | 显示全部楼层
买不起哦 这个主题

点评

网上可以用开心版体验,吾爱破解也有。建议购买正版支持作者,不知道今年双11是不是还有优惠折扣。  发表于 2019-4-30 18:13
发表于 2019-4-30 18:35:00 来自手机 | 显示全部楼层
tocbot貌似更好看,但是我不会弄……
 楼主| 发表于 2019-4-30 19:17:13 | 显示全部楼层
ownones 发表于 2019-4-30 18:35
tocbot貌似更好看,但是我不会弄……

css可以改,,但是我也不会好看的,只会抄抄,哈。
发表于 2019-4-30 19:20:09 | 显示全部楼层
请问有演示的网页吗,我想看看效果
发表于 2019-5-1 08:57:14 | 显示全部楼层
修改这么多内容
楼主辛苦了
感觉这个适合长篇的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|Archiver|全球主机交流论坛

GMT+8, 2019-9-24 01:59 , Processed in 0.856877 second(s), 12 queries , MemCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表