Sto appena iniziando con node.js + express + ejs. Non riesco a trovare da nessuna parte come inserire il file ejs richiesto nel file di layout.Qual è il metodo `yield` del layout in ejs?
So perfettamente che yield non è la cosa giusta qui.
ad es.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
finalmente trovato un po 'di codice sorgente per un app espresso:
<%- body %>
Credo di poter aiutare sei fuori qui. Ti darò qualche spiegazione.
Il layout.ejs è davvero il layout necessario per avere un sito HTML, costruito con frammenti di codice :).
miei layout.ejs assomiglia:
<!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>
vi darò una spiegazione del codice. Il "header" -tag è il mio wrapper (800x600) con tutti i miei contenuti. Con il comando "parziale" puoi caricare snippet di codice sorgente. Nel mio esempio "topic.ejs" è il mio topic-design con immagini e colori che dovrebbero rimanere su ogni pagina (si potrebbe dire che è statico).
Sourcecode di topic.ejs: (E 'davvero solo html-tag, inizia con un div e si conclude con un: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Ora ogni pagina ha implementato i miei topic.ejs (se si segui il primo codice sorgente, puoi vederlo):
"<% - partial ('topic.ejs')%>".
Ciò significa: Hey Layout! Ogni pagina ha implementato questo codice parziale, capito ?! -Buona.
Ma per quanto riguarda il "<% - corpo%>" -command? È anche facile da capire. L'app.js si preoccuperà di cosa farà esattamente lo <% - body%>. Ma come funziona, lo spiegherò più tardi.
Come dovresti sapere, la prima pagina di una pagina HTML è denominata "index.html". Quindi, qui, dovremmo prendere anche il nostro index.html e compilarlo in "index.ejs". Utilizzare la stessa procedura di "topic.ejs". Ridurre il codice sorgente per i tag HTML come:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
Da qui si dovrebbe dare un'occhiata al mio app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Spiegazione: xyz è un nome casuale. Scegline uno tu. Questo nome ORA è il tuo URL. Non capisco? Guarda l'esempio qui sotto. Dopo aver avviato il tuo server attraverso l'esecuzione dell'app.js, il tuo server gira su una porta specifica (il valore predefinito di 3000 credo). Il tuo solito URL di index.html dovrebbe essere "localhost: 3000/index.html". Digitalo nella barra degli indirizzi del tuo browser. Il tuo sito dovrebbe essere mostrato. Ora provate questo:
localhost: PORT/xyz
Nel app.get-Methode mostrato prima, si esplicita dici i tuoi app.js: Dietro il "/ xyz" -path si erge il file "index.ejs". Ma cosa significa esattamente?
Significa che ora puoi digitare "locallhost: PORT/xyz nella barra degli indirizzi del tuo browser e verrà mostrato il contenuto del tuo sito index.html, ma quello che vedrai è il contenuto generato di layout.ejs. Magic !
la logica dietro: (se si dà un'occhiata al nuovo le layout.ejs)
Con il <% - corpo%> Comando si carica nel layout solo un frammento di codice sorgente solo fare questo: Dopo aver eseguito la vostra. sito, fai clic con il tasto destro del mouse e lascia che mostri il codice sorgente. Dovrebbe essere un normale codice HTML. In realtà è il codice sorgente del tuo layout.ejs, che ha richiesto alcuni frammenti del tuo codice.
Tutto in uno:
Con il <% - body%> comando in layout.ejs, puoi caricare uno snippet di codice. <% - body%> = "index.ejs", "contact.ejs" e così via. Per ogni file .js, devi estendere l'app.js al suo metodo "get" (l'esempio segue). Se hai più siti (ovviamente non hai un sito), devi inserire lo snippet di codice per il nuovo sito in un file .ejs (ad esempio contact.html => contact.ejs). È inoltre necessario estendere il file app.js a questo:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
O
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
E non dimenticare di modificare i collegamenti nei .ejs-files: onclick = "finestra. location.replace ('contact.html') "diventa il nome che hai scelto nel app.get-methode. Ad esempio, cambia in onclick = "window.location.replace ('contact')".
onclick = "window.location.replace ('contact.html')" DIVENTA DI onclick = "window.location.replace ('contatto')"
È basta fare il link al nome dell'URL, non al file. App.js gestirà questo ora per voi :)
Man, come potrebbero non vederlo nei documenti? –
L'odio per visualizzare un thread precedente, ma la sua risposta non fornisce alcuna spiegazione, whatsover. Dov'è questa affermazione? Che cosa fa? Come lo usi nel contesto? Questa è una così frustrante non risposta e non vedo come abbia così tanti voti. – Brian
La domanda presuppone la comprensione di cosa significa <%= yield %> in altri linguaggi di template come erb. Questo è il motivo per cui è in aumento, ma in ogni caso, la resa in un "layout" è la posizione in cui si desidera il "modello" da rappresentare, in cui un layout può essere considerato come un modello principale. –