Jak utworzyć spis treści na blogu Jekyll?

Question

Jeśli mam stronę/wpis w Jekyll z nagłówkami, czy możliwe jest automatyczne wygenerowanie spisu treści/konturu do nawigacji? Coś podobnego do głównej treści artykułu z Wikipedii.

Answer 1

To jest zadanie analizujące znaczniki.

W przypadku promocji cenowych jednym z rozszerzeń składni określa Automatic generation of the table of contents:

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

Działa to w Maruku i kramdown.

Answer 2

Zakładam, że masz na myśli listę wszystkich elementów H1, H2 itd. W samej treści? Nie sądzę, żeby Jekyll miał coś wbudowanego, żeby sobie z tym poradzić. Podejrzewam, że najprostszym sposobem jest umożliwienie JavaScriptowi wygenerowania go dla ciebie po renderowaniu strony, używając czegoś podobnego do this jQuery plugin lub jednego z dostępnych many other plugins/snippets.

Answer 3

Możesz użyć tego code przed swoją zawartością.

<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

mam TOC dla Jekyll bloga, który wygląda podobnie jak Wikipedia TOC

Więc wszystkie moje posty Jekyll mają Sekcja spisu treści. Można to zrobić po prostu używając kramdown.

użyć tego kodu wewnątrz swojego posta w którym chcesz wstawić spis treści do stawienia

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

i używać tej CSS projektować je tak jak 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; 
} 

stosować odpowiednie kolory, które pasują do Twojego bloga.

To jest to!

TOC można również wykonać za pomocą jekyll-table-of-contents, w każdym razie powyższa metoda nie działa. Ten używa Jquery i pliku js.

Oto szczegółowy poradnik jak to zrobiłem: Jekyll TOC