Jade-Vorlagen, Hinzufügen zu einem Kopf nach dem Erweitern einer Vorlage

Question

Ich versuche, Jade/Express zu lernen, indem ich eine kleine Web-App erstelle, die Canvas verwendet, um Benutzerdaten grafisch darzustellen.

Momentan werfe ich nur eine Jade-Vorlage zusammen, ich habe eine vorherige Vorlage erweitert (eine, die ich layout.jade nenne), die allgemeine Ressourcen enthält, die auf fast allen Seiten verwendet werden.

Mein Problem ist, dass ich die Vorlage erweitern möchte, dann etwas am Kopfbereich für nur diese Seite und nicht andere ändern. Ich habe eine Weile damit gespielt und recherchiert, kann aber keine spezifischen Informationen darüber finden.

Hier ist, was ich habe

layout.jade 
!!! 5 
html 
    head 
     title EZgraph 
     link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css') 
     link(rel='stylesheet', href='stylesheets/ezgraph.css') 
    body 
    block content 
    block scripts 

Und hier ist die Vorlage Ich arbeite an

extends layout 

head 
    link(rel='stylesheet', href='stylesheets/barchartentry.css') 

Ist es möglich, so etwas zu tun? Intuitiv scheint es mir so, als müsste es sein, aber ich vermisse einfach den Mechanismus dafür.

Answer 1

Ich komme gerade in dieser Episode einer Screencast-Serie, die ich mache, genau in dieses Thema. Hier ist ein Link dazu: http://www.learnallthenodes.com/episodes/10-more-advanced-jade.

Aber wenn Sie lieber nur die Antwort haben, lesen Sie weiter. Sie können mehr als einen Block in Ihren Vorlagendateien verwenden. In Ihrem Fall könnten Sie so etwas wie dies aussehen layout.jade:

layout.jade 
!!! 5 
html 
    head 
     title EZgraph 
     link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css') 
     link(rel='stylesheet', href='stylesheets/ezgraph.css') 
     block extraHeader 
    body 
     block content 
     block scripts 

Und dann Ihre Template-Datei:

extends layout 

block extraHeader 
    link(rel='stylesheet', href='stylesheets/barchartentry.css') 

Beachten Sie die passende extraHeader Block Anrufe sowohl im Layout und der Vorlage. Das sollte dich in Schwung bringen.

Wenn Sie aus mehreren Vorlagendateien im selben Rendering Inhalte zu extraHeader hinzufügen mussten, können Sie block append extraHeader oder die knappere append extraHeader verwenden. Es gibt auch eine prepend Variante, wenn der zusätzliche Inhalt am Anfang erscheinen soll.

Edit: einige Einrückung behoben. Auch habe ich block content und block scripts eingerückt, damit sie Kinder von body wären. Schließlich, obwohl das block extraHeaderwird dort bei jedem Aufruf Ihres Layouts sein, es sei denn, Ihre Vorlage gibt es Inhalt, um dort zu setzen, wird es nichts anderes injizieren, die Ihren Anforderungen entspricht, wie ich sie verstehe.