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

Question

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

Answer 1

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

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

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

Это работает в Маруку и Крамдауне.

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

<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

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

Answer 6

Все эти указанные методы у меня не работали для блога страниц GitHub, также я хотел просто использовать жидкость для этой цели.

Вот подробное описание.

Как добавить toc в блоге Jekyll

Вот как это выглядит.