Was ist das Layout `yield` Methode in ejs?

StackOverflow https://stackoverflow.com/questions/3943188

  •  30-09-2019
  •  | 
  •  

Frage

Ich fange gerade mit node.js + + ejs auszudrücken. Ich kann nicht überall finden, wie in der gewünschten EJS-Datei in die Layout-Datei zu ziehen.

Ich weiß ganz genau, dass yield ist nicht das Richtige hier.

z.

layout.ejs 

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

index.ejs 

<p>Hi</p>
War es hilfreich?

Lösung

Schließlich fand einige Quellcode für eine ausdrückliche App: 

<%- body %>

Andere Tipps

Ich glaube, ich kann Ihnen helfen, rigth hier. Ich gebe Ihnen eine Erklärung.

Die layout.ejs ist wirklich das Layout u brauchen eine HTML-Seite zu haben, der Code-Schnipsel, gebaut aus.)

Sie layout.ejs sieht aus wie: 

<!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>

i finden Sie eine Erklärung des Codes geben. Die „header“ -tag meine Wrapper (800x600) mit allen meinen Inhalt. Mit der „teilweise“ -Kommando Sie Auszüge Quellcode laden können. In meinem examle „topic.ejs“ ist mein Thema-Design mit Bildern und Farben, die auf jeder Seite bleiben sollten (könnte man es statische sagen).
Sourcecode von topic.ejs : (es ist wirklich nur HTML-Tags, beginnt mit einem div und endet mit einem: P) 

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

Jetzt jede Seite hat meinen topic.ejs umgesetzt (wenn Sie den ersten Sourcecode folgen, können Sie sie sehen).
„<% - teilweise (‚topic.ejs‘)%>“
Das bedeutet: Hey Layout! Jede Seite hat diese teilweise von Code implementiert, es hat ?! -Gut.

Aber was ist mit dem " <% - Körper%> " - Befehl? Es ist leicht, als gut zu verstehen. Die app.js wird interessieren, was <% - Körper%> genau tun wird. Aber wie es der Fall ist, werde ich es erklären später.
Wie Sie wissen sollten, wird die erste Seite einer HTML-Seite „index.html“ genannt. Also hier sollten wir unsere index.html nehmen und kompilieren Sie es auf „ index.ejs “. Verwenden Sie die gleiche Vorgehensweise wie bei „topic.ejs“. Reduzieren Sie den Quellcode zu den HTML-Tags wie: 

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


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

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

Erläuterung: xyz ist ein zufälliger Name. Wählen Sie selbst eine Beurteilung. Dieser Name ist jetzt Ihre URL. Versteht es nicht? Schauen Beispiel unten. Ihr Server durch die Ausführung von app.js, dem Server läuft auf einem besonders Port (Standard 3000 i guess) Nach dem Start. Ihre übliche URL index.html sollte "localhost: 3000 / index.html" sein. Geben Sie in der Adressleiste Ihres Browsers. Ihre Website sollte angezeigt werden. Nun versuchen Sie dies:

  

localhost: PORT / xyz

In der app.get-Methode vor gezeigt, Sie explizit sagen, dass Ihre app.js: Hinter dem „/ xyz“ -Pfad steht die „index.ejs“ -Datei. Aber was bedeutet das genau bedeutet?
Es bedeutet, dass Sie jetzt eingeben können „locallhost:.! PORT / xyz in die Adresszeile Ihres Browsers und den Inhalt Ihrer ursprünglichen index.html Website gezeigt werden wird, aber was Sie sehen, ist der erzeugte Inhalt layout.ejs Magie < br> Die Logik dahinter: (wenn Sie einen Blick auf die layout.ejs wieder nehmen)
Mit dem <% - Körper%> Befehl laden Sie in Ihr Layout nur ein Ausschnitt aus Quelltext ein. Genau dies tun: Nach Ihrer Website ausgeführt wird, mit der rechten Maustaste darauf und lassen Sie die Quelle-Code zeigen. Es sollte ein üblicher HTML-Quellcode sein. In real ist es der Quellcode Ihrer layout.ejs, die einige Schnipsel des Codes hat.
Alles in einem:
Mit dem <% - Körper%> Befehl in Ihrem layout.ejs, können Sie in einem Code-Snippet laden. <% - Körper%> = "index.ejs", "contact.ejs", und so weiter. Für jede .ejs Datei, müssen Sie die app.js seiner „get“ -methode (Beispiel folgt) erweitern. Wenn Sie mehr Seiten haben (natürlich nur Sie haben nicht eine Seite), müssen Sie den Code-Snippet für den neuen Standort in eine .ejs Datei setzen (z .: contact.html => contact.ejs). Sie müssen auch Ihre app.js Datei auf diese erweitern: 

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 die Links in den .ejs-Dateien zu ändern: Onclick = "window.location.replace ( 'contact.html')" wird auf den Namen, den Sie in der app.get-Methode gewählt haben. Zum Beispiel ändert es auf Onclick = "window.location.replace ( 'Kontakt')."

  

Onclick = "window.location.replace ( ' contact.html ')" WIRD ZU   Onclick = "window.location.replace ( ' Kontakt ')"

Sie tun nur Link zu dem URL-Namen, nicht in die Datei. App.js wird dies für Sie jetzt behandeln:)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top