Fork me on GitHub

博客园美化 - 自动生成目录

Tocbot自动目录

1.引入Tocbot相关的文件

在侧边公告栏,输入如下代码:

<!--Tocbot目录-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<!--此处的div.toc 用来存放Tocbot生成的目录-->
<div class="toc"></div>

2.为每一个标题生成唯一的id

<script language="javascript" type="text/javascript">
var id = 1;
// blogpost-body 为正文容器的 class,根据自己的情况修改
$(".blogpost-body").children("h1,h2,h3,h4,h5").each(function () {
// 使用中文 id ,注意非ANSI编码文字会导致无法跳转
//var hyphenated = $(this).text().replace(/\s/g, '-');
// 英文id
var hyphenated = "myunique-" + id;
$(this).attr('id', hyphenated);
id++;
});
</script>

3.初始化Tocbot

<script language="javascript" type="text/javascript">
tocbot.init({
// Where to render the table of contents.
// 放置目录的容器,此处toc与步骤1 div的类名保持一致
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
// 正文内容所在位置,可以通过F12进行查看
contentSelector: '.blogpost-body',
// Which headings to grab inside of the contentSelector element.
// 需要索引的标题级别
headingSelector: 'h1, h2, h3, h4, h5',
//目录位置固定
positionFixedSelector: ".toc",
//回调函数
scrollEndCallback: function (e) {
//修正滚动后页面的位置,80 是自己顶部栏的高度
window.scrollTo(window.scrollX, window.scrollY - 80);
},
});
</script>

4.保存,刷新即可看到目录

5.设置样式

根据自己的需求自定义样式

/*toc目录*/
.toc {
width: 200px;
height: auto;
z-index: 98;
background-color: rgba(255,255,255,0);
transform: translateX(0);
right: 25%;
position: fixed !important;
top:480px;
position: absolute;
padding-top: 10px;
padding-bottom: 10px;
}
posted @   ZTianming  阅读(893)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
欢迎阅读『博客园美化』

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示