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

Question

Если у меня есть страница / сообщение в Jekyll с заголовками, можно ли автоматически сгенерировать оглавление / схему для навигации? Что-то похожее на главное из статьи в Википедии.

Answer 1

Это задача анализатора разметки.

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

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

Это работает в Маруку и kramdown .

Answer 2

У меня есть оглавление для блога Jekyll, похожее на оглавление Википедии

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

Используйте этот код внутри своего поста, где вы хотите, чтобы отображалось оглавление

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

И используйте этот CSS для стилизации его, как википедия *1001*

// 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-оглавление , если в любом случае вышеметод не работает.Этот использует Jquery и js-файл.

Вот подробное руководство о том, как я это сделал: Jekyll TOC

Answer 3

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

<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

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

Answer 5

https://github.com/allejo/jekyll-toc предоставляет очень простой способ добавить оглавление на страницу Jekyll.

1. Загрузите последний файл toc.html (будьте осторожны! Это должен быть необработанный файл)
2. скопируйте этот файл в папку _includes.
3. добавить эту строку перед {{content}}: {% include toc.html html = content%}