1.引入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 class="toc"></div> |
2.为每一个标题生成唯一的id
| <script language="javascript" type="text/javascript"> |
| var id = 1; |
| |
| $(".blogpost-body").children("h1,h2,h3,h4,h5").each(function () { |
| |
| |
| |
| var hyphenated = "myunique-" + id; |
| $(this).attr('id', hyphenated); |
| id++; |
| }); |
| </script> |
3.初始化Tocbot
| <script language="javascript" type="text/javascript"> |
| tocbot.init({ |
| |
| |
| tocSelector: '.toc', |
| |
| |
| contentSelector: '.blogpost-body', |
| |
| |
| headingSelector: 'h1, h2, h3, h4, h5', |
| |
| positionFixedSelector: ".toc", |
| |
| scrollEndCallback: function (e) { |
| |
| window.scrollTo(window.scrollX, window.scrollY - 80); |
| |
| }, |
| }); |
| </script> |
4.保存,刷新即可看到目录
5.设置样式
根据自己的需求自定义样式
| |
| .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; |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~