主题通过outline.js生成文章目录

XiaoA

发布于 2024-07-22 13:52:27

160

发布于 2024-07-22 13:52:27

文章被收录于专栏：偷得浮生半日闲

发现很多主题的文章页面都有文章导读目录，感觉很有意思，也想给自己的主题加一个。

寻找

有现成的轮子肯定不用重复去造，在主题本来就用了JQuery的情况下，肯定优先使用JQuery的插件。 ChatGPT给推荐了几个：

tocbot
jquery-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: ''
    });
}