58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
<!-- 目录 -->
|
||
|
||
<th:block th:fragment="toc">
|
||
<div class="card-widget" id="card-toc">
|
||
<div class="item-headline">
|
||
<i class="fas fa-bars"></i>
|
||
<span>文章目录</span>
|
||
</div>
|
||
<!-- 目录容器 -->
|
||
<div class="toc-content"></div>
|
||
</div>
|
||
|
||
<!-- tocbot 用来生成目录 -->
|
||
<div>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css" rel="stylesheet">
|
||
</div>
|
||
<script>
|
||
// 给标签添加 id
|
||
var headerEl = 'h1,h2,h3,h4,h5,h6', // headers
|
||
content = '.post-content', // 文章容器
|
||
idArr = {};
|
||
var headers = $(content).children(headerEl);
|
||
|
||
// 没有 toc 目录，则直接移除
|
||
if (headers.empty()) {
|
||
document.getElementById("card-toc").remove();
|
||
} else {
|
||
headers.each(function () {
|
||
|
||
// 去除空格以及多余标点
|
||
var headerId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');
|
||
|
||
headerId = headerId.toLowerCase();
|
||
if (idArr[headerId]) {
|
||
// id已经存在
|
||
$(this).attr('id', headerId + '-' + idArr[headerId]);
|
||
idArr[headerId]++;
|
||
} else {
|
||
// id未存在
|
||
idArr[headerId] = 1;
|
||
$(this).attr('id', headerId);
|
||
}
|
||
});
|
||
tocbot.init({
|
||
tocSelector: '.toc-content',
|
||
contentSelector: '.post-content',
|
||
headingSelector: headerEl,
|
||
hasInnerContainers: true,
|
||
|
||
});
|
||
}
|
||
|
||
</script>
|
||
</th:block>
|
||
</html> |