2017-12-18 15 views
0

Ich benutze Lenker für ein einfaches Node.js Projekt und ich möchte mehr als nur paar Variablen in einem Teil einfügen.Wie HTML-Block in Lenker Teiltöne einfügen

Ich habe eine layout, die den sehr grundlegenden Rahmen meiner HTML-Seite enthält (html und head Tags). Die Seiten, die ich machen sind in der Regel alle gleich und enthalten den folgenden Code:

{{> default/header 
    help_title="This is the title of my help modal." 
    help_body="<p>This is the body.</p>" 
}} 

<main class="vertical-center"> 
    <div class="container-fluid"> 
    <div class="row justify-content-center"> 
     <div class="col-12 col-lg-8 justify-content-center align-items-center"> 
     <!-- THE CONTENT THERE --> 
     </div> 
    </div> 
    </div> 
</main> 

{{> default/footer}} 

auf der Seite Je selbst kann ich will nicht die Kopf- und/oder Fußzeile angezeigt werden (und ich entfernen Sie die Zeile folglich).

Mein Bedürfnis: Ich mag den main Teil in einem teilweise umwickeln (weil alles, aber die <!-- THE CONTENT THERE --> ist unveränderlich) oder was auch immer die Arbeit machen könnte und die Bereitstellung es nicht nur wenige Worte (wie in der Kopfzeile) aber möglicherweise viel HTML-Code. Und ich finde keinen Weg, dies in der Dokumentation zu tun. So etwas wie dies, das wäre im Grunde ein bisschen wie Layouts arbeiten:

{{> default/main 
    <!-- THE RAW HTML CONTENT THERE --> 
}} 

Antwort

1

Lenker unterstützt genau, was Sie in Form von partial blocks beschreiben. Das Standardverhalten von Teilblöcken besteht darin, den Standardinhalt zu rendern, wenn das Teil nicht gefunden werden kann. Es gibt jedoch einen speziellen integrierten Helfer, @partial-block der Inhalt in Ihr Teil injizieren wird.

Aus der Dokumentation:

Dieser Block Syntax kann auch verwendet werden Vorlagen auf die teilweise weitergeben, die teilweise durch die speziell benannte ausgeführt werden können, @partial-block.

In Ihrem Teil fügen Sie {{> @partial-block }} hinzu, wo der Inhalt eingefügt werden soll. In Ihrem Fall Ihr „Haupt“ Teil würde wie folgt aussehen:

<main class="vertical-center"> 
    <div class="container-fluid"> 
     <div class="row justify-content-center"> 
      <div class="col-12 col-lg-8 justify-content-center align-items-center"> 
       {{> @partial-block }} 
      </div> 
     </div> 
    </div> 
</main> 

Dann die Seite, die den „main“ Teil ruft tun würde, um die Block-Syntax mit dem Inhalt verwenden, die in den Teil Put einzuspritzen ist innerhalb des Blocks tags:

{{#> main}} 
    <p>THE RAW HTML CONTENT HERE</p> 
{{/main}} 

ich habe eine fiddle für Ihre Referenz erstellt.

+0

Vielen Dank für Ihre Antwort @ 76484! – Gab

Verwandte Themen