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

Ответ 1

Это задача парсера разметки.

В случае Markdown одно из расширений синтаксиса определяет Автоматическое создание оглавления:

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

Это работает в Maruku и kramdown.

Ответ 2

У меня есть TOC для блога Jekyll, который похож на Wikipedia 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

Ответ 3

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

Ответ 4

вы можете использовать этот код перед своим содержимым.

<link rel="stylesheet" href="#" onclick="location.href='http://yandex.st/highlightjs/6.2/styles/googlecode.min.css'; return false;">

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