Qual è il layout `yield` metodo ejs?

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

  •  30-09-2019
  •  | 
  •  

Domanda

sto solo iniziando con node.js + express + ejs. Non riesco a trovare da nessuna parte come tirare nel file ejs richiesto al file di layout.

Lo so bene che yield non è la cosa giusta qui.

per es.

layout.ejs 

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

index.ejs 

<p>Hi</p>
È stato utile?

Soluzione

Finalmente ho trovato un po 'di codice sorgente per un app espresso: 

<%- body %>

Altri suggerimenti

Credo che posso aiutarti rigth qui. Vi darò qualche spiegazione.

I layout.ejs è veramente il layout u bisogno di avere un sito HTML, costruito in frammenti di codice:.)

Il mio layout.ejs si presenta così: 

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

io gli darà una spiegazione del codice. L ' "header" -tag è il mio involucro (800x600) con tutto il mio contenuto. Con il "parziale" -command è possibile caricare frammenti di codice sorgente. Nelle mie examle "topic.ejs" è il mio argomento-design con immagini e colori che dovrebbero rimanere in ogni pagina (si potrebbe dire che è statico).
Codice sorgente 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 segue il primo codice sorgente, si può vedere):.
"<% - parziale ( 'topic.ejs')%>"
Ciò significa che: Hey layout! Ogni pagina ha questo parziale di codice implementato, capito ?! -Buona.

Ma per quanto riguarda il " <% - corpo%> " - il comando? E 'facile da capire aswell. I app.js si cura di ciò che <% - corpo%> esattamente lo farà. Ma come lo fa, vi spiegherò in seguito.
Come si dovrebbe sapere, la prima pagina di una pagina HTML è chiamato "index.html". Così proprio qui, dobbiamo prendere la nostra index.html troppo e compilarlo a " index.ejs ". Utilizzare la stessa procedura per "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. Scegli uno voi stessi. Questo nome ora è la tua URL. Non farlo? Guardate esempio che segue. Dopo aver avviato il server attraverso l'esecuzione di app.js, le corse Server su una specie di porta (default 3000 credo). Il solito URL del index.html deve essere "localhost: 3000 / index.html". Digitare nella barra degli indirizzi del browser. Il tuo sito dovrebbe essere mostrato. Ora provate questo:

  

localhost: PORT / xyz

Nel app.get-Methode mostrato prima, dite le vostre esplicito app.js: Dietro il "/ xyz" path si erge la -file "index.ejs". Ma cosa esattamente significa?
Significa che è ora possibile digitare "locallhost:.! PORT / xyz nella barra degli indirizzi del browser e il contenuto del tuo sito index.html primordiale verrà mostrato, ma ciò che si vedrà è il contenuto generato layout.ejs Magia < br> La logica dietro: (se si dà un'occhiata ai layout.ejs di nuovo)
Con il <% - corpo%> comando si carica nel layout solo un frammento di codice sorgente. Basta fare questo: Dopo aver eseguito il sito, fare clic su di esso e permette di mostrare le codice sorgente. Dovrebbe essere una normale HTML-codice sorgente. In vero è il codice sorgente delle tue layout.ejs, che ha preso alcuni frammenti di codice.
Tutto in uno:
Con il <% - corpo%> comando nel layout.ejs, è possibile caricare in un frammento di codice. <% - corpo%> = "index.ejs", "contact.ejs", e così via. Per ogni file .ejs, è necessario estendere le app.js alla sua -methode "get" (esempio segue). Se si dispone di più siti (che naturalmente semplicemente non hanno un sito), è necessario inserire il frammento di codice per il nuovo sito in un file .ejs (ad es .: 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 dimenticate di cambiare i collegamenti nei .ejs-files: onclick = "window.location.replace ( 'contact.html')" diventa il nome scelto nel app.get-Methode. Per esempio si trasforma in onclick = "window.location.replace ( 'contatto')".

  

onclick = "window.location.replace ( ' contact.html ')" DIVENTA AD   onclick = "window.location.replace ( ' contatto ')"

Devi solo fare link per il nome dell'URL, non al file. App.js gestirà questo ora per voi:)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top