2013-01-01 13 views
22

Vorrei apportare alcune modifiche al layout di Jekyll. Le modifiche sono piccole e diverse. Ad esempio, collegando un file CSS o JavaScript aggiuntivo. O aggiungendo alcune informazioni nell'intestazione. O intestazione del titolo della pagina. Importante che queste modifiche dipendono da una pagina/post.Come ottimizzare il layout di una particolare pagina/post in Jekyll?

Poiché le modifiche sono piccole e diverse, la creazione di un layout speciale per ciascuna di esse sembra troppo costosa.

Ho provato a creare la mia soluzione, ma ho eseguito impossibility to use variables in including instructions.

Qualcuno ha risolto qualcosa di simile? Ad esempio, collegare un CSS speciale a un particolare post?

+0

BTW, fino alla versione [1.3.0] (http://jekyllrb.com/docs/history/#130__20131104) di Jekyll ora è possibile utilizzare le variabili in include - '{% include {{variable}}% } ':) – kizu

risposta

36

È possibile utilizzare YAML front matter per regolare tutto ciò che si desidera per qualsiasi post/pagina. Qualsiasi informazione fornita dall'utente sarebbe accessibile attraverso i layout e include la variabile page o sotto un post specifico in qualsiasi elenco di essi.

questo suona come una soluzione per il vostro caso: si potrebbe usare avantesto YAML come questo:

--- 
extra_css: 
    - foo.css 
    - dir/bar.css 
    - /s/baz.css 
--- 

E quindi utilizzare questo nel colpo di testa di layout come questo:

{% for css_name in page.extra_css %} 
    <link rel="stylesheet" href="{{ css_name }}"> 
{% endfor %} 

In tal modo è possibile aggiungere qualsiasi logica in base ai dati forniti con un post in materia di contenuti YAML.

Se si desidera astrarre alcuni di questi elementi logici per i moduli, è possibile utilizzare un trucco attorno agli include, assegnando una variabile prima di includerla e quindi utilizzarla all'interno. Here is a link con una descrizione di come è stato realizzato nel progetto Jekyll Bootstrap (btw, il sito per questo ha molte belle informazioni su Jekyll).

E, sì, Jekyll non consente l'uso di variabili in include, quindi se desideri includere qualcosa in modo condizionale, avrai bisogno di un elenco di tutti gli include disponibili da qualche parte e quindi creerai tutte le condizioni per l'inserimento di uno o un altro quando ne avrai bisogno.


Un'altra soluzione è quella di dividere tutto in layout include, e fare layout con diversi livelli di complessità - in questo modo è possibile impostare uno qualsiasi di questi layout di base per la posta e poi scrivere alcun codice in più con include di eventuali blocchi avrete bisogno dei layout di base, in modo da post potrebbe assomigliare a questo:

--- 
layout: custom 
--- 
<aside class="sidebar"> 
    {% include comments.html %} 
    {% include sidebar.html %} 
</aside> 
<div class="content" role="main"> 
    Foo bar baz 
</div> 

ci si potrebbe utilizzare un layout personalizzato che non includono un layout di base per la pagina e non includono la barra laterale e commenti , così puoi decidere per post quale livello di layout vuoi e quindi ridefinire tutto ciò che deve essere ridefinito.

Inoltre, se è necessario modificare luoghi diversi, ma con un contenuto sconosciuto, è possibile utilizzare avantesto YAML con i blocchi, come

extra_head: | 
    <style> 
    * {background: red} 
    </style> 

allora si potrebbe chiamare tale variabile da capo: {{ page.extra_head }} e ottenere qualsiasi contenuto che hai inserito lì. Tuttavia, non è possibile utilizzare tag liquidi all'interno di YAML, ma è possibile utilizzare qualsiasi tag YAML su tali variabili, in modo da poterli markdownificare o sostituire qualsiasi stringa all'interno con qualsiasi altra cosa tramite un semplice filtro di sostituzione.

E se non c'è nulla di adatto a te, allora Jekyll non ti andrà bene - come ho scritto in un commento, Jekyll è solo un motore di blog e non dovresti aspettare che sia complesso come XSLT.

+0

Il collegamento di un CSS aggiuntivo è solo un esempio. Come ho detto, ci sono molti cambiamenti e sono diversi. Non posso prevederli da prendere in considerazione nei modelli. Ma mi piacerebbe che ogni post/pagina fosse in grado di cambiare un po 'il layout. –

+2

Bene, il tuo bisogno è quindi fuori dalla portata di Jekyll, se non puoi prevedere quali posti modificare o non puoi aggiungere la logica necessaria ai layout per i nuovi post, allora Jekyll non ti andrà bene - è solo un comodo blog statico motore che può essere espanso _a bit_. E quello di cui hai bisogno è una soluzione configurabile complessa. Tuttavia, dubito che ce ne siano allo stesso tempo e quanto Jekyll sia per i blog. Quindi, se hai bisogno di entrambi, ti raccomando di dimenticare il layout di sintonizzazione sintonizzando il post da solo e apportando le modifiche appropriate ai layout ogni volta che hai bisogno di qualcosa di diverso. – kizu

+0

C'è un modo per gestire inline js o css? – JCarlos

0

Ho mai provato a creare una pagina indipendente nel sito statico jekyll-bootstrap. Ad esempio my_cv.html che richiede uno stile CSS indipendente. Invece di creare un nuovo repository github con gh-pages (mi dispiace GitHub), semplicemente riempio tutti i contenuti html finali nel post my_cv.md dal momento che il formato markdown è effettivamente compatibile con html Penso, e fortunatamente funziona.

Problemi correlati