Question

如果我在Jekyll中有标题的页面/帖子，是否可以自动生成目录/大纲以进行导航？类似于维基百科文章的最重要的事情。

Answer 1

这是标记解析器的任务。

在Markdown的情况下，其中一个语法扩展定义了Automatic generation of the table of contents：

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

这适用于Maruku和kramdown。

Answer 2

我有Jekyll博客的TOC，看起来类似于维基百科TOC

所以我所有的Jekyll帖子都有一个目录部分。它可以使用kramdown完成。

在您希望TOC出现的帖子中使用此代码

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

并使用此CSS来设置它像Wikipedia TOC

// 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;
}

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

就是这样！

TOC也可以在jekyll-table-of-contents的帮助下完成，如果在任何情况下上述方法都不起作用。这个使用Jquery和一个js文件。

以下是我如何做到的详细指南：Jekyll TOC

Answer 3

我假设你的意思是内容本身中所有H1，H2元素等的列表？我不认为Jekyll有任何内置处理它。我怀疑最简单的方法是让页面渲染后让Javascript为您生成，使用this jQuery plugin或many other plugins/snippets可用的其中一个。

Answer 4

您可以在内容之前使用此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>

Answer 5

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

下载最新的toc.html文件（警告！应为原始文件）
将此文件复制到_includes文件夹。
在{{content}}之前添加此行：{％include toc.html html = content％}

Answer 6

对于GitHub页面博客，指定的所有这些方法均不适用于我，我也想仅出于目的使用液体。

这是详细说明。

How to add toc in Jekyll blog

这是它的外观。

如何为Jekyll博客帖子创建目录？

6 个答案: