Как создать оглавление в блоге Jekyll?

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

Я предполагаю, что вы имеете в виду список всех элементов H1, H2 и т. Д. В самом содержимом? Я не думаю, что у Джекила есть что-то встроенное, чтобы справиться с этим. Я подозреваю, что самый простой способ - дать Javascript сгенерировать его для вас, как только страница отобразится, используя что-то вроде this jQuery plugin или один из доступных many other plugins/snippets.

Answer 3

вы можете использовать этот 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 4

У меня есть ТОС для Джекилл блог, который похож на Википедию ТОС

Так что все мои Джекиллы постов имеют оглавление раздела. Это можно сделать только с помощью kramdown.

Используйте этот код в ваш пост, где вы хотите TOC появляться

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

И использовать этот CSS стиль его, как Wikipedia ТОС

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