B2主题利用小工具添加一个文章目录

前言

星空站长网自己用的文章目录为之前写的一篇《为7B2主题添加浮动文章导航目录》。

这个文章目录有一个问题就是，他会出现在商品内页和交易内页，不管这些页面有没有H1标签这些，都会出现。而且锚点的定位也不是很好，主要顶部导航栏会遮住一点。

今天就找到一个利用小工具实现的文章目录。这种方法就是利用小工具实现，就可以让他不再其他的自定义分类里面显示。

演示

教程

首先我们需要在子主题的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;
}
/*添加目录*/

然后到小工具添加一个自定义HTML加入下面的代码

<div class="k-catelog-list" id="catelogList"></div>

弊端

这个分类目录我试了一下，有一个弊端，就是如果你文章的标题太多，文章目录就会特别长。这也会导致右侧页面被无限拉长。其他的信息就在底部。

这个方法留个需要的人，我自己还是倾向于之前的文章目录。不过之前的文章目录还是有些缺点，定位预留。

原文网址：www.5che2.com