Jekyll Table of Contents 常见问题解决方案

Jekyll Table of Contents 常见问题解决方案

jekyll-table-of-contents A simple JavaScript table of contents, designed for Jekyll (or similar) sites. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-table-of-contents

1. 项目基础介绍与主要编程语言

Jekyll Table of Contents 是一个为 Jekyll（或类似）网站设计的简单 JavaScript 表格目录生成器。它能够自动识别页面中的标题，并生成一个嵌套的目录结构，帮助用户快速导航至页面中的不同部分。该项目主要使用 JavaScript 编写，依赖于 jQuery 库。

2. 新手常见问题与解决步骤

问题一：如何将目录添加到我的 Jekyll 网站中？

解决步骤：

1. 在你希望添加目录的模板文件中引用 toc.js 脚本。
2. 在页面的任意位置添加一个 HTML 元素，例如 <div id="toc"></div>，用于显示目录。
3. 确保在 DOM 加载完毕后调用 toc() 函数。可以在你的脚本中这样写：

   $(document).ready(function() {
       $('#toc').toc();
   });
   

问题二：如何使目录与我的 Markdown 文档的标题对应？

解决步骤：

• 如果你使用 redcarpet 作为 Markdown 渲染器，确保启用了 with_toc_data 选项，这样可以为每个标题添加 HTML 锚点：

  markdown: redcarpet
  redcarpet:
    extensions: [with_toc_data]
  

• 如果你使用 rdiscount，启用以下选项以生成目录：

  markdown: rdiscount
  rdiscount:
    extensions: - generate_toc
  

问题三：如何自定义目录的样式？

解决步骤：

• 默认情况下，目录使用 <ol> 标签渲染，你可以通过 CSS 来自定义数字格式。如果你想要使用 <ul> 标签，可以在调用 toc() 函数时传入 listType: 'ul' 选项。
• 如果不希望每个标题旁边显示返回顶部的箭头，可以在调用 toc() 函数时传入 noBackToTopLinks: true 选项。
• 你可以通过添加自定义 CSS 来调整目录的样式，例如对可点击标题的样式进行定义：

  .clickable-header {
    cursor: pointer;
  }
  .clickable-header:hover {
    text-decoration: underline;
  }
  .top-level-header {
    display: inline;
  }
  

jekyll-table-of-contents A simple JavaScript table of contents, designed for Jekyll (or similar) sites. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-table-of-contents