发现很多主题的文章页面都有文章导读目录，感觉很有意思，也想给自己的主题加一个。
寻找
有现成的轮子肯定不用重复去造，在主题本来就用了JQuery的情况下，肯定优先使用JQuery的插件。
ChatGPT给推荐了几个：
tocbotjquery-tocify.js
然后使用后不能在没有id的h标题里面自动生成锚点id，不能点击滚动，继续寻找。
发现有使用autoc.js来实现的，github去找autoc.js，发现开发者已升级到outline.js了，地址为:https://github.com/yaohaixiao/outline.js
使用
找到了就开始使用吧，开发者给了很完整的示例，因为我们要固定到右侧，这里我们使用sticky定位。
首先引入js和css
<link href="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.js"></script>可以避免过多引用，outline.min.js可以只在post.php和page.php页面引用。
右侧和内容页加上id
在post.php和page.php的<?php $this->content(); ?>外框<div>上加上id="xa-post-content"
<div class="xa-theme xa-post-content" id="xa-post-content" itemprop="articleBody">
<?php $this->content(); ?>
</div>在sidebar.php想要显示目录的地方<div>上加上id="xa-toc"
<!-- 文章导读 -->
<section class="xa-sidebar-item rounded-lg mt-6 dark:bg-gray-700">
<h2 class="font-bold">
文章导读<span><i class="ti ti-chevron-right text-gray-400"></i></span>
</h2>
<div id="xa-toc"></div>
</section>在$(document).ready()中加上代码
//如果文章则生成导读
if($('#xa-post-content').length > 0 && $('#xa-toc').length > 0) {
const outline = new Outline({
// 文章显示区域的 DOM 元素或者选择器字符串
articleElement: '#xa-post-content',
// 要收集的标题选择器
selector: 'h1,h2,h3,h4,h5,h6',
// 负责文章区域滚动的元素
scrollElement: 'html,body',
title: false,
stickyHeight: 75,
// 文章导读菜单的位置
position: 'sticky',
placement: '',
// 导航菜单将要插入的位置（DOM 元素）
parentElement: '#xa-toc',
// 是否显示段落章节编号
showCode: false,
animationCurrent: false,
hasToolbar: false,
// 标题图标链接的 URL 地址
anchorURL: '',
customClass: ''
});
}最后
看看效果吧，如果对显示样式不喜欢，可以自己去下载css源码进行改动。
感谢开发者。
评论