前言
星空站長網(wǎng)自己用的文章目錄為之前寫的一篇《為7B2主題添加浮動(dòng)文章導(dǎo)航目錄》。
這個(gè)文章目錄有一個(gè)問題就是,他會(huì)出現(xiàn)在商品內(nèi)頁和交易內(nèi)頁,不管這些頁面有沒有H1標(biāo)簽這些,都會(huì)出現(xiàn)。而且錨點(diǎn)的定位也不是很好,主要頂部導(dǎo)航欄會(huì)遮住一點(diǎn)。
今天就找到一個(gè)利用小工具實(shí)現(xiàn)的文章目錄。這種方法就是利用小工具實(shí)現(xiàn),就可以讓他不再其他的自定義分類里面顯示。
演示

教程
首先我們需要在子主題的child.js添加以下代碼
/*添加目錄*/
"use strict";var h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"function"==typeof define&&define.amd?define(function(){return t}):"object"===("undefined"==typeof exports?"undefined":h(exports))?module.exports=t:e.katelog=t}(window,function(e){function f(e,t){return!!e.className&&e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}function d(e,t){if(f(e,t)){var n=new RegExp("(\\s|^)"+t+"(\\s|$)");e.className=e.className.replace(n," ")}}function t(e){for(var t,n=void 0,o=[],l={},a={id:-1},r=null,i=void 0,c=0;c<e.length;c++)i="heading-"+c,l={name:e[c].innerText||e[c].textContent,tagName:n=e[c].tagName,id:e[c].id=i,level:(t=n,t?t.slice(1):0),parent:a},r&&(u(l.tagName)<u(r.tagName)?l.parent=r:l.parent=s(l,r)),r=l,o.push(l);return o}function s(e,t){for(var n=t.parent;n&&u(e.tagName)>=u(n.tagName);)n=n.parent;return n||{id:-1}}function u(e){var t=0;if(e)switch(e.toLowerCase()){case"h1":t=6;break;case"h2":t=5;break;case"h3":t=4;break;case"h4":t=3;break;case"h5":t=2;break;case"h6":t=1}return t}function n(e,t,n){e&&(e.attachEvent?(e["e"+t+n]=n,e[t+n]=function(){e["e"+t+n](window.event)},e.attachEvent("on"+t,e[t+n])):e.addEventListener(t,n,!1))}function i(e,t){var n,o,l=void 0,a=!1;if(e){l="<ul>";for(var r=0;r<e.length;r++)n=e[r].parent,o=t,n&&o&&"object"===(void 0===n?"undefined":h(n))&&"object"===(void 0===o?"undefined":h(o))&&n.id===o.id&&(a=!0,l+='<li><div class="'+p.linkClass+" k-catelog-level-"+e[r].level+'" data-target="'+e[r].id+'">'+e[r].name+"</div>",l+=i(e,e[r]),l+="</li>");l+="</ul>"}return a?l:""}"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e,t){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(e),o=1;o<arguments.length;o++){var l=arguments[o];if(null!=l)for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(n[a]=l[a])}return n},writable:!0,configurable:!0});var p=Object.assign({},{linkClass:"k-catelog-link",linkActiveClass:"k-catelog-link-active",supplyTop:0,selector:["h1","h2","h3","h4","h5","h6"],active:null},e),o=this.contentEl=p.contentEl instanceof HTMLElement?p.contentEl:document.getElementById(p.contentEl),v=p.catelogEl instanceof HTMLElement?p.catelogEl:document.getElementById(p.catelogEl),l=o.querySelectorAll(p.selector.join()),a=t(l),r=!1;v.innerHTML=i(a,{id:-1});var c="\n .k-catelog-list > ul { position: relative; } \n ",m=document.createElement("style");function g(e){var t,n=v.querySelectorAll("[data-target]");t=n,n=Array.prototype.slice.call(t);for(var o,l,a,r,i=null,c=void 0,s=0;s<n.length;s++)if(c=n[s],r="target",((a=c).dataset?a.dataset[r]:a.getAttribute("data-"+r))===e){o=c,l=p.linkActiveClass,f(o,l)||(o.className+=" "+l);var u=y(i=c,v);v.scrollTop=u-v.offsetHeight/2}else d(c,p.linkActiveClass);"function"==typeof p.active&&p.active.call(this,i)}function y(e){for(var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,n=e.offsetTop;(e=e.offsetParent)&&t!==e;)n+=e.offsetTop;return n}m.type="text/css",m.styleSheet?m.styleSheet.cssText=c:m.innerHTML=c,document.getElementsByTagName("head")[0].appendChild(m),n(v,"click",function(e){var t=(e.target||e.srcElement).getAttribute("data-target");if(t){var n=document.getElementById(t);r=!0;var o=y(n);window.scrollTo(0,o-p.supplyTop),g(t)}}),n(window,"scroll",function(e){if(!r){for(var t=(document.documentElement.scrollTop||document.body.scrollTop)+p.supplyTop,n=null,o=l.length-1;0<=o;o--)if(y(l[o])<=t){n=l[o];break}g(n?n.id:null)}r=!1}),this.rebuild=function(){var e=t(l=o.querySelectorAll(p.selector.join()));v.innerHTML=i(e,{id:-1})}});
var entry_content = document.querySelector(".entry-content");
if(entry_content){
entry_content.id = "kCatelog";
new katelog({
contentEl: 'kCatelog',
catelogEl: 'catelogList',
linkClass: 'k-catelog-link',
linkActiveClass: 'k-catelog-link-active',
supplyTop: 58,
selector: ['h1','h2', 'h3', 'h4', 'h5', 'h6'],
});
}
/*添加目錄*/
隨后在子主題的style.css添加代碼
/*添加目錄*/
.html-widget-content ul li {
padding: 8px 12px;
font-size: 16px;
}
.k-catelog-list {
margin: 0 -16px;
overflow-y: auto;
}
.k-catelog-list>ul {
padding: 0;
}
.k-catelog-list li {
list-style: none;
}
.k-catelog-link {
cursor: pointer;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 8px 12px;
text-decoration: none;
transition: background 0.5s;
-moz-transition: background 0.5s;
/* Firefox 4 */
-webkit-transition: background 0.5s;
/* Safari and Chrome */
-o-transition: background 0.5s;
/* Opera */
}
.k-catelog-link-active {
background: #ebedef;
color: #0084ff;
}
/*添加目錄*/
然后到小工具添加一個(gè)自定義HTML加入下面的代碼
<div class="k-catelog-list" id="catelogList"></div>
弊端
這個(gè)分類目錄我試了一下,有一個(gè)弊端,就是如果你文章的標(biāo)題太多,文章目錄就會(huì)特別長。這也會(huì)導(dǎo)致右側(cè)頁面被無限拉長。其他的信息就在底部。
這個(gè)方法留個(gè)需要的人,我自己還是傾向于之前的文章目錄。不過之前的文章目錄還是有些缺點(diǎn),定位預(yù)留。
原文網(wǎng)址:www.5che2.com