如何在Jekyll博客文章中创建目录？

Question

如果我在Jekyll中有一个带标题的页面/文章，是否可以自动生成导航用的目录/大纲？类似于维基百科文章的上方素材。

- Zando

Answer 1

这是标记解析器的任务。

对于Markdown语法，其中一个语法扩展定义了“自动生成目录”的功能：Automatic generation of the table of contents：

* This will become a table of contents (this text will be scrapped).
{:toc}

这在Maruku和kramdown中有效。

- manatwork

---

好的，它可以工作，但只有在Markdown文件中有H1标题的情况下才能正常运行，根据这个链接：http://webiva.lighthouseapp.com/projects/38599/tickets/5-maruku-table-of-contents-not-generating-without-extra-h1-tag - jjmerelo

有趣的限制，@jjmerelo。我从未遇到过它。感谢您提供的信息。 - manatwork

我也尝试在kramdown中使用它，但问题出在别处：如果在文本中发现mailto: URL，它会崩溃并显示大量消息。除此之外，它应该可以正常工作。 - jjmerelo

在kramdown 1.3.1中无法工作，并且在http://kramdown.gettalong.org/上找不到此选项的文档。 - Ciro Santilli OurBigBook.com

@CiroSantilli 这里有文档记录（http://kramdown.gettalong.org/converter/html.html#toc）。_"只需使用IAL将引用名称“toc”分配给有序或无序列表，列表将被替换为实际的目录。"_ 注意：仅在您想要目录的位置放置{:toc}是不够的。{:toc}必须立即放置在列表项之后。 - TachyonVortex

Answer 2

我在我的Jekyll博客上有一个类似于维基百科目录的TOC。

因此，我的所有Jekyll文章都有一个目录部分。只需使用kramdown即可实现。

将此代码放入您的文章中，您希望TOC出现的位置。

* Do not remove this line (it will not be displayed)
{:toc}

并使用这个CSS将其样式设置为类似于维基百科的目录

// Adding 'Contents' headline to the TOC
#markdown-toc::before {
    content: "Contents";
    font-weight: bold;
}


// Using numbers instead of bullets for listing
#markdown-toc ul {
    list-style: decimal;
}

#markdown-toc {
    border: 1px solid #aaa;
    padding: 1.5em;
    list-style: decimal;
    display: inline-block;
}

使用适合您博客的合适颜色。

就是这样！

如果上述方法不起作用，也可以使用jekyll-table-of-contents进行目录制作。该方法使用Jquery和一个js文件。

这是我制作目录的详细指南：Jekyll TOC

- Sharath kumar

---

我尝试进行一些语法高亮，但无法使其正常工作。我已经使用 pip 安装了 Pygments。 - redeemefy

是否可以仅从h2到h4限制TOC生成？ - lordparthurnaax

Kramdown 可以使用这些选项进行控制。查找 "toc_levels"。 - Sharath kumar

我发现控制 kramdown 中目录级别最简单的方法是通过在目标标题下一行放置{:.no_toc}来关闭特定的标题。这就是我在此处找到的这些说明。链接 - Stackstudent_09

Answer 3

https://github.com/allejo/jekyll-toc提供了一种非常简单的方法来为您的jekyll页面添加目录。

1. 下载最新的toc.html文件（注意！应该是原始文件）
2. 将此文件复制到_includes文件夹中。
3. 在{{content}}之前添加此行：{% include toc.html html=content %}

- greentec

Answer 4

我猜你是指内容中所有H1、H2元素等的列表？我认为Jekyll没有内置处理这个的功能。我怀疑最简单的方法是让Javascript在页面渲染后为您生成它，使用类似这个jQuery插件或其他许多可用的插件/片段之类的东西。

- Jon M

Answer 5

在您的内容之前，您可以使用code。

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.2/styles/googlecode.min.css">

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
 $(document).ready(function(){
      $("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
      });
 });
</script>
<div id="category"></div>

- xiaoyu2er

Answer 6

所有这些指定的方法对于我的GitHub页面博客都没有起作用，而且我想简单地使用liquid来实现目的。

以下是详细说明。

如何在Jekyll博客中添加toc

这是它的外观。

- ranvir