Come creare un sommario al post del blog di Jekyll?

Question

Se ho una pagina/post in Jekyll con intestazioni, è possibile generare automaticamente una tabella di contenuti/struttura per la navigazione? Qualcosa di simile alla questione principale di un articolo di Wikipedia.

Answer 1

Questo è il compito del parser di markup.

In caso di Markdown una delle estensioni di sintassi definisce Automatic generation of the table of contents:

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

Questo funziona in Maruku e kramdown.

Answer 2

Suppongo che intendi un elenco di tutti gli elementi H1, H2 ecc nel contenuto stesso? Non penso che Jekyll abbia qualcosa di integrato per gestirlo. Sospetto che il modo più semplice sia quello di consentire a Javascript di generarlo per te una volta che la pagina è stata renderizzata, utilizzando qualcosa come this jQuery plugin o uno degli many other plugins/snippets disponibili.

Answer 3

è possibile utilizzare questo code prima del contenuto.

<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

devo TOC per Jekyll blog che sembra simile a Wikipedia TOC

Così tutti i miei post Jekyll hanno una sezione del sommario. Può essere fatto semplicemente usando kramdown.

Usa questo codice all'interno del vostro post in cui si desidera che il TOC appaia

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

E utilizzare questa CSS per lo stile è come 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; 
} 

Utilizzare colori appropriati che soddisfare il vostro blog.

Questo è tutto!

TOC può anche essere fatto con l'aiuto di jekyll-table-of-contents, se in ogni caso il metodo di cui sopra non funziona. Questo usa Jquery e un file js.

Ecco la guida dettagliata su come ho fatto: Jekyll TOC