2014-12-22 7 views
6

Voglio introdurre collegamenti hash ai titoli di una pagina nel menu di una pagina web. La pagina Web viene generato con Jekyll ed è il layout di default appare come segue:Jekyll: posiziona il sommario del kramdown in un _include per la navigazione hash

<!DOCTYPE html> 
<html> 

    {% include head.html %} 

    <body> 

    {% include header.html %} 

    <div id="BigFatContainer"> 
     {{ content }} 
     {% include footer.html %} 
    </div> 
    </body> 
</html> 

È nell'intestazione che si trova il menu per la navigazione verso le diverse pagine. Sono stato in grado di aggiungere una tabella di contenuti al {{ content }} con l'aiuto del seguente comando Kramdown:

* Point at which the TOC is attached 
{:toc} 

Si potrebbe usare un po 'brutto JavaScript hack per spostare questa tabella dei contenuti dal {{ content }} e in header.html ma sarebbe una brutta soluzione. Non è possibile posizionare la macro {:toc} all'interno di header.html poiché non viene analizzata da Kramdown e, anche se si assicura che sia analizzata da Kramdown utilizzando per esempio il plugin this, emette il TOC di header.md invece del sommario per il contenuto.

risposta

0

@ Miroslav-Nedyalkov era sulla strada giusta qui. Seguendo il suo suggerimento di guardare la documentazione Bootstrap, ho scoperto che utilizza un Ruby Gem - jekyll-toc che consente di posizionare un sommario ovunque in un file di layout. Lo abiliti nella materia anteriore. Ora sto utilizzando con successo:

<nav aria-label="Table of Contents"> 
    {{ content | toc_only }} 
</nav> 

<section itemprop="articleBody"> 
    {{ content }} 
</section> 
-3

Perché spostare il blocco toc?

Questo è corretto per dire che questo toc è parte del contenuto della pagina. Semanticamente parlando.

Il problema qui non è a livello di struttura del documento ma a livello di presentazione.

In questo caso si consiglia l'uso di CSS per risolvere il problema.

+0

Immaginate lunga documentazione o vedere [questo] progetto (http://jcdesign.se/) per capire come si può fare perfettamente senso per avere il '' 'TOC''' nella struttura del menu del tuo documento. – Rovanion

+0

Mantengo la mia posizione sull'architettura delle informazioni. Il sito menzionato non combina una navigazione principale con la navigazione in pagina: è un sito a pagina singola. –

+0

Grazie per il downvote. È davvero costruttivo. –

0

Io suggerirei di utilizzare l'approccio Bootstrap website (scorrere verso il basso e osservare l'area di navigazione corretta) sta usando - rendere il TOC come parte dell'area del contenuto, ma modificarlo in modo che sia posizionato sul lato come la navigazione principale. Il motivo principale per cui ti sto suggerendo questo approccio è che potresti (e molto probabilmente lo faranno) avere più di una pagina. In questo caso sarà necessario visualizzare una navigazione di pagina diversa per ogni pagina e visualizzare una navigazione tra le pagine.

Per maggiori informazioni si può fare riferimento a questo articolo - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/

+1

Sono d'accordo, TOC è parte del contenuto della pagina, non della navigazione principale. –

+0

Non si rivolge all'obiettivo primario dei PO, che è quello di spostare il sommario fuori da '{{content}}'. –

Problemi correlati