Qu'est-ce que la méthode layout `yield` dans ejs?
je commence avec node.js + express + ejs. Je ne trouve nulle part comment extraire le fichier ejs demandé dans le fichier de mise en page.
je sais bien qu' yield n'est pas la bonne chose ici.
e.g.
mise en page.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
2 réponses
Enfin trouvé du code source pour un exprès application:
<%- body %>
je suppose que je peux vous aider ici. Je vais vous donner quelques explications.
la disposition.ejs est vraiment la mise en page dont vous avez besoin pour avoir un site HTML, construit à partir de morceaux de code :).
Mon mise en page.ejs ressemble:
<!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>
je vais vous donner une explication du code. La balise"header" est mon wrapper(800x600) avec tout mon contenu. Avec les "partielle"-commande vous pouvez charger des extraits de code source. Dans mon exemple "rubrique.ejs" est mon sujet-conception avec des images et des couleurs qui devraient rester sur chaque page (on pourrait dire que c'est statique).
Le code source de rubrique.ejs: (c'est vraiment juste les balises html, commence avec un div et se termine par un :P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
maintenant chaque page a implémenté mon sujet.ejs (si vous suivez le premier code source, vous pouvez le voir):
"<%- partielle('sujet.ejs')%>".
Ça veut dire: Hé Layout! Chaque page a ce partiel de code implémenté, compris?! -Bon.
Mais quel est le "<% corps %>"-commande?
Il est facile aussi de comprendre. App.js se souciera de ce que <%- body %> fera exactement. Mais comment cela fonctionne, je l'expliquerai plus tard.
Comme vous le savez, la première page D'une page HTML s'appelle "index.HTML." Donc ici, nous devrions prendre notre index.html trop et de le compiler pour " index.ejs". Utilisez la même procédure que pour le "sujet.ejs". Réduire le code source vers les balises html comme:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
De là, vous devriez jeter un oeil à mon app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Explication: xyz est un nom aléatoire. Choisissez-en un vous-même. Ce nom est maintenant votre URL. Ne pas le faire? Regardez l'exemple ci-dessous. Après avoir démarré votre serveur par l'exécution d'app.js, votre serveur tourne sur un port particulier (par défaut 3000 je suppose). Votre URL habituelle de l'index.html doit être " localhost: 3000 / index.HTML." Tapez dans la barre d'adresse de votre navigateur. Votre site doit être affiché. Maintenant, essayez ceci:
localhost: PORT / xyz
Dans l'application.get-methode montré avant, vous dites explicitement votre application.js: derrière le chemin "/xyz"se trouve l'index".ejs"-fichier. Mais qu'est que cela signifie exactement?
Cela signifie que vous pouvez maintenant taper "locallhost:PORT/xyz" dans votre barre d'adresse de votre navigateur et le contenu de votre index principal.site html sera affiché, mais ce que vous verrez est le contenu généré de mise en page.ejs. La magie!
La logique derrière: (si vous jetez un oeil à la mise en page.ejs nouveau)
Avec la commande <%- body%>, vous chargez dans votre mise en page juste un morceau de code source. Faites juste ceci: après avoir lancé votre site, faites un clic droit dessus et laissez-vous afficher le code source. Ce devrait être un code HTML-sourcecode habituel. En réel, c'est le code source de votre mise en page.ejs, ça a pris quelques bribes de ton code.
Tout dans:
Avec le < % corps %> commande dans votre mise en page.ejs, vous pouvez charger un extrait de code. < % corps %> = "index.ejs", " contact.ejs", et ainsi de suite. Pour tous les .fichier ejs, vous devez étendre l'application.js à son "get"-methode(exemple ci-dessous). Si vous avez plusieurs sites (bien sûr, vous juste ne pas avoir un site), vous avez besoin de mettre de l'extrait de code pour le nouveau site .fichier ejs (par exemple: contact.html = > contact.ejs). Vous devez également étendre votre application.fichier js à ceci:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
OR
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
Et n'oubliez pas de changer les liens dans le .ejs-fichiers:
onclick= " window.emplacement.remplacer('contact.html')" devient le nom que vous avez choisi dans l'application.get-methode. Par exemple, il change en onclick="window.emplacement.remplacer ("contact")".
onclick= " window.emplacement.replace(' contact.html')" DEVIENT À onclick= " window.emplacement.replace(' contact')"
il suffit de faire un lien vers le nom de L'URL, pas vers le fichier. App.js va s'occuper de ça maintenant pour vous:)