### [为b2主题添加目录](https://guaqi.com/article/53487)

**Published:** 2021-09-15T21:14:08

**Author:** 五号

**Excerpt:** 为b2主题添加目录     

以下教程基于开源项目”katelog”

项目地址：[https://github.com/KELEN/katelog](https://github.com/KELEN/katelog "https://github.com/KELEN/katelog")

b2主题实际使用效果：[https://www.aarss.cn/post/1.html](https://www.aarss.cn/post/1.html "https://www.aarss.cn/post/1.html")

## 添加js

这里以child主题为例

外观 –> 主题编辑器 –> child.js

打开child.js,将以下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");//文章主体内容区域，文章及默认模板页面不用改，其它页面视情况自行修改
//supplyTop  ==> 需要补充的高度，其实就是顶部浮动菜单栏的高度
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'],
	});  
   }
```

## 添加css

外观 –> 自定义 –> 额外css

将以下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;
}
```

## 使用

外观 –> 小工具

在需要目录的页面(比如页面小工具，文章内页小工具)添加小工具”B2-自定义HTML”

标题 –> 目录

内容

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

然后保存

**Tags:** 目录

**Categories:** B2主题教程

**Comments:** 

**一闻网:** ![](https://static.7b2.com/wp-content/uploads/2021/09/14430662cb2ce81dc5_53487_comment_drawing.png)

**一闻网:** ![](https://static.7b2.com/wp-content/uploads/2021/09/14430c5acef8f260e3_53487_comment_drawing.png)

**A小新:** ![](https://static.7b2.com/wp-content/uploads/2021/09/1293928e164bd83544_53487_comment_drawing.png)

**AndyZGS:** ![](https://static.7b2.com/wp-content/uploads/2021/11/344949a14bca6e986_53487_comment_drawing.png)

**余生seo:** 没成功….

**小何:** ![](https://static.7b2.com/wp-content/uploads/2021/11/966531a1c65549c29_53487_comment_drawing.png)

**海滨稻香:** 去优化一下代码，如果文章没有标题时候就不显示

**海滨稻香:** 搞个适配移动端的

**小锡兵:** ![](https://static.7b2.com/wp-content/uploads/2021/10/344620306ec527816_53487_comment_drawing.png)

**nstrip:** 6666



---