Ich fange gerade mit node.js + express + ejs an. Ich kann nirgends finden, wie man die angeforderte EJS-Datei in die Layout-Datei zieht.Was ist die Layout `Yield` Methode in ejs?
Ich weiß ganz genau, dass yield hier nicht das Richtige ist.
z.B.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
Schließlich fand einige Quellcode für eine ausdrückliche App:
<%- body %>
Ich glaube, ich kann helfen Du bist hier richtig. Ich werde dir eine Erklärung geben.
Das layout.ejs ist wirklich das Layout Sie müssen eine HTML-Site haben, die aus Code-Schnipsel besteht :).
Mein layout.ejs wie folgt 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>
i Sie des Codes eine Erklärung geben. Der "header" -Tag ist mein Wrapper (800x600) mit all meinem Inhalt. Mit dem "Teil" -Befehl können Sie Quellcode-Snippets laden. In meinem Beispiel "topic.ejs" ist mein Themen-Design mit Bildern und Farben, die auf jeder Seite bleiben sollen (man könnte sagen, es ist statisch).
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 meiner topic.ejs umgesetzt hat (wenn Sie folgen Sie dem ersten Quellcode, Sie können es sehen):
"<% - teilweise ('topic.ejs')%>".
Das bedeutet: Hey Layout! Jede Seite hat diesen Teil Code implementiert, verstanden ?! -Gut.
Aber was ist mit dem "<% - Körper%>" -Kommando? Es ist auch leicht zu verstehen. Die app.js wird sich darum kümmern, was <% - body%> genau tun wird. Aber wie es funktioniert, werde ich es später erklären.
Wie Sie wissen sollten, heißt die erste Seite einer HTML-Seite "index.html". Also genau hier sollten wir auch unsere index.html nehmen und sie zu "index.ejs" kompilieren. Verwenden Sie dasselbe Verfahren wie für "topic.ejs". Reduzieren Sie den Quellcode zu den HTML-Tags wie:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
hier aus können Sie einen Blick auf meinem nehmen sollen app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Erläuterung: xyz ein zufälliger Name ist. Wähle selbst einen aus. Dieser Name NOW ist Ihre URL. Versteh das nicht? Schauen Sie sich das Beispiel unten an. Nach dem Start Ihres Servers durch die Ausführung der App.js, dein Server läuft auf einem speziellen Port (Standard 3000, nehme ich an). Ihre übliche URL von index.html sollte "localhost: 3000/index.html" sein. Geben Sie es in die Adressleiste Ihres Browsers ein. Ihre Website sollte angezeigt werden. Jetzt versuchen Sie dies:
localhost: PORT/xyz
Im app.get-Methode vor gezeigt, Sie ausdrücklich sagen, dass Ihre app.js: Hinter dem "/ xyz" -Pfad dasteht die "index.ejs" -Datei. Aber was bedeutet das genau?
Es bedeutet, dass Sie nun "locallhost: PORT/xyz" in Ihre Adressleiste Ihres Browsers eingeben können und der Inhalt Ihrer primal index.html Seite angezeigt wird, aber was Sie sehen, ist der generierte Inhalt von layout.ejs. Magic !
die Logik hinter: (wenn Sie einen Blick auf die layout.ejs wieder)
Mit dem <% - Körper%> befehle dir nur ein Ausschnitt aus Quellcode in Ihr Layout laden Sie einfach dies tun: Nach dem Ausführen Ihrer. Klicken Sie mit der rechten Maustaste darauf und lassen Sie den Quellcode anzeigen. Es sollte ein gewöhnlicher HTML-Quellcode sein. In Wirklichkeit ist es der Quellcode von layout.ejs, der einige Codeschnipsel enthielt.
Alles in einem:
Mit der <% - body%> Befehl in Ihrem Layout.ejs, können Sie in einem Code-Schnipsel laden. <% - Körper%> = "index.ejs", "contact.ejs", und so weiter. Für jede .ejs-Datei müssen Sie die app.js auf ihre "get" -Methode erweitern (Beispiel folgt). Wenn Sie mehr Websites haben (Sie haben natürlich nur eine Website), müssen Sie das Codefragment für die neue Website in eine .ejs-Datei einfügen (z. B .: 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 = "Fenster. location.replace ('contact.html') wird zu dem Namen, den Sie in der App.get-Methode gewählt haben. Zum Beispiel ändert es sich zu onclick = "window.location.replace ('contact')".
Onclick = "window.location.replace ('contact.html')" WIRD ZU Onclick = "window.location.replace ('Kontakt')"
Sie Verbinde einfach mit dem URL-Namen, nicht mit der Datei. App.js wird das jetzt für Sie erledigen :)
Mann, wie konnten sie das in den Dokumenten verpassen? –
Ich hasse es, einen alten Thread aufzurichten, aber seine Antwort liefert keine Erklärung, was auch immer. Wo gehört diese Aussage? Was tut es? Wie benutzt man es im Kontext? Das ist so eine frustrierende Nicht-Antwort und ich sehe nicht, wie es so viele Stimmen hat. – Brian
Die Frage geht davon aus, dass ein Verständnis dessen, was <%= yield %> in anderen Templating-Sprachen wie erb bedeutet. Das ist der Grund, warum es Ups, aber trotzdem, in einem "Layout" gibt, ist der Ort, an dem das "Template" gerendert werden soll, wobei ein Layout als ein Eltern-Template betrachtet werden kann. –