Was ist der layout - `Ertrag` - Methode in der ejs?

Ich bin gerade erst mit node.js + express + ejs. Ich kann nirgendwo finden, wie Sie ziehen in der gewünschten ejs Datei in der layout-Datei.

Ich weiß sehr wohl, dass yield ist nicht das richtige hier.

z.B.

layout.ejs

<html>
<head><title>EJS Layout</title></head>
<body>
    <%= yield %>
</body>
</html>

index.ejs

<p>Hi</p>
InformationsquelleAutor Ryan Florence | 2010-10-15
  1. 42

    Endlich gefunden, einige source-code für einen express-app:

    <%- body %>
    • Mann, wie konnten Sie das übersehen, dass in den docs?
    • Hasse zu bringen, bis ein Alter thread, aber seine Antwort liefert keine Erklärung, whatsover. Wo kommt diese Aussage gehört? Was tut es? Wie verwenden Sie es im Kontext? Das ist auch so eine frustrierende nicht-Antwort, und ich weiß nicht, wie es hat so viele Stimmen.
    • Die Frage geht von einem Verständnis von dem, was <%= yield %> bedeutet in anderen Template-Sprachen wie erb. Das ist, warum seine erste upvotes, aber wie auch immer, die Ausbeute in einem "layout" ist der Speicherort, in dem Sie wollen, dass die "Vorlage" zu machen, wo ein layout gedacht werden kann als eine übergeordnete Vorlage.
    • Es ist nicht in der ejs docs, weil es nicht eine ejs-Funktion. Layouts Hinzugefügt werden, per express, so dass Sie die gleiche Arbeit mit jedem Motor.
    InformationsquelleAutor Ryan Florence
  2. 12

    Ich denke, ich kann Ihnen helfen, aus rigth hier. Ich gebe Ihnen einige Erklärungen.

    Layout.ejs ist wirklich das layout u brauchen, um eine HTML-Seite, erstellt der code-Schnipsel :).

    Meine layout.ejs aussieht:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title><%- title %></title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>

<body>
    <!-- total container -->
    <header>

        <%- partial('topic.ejs') %>

        <%- body %>
     </header>
</body>
</html>

    ich gebe Ihnen eine Erklärung des Codes. Die "header"-Tags wird mein wrapper(800x600) mit all meiner Inhalte. Mit der "partial"-Befehl können Sie Last-Schnipsel sourcecode. In meinem unter anderem "Thema.ejs" ist mein Thema-design mit Bildern und Farben, die bleiben sollte, die auf jeder Seite (man könnte sagen, es ist statisch).


    Sourcecode von Thema.ejs: (es ist wirklich nur html-tags, beginnt mit einem div-Element und endet mit einem :P)

    <!-- frame of topic -->
<div id="topic">
    ...
</div> <!-- end of "topic" -->

    Nun auf jeder Seite implementiert hat, mein Thema.ejs (wenn Sie Folgen Sie den ersten Quelltext, man kann es sehen):
    "<%- teilweise('Thema.ejs') %>".

    Dies bedeutet: Hey Layout! Jede Seite hat diese teilweise der code implementiert wird, habe?! -Gut.

    Aber was ist mit den "<% Körper %>"-Befehl?
    Es ist einfach gut zu verstehen. Die app.js wird kümmern, was <% Körper %> genau das tun wird. Aber wie Es funktioniert, ich werde es später erklären.

    Wie Sie wissen sollten, ist die erste Seite einer HTML-Seite mit der Bezeichnung "index.html". Also genau hier, wir sollten unsere index.html zu und kompilieren Sie es in "index.ejs". Verwenden Sie die gleiche Vorgehensweise wie für "Thema.ejs". Reduzieren Sie den Quellcode, um die html-tags wie:

    <!-- frame of MetaContent -->
<div id="metacontent">
    ...
</div> <!-- end of "MetaContent" -->


    Von hier aus sollten Sie einen Blick auf meine app.js:

    app.get('/xyz', function(req, res){
    res.render('index.ejs', { title: 'My Site' });
});

    Erklärung: xyz ist ein zufälliger name. Wählen Sie selbst einer. Dieser name ist JETZT deine URL. Don ' T get it? Schauen Sie das Beispiel unten. Nach dem starten Sie Ihren server durch die Ausführung von app.js der server läuft auf eine vor allem den port(Standard 3000 glaube ich). Ihre übliche URL index.html sollte "localhost:3000/index.html". Geben Sie in die Adresszeile Ihres Browsers ein. Ihrer Website angezeigt werden soll. Nun versuchen Sie dies:

    localhost:PORT/xyz

    In der app.get-methode gezeigt, bevor Sie explizit sagen, dass Ihre app.js: Hinter dem "/xyz"-Pfad, da steht die "index.ejs"-Datei. Aber was bedeutet das genau bedeutet?

    Es heißt, Sie können jetzt geben Sie "locallhost:PORT/xyz in Ihre Adresszeile Ihres Browsers und dem Inhalt Ihrer ur-index.html Website wird angezeigt, aber was Sie sehen, ist der generierte Inhalt von layout.ejs. Magic!

    Die Logik dahinter: (nehmen Sie einen Blick auf das layout.ejs wieder)

    Mit dem <% Körper %> Befehl laden Sie in Ihr layout nur ein Ausschnitt des Quellcodes. Genau dies tun: Nach ausführen der Seite mit der rechten Maustaste auf es und lassen Sie den source-code. Es sollte eine übliche HTML-Quellcode. In real ist es der sourcecode von Ihrem layout.ejs, das dauerte einige Ausschnitte des Codes.

    All in one:

    Mit dem <% Körper %> Befehl in Ihrem layout.ejs, können Sie laden Sie in ein code-snippet. <% Körper %> = "index.ejs", "Kontakt.ejs", und so weiter. Für jede .ejs-Datei, die Sie brauchen, zu erweitern app.js seine "get"-methode(Beispiel folgt). Wenn Sie mehr Seiten (natürlich dich nicht nur eine Website haben), müssen Sie das code-snippet für die neue Website in ein .ejs-Datei (z.B.: contact.html => Kontakt.ejs). Sie müssen auch zu erweitern, Ihre app.js die Datei zu diesem:

    app.get('/contact', function(req, res){
        res.render('contact.ejs', { title: 'My Site' });
    });

    ODER

    app.get('/xyz/contact', function(req, res){
        res.render('contact.ejs', { title: 'My Site' });
    });


    Und vergessen Sie nicht, ändern Sie links in der .ejs-Dateien:
    onclick="Fenster.Lage.ersetzen('contact.html')" wird der name, den Sie wählte in der app.get-methode. Zum Beispiel, dass es änderungen onclick="window.Lage.replace('Kontakt')".

    onclick="window.Lage.replace('contact.html')" WIRD AUF
    onclick="Fenster.Lage.replace('Kontakt')"

    Tun Sie nur link, um den Namen der URL, nicht die Datei. App.js behandelt diese nun für Euch 🙂

    InformationsquelleAutor D. Ace
Schreibe einen Kommentar