Je ne fais que commencer par node.js + express + ejs. Je ne trouve nulle part comment extraire le fichier ejs demandé dans le fichier de mise en page.Quelle est la méthode layout `yield` dans ejs?
Je sais très bien que yield n'est pas la bonne chose ici.
par exemple.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
enfin trouvé un code source pour une application express:
<%- body %>
Je suppose que je peux aider vous êtes ici. Je vais vous donner quelques explications. Le layout.ejs est vraiment la mise en page dont vous avez besoin pour avoir un site HTML, construit à partir de snippets de code :).
Mes layout.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. Le "header" -tag est mon wrapper (800x600) avec tout mon contenu. Avec la commande "partial", vous pouvez charger des extraits de code source. Dans mon exemple, "topic.ejs" est mon topic-design avec des images et des couleurs qui devraient rester sur toutes les pages (on peut dire que c'est statique).
Sourcecode de topic.ejs: (il est vraiment balises html, commence par un div et se termine par un: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Maintenant, chaque page a mis mes topic.ejs (si vous suivez le premier code source, vous pouvez le voir):
"<% - partial ('topic.ejs')%>".
Cela signifie: Hey Layout! Chaque page a cette partie du code mis en œuvre, l'a obtenu ?! -Bien.
Mais qu'en est la "<% - corps%>" -command? Il est facile de comprendre aussi. Le app.js se souciera de ce que <% - body%> fera exactement. Mais comment ça va, je vais l'expliquer plus tard.
Comme vous le savez, la première page d'une page HTML s'appelle "index.html". Donc, ici, nous devrions aussi prendre notre index.html et le compiler à "index.ejs". Utilisez la même procédure que pour "topic.ejs". Réduire le code source pour 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 l'obtiens pas? Regardez l'exemple ci-dessous. Après avoir démarré votre serveur à travers l'exécution de l'application.js, votre serveur fonctionne sur un port en particulier (par défaut 3000 je suppose). Votre URL habituelle de index.html doit être "localhost: 3000/index.html". Tapez-le dans la barre d'adresse de votre navigateur. Votre site devrait être montré. Maintenant, essayez ceci:
localhost: PORT/xyz
Dans le app.get-Methode montré avant, vous dites explicitement votre app.js: Derrière le "/ xyz" -path se dresse le fichier "index.ejs". Mais qu'est-ce 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 site primal index.html sera affiché, mais ce que vous verrez est le contenu généré par layout.ejs. !
la logique derrière: (si vous jetez un oeil à la layout.ejs à nouveau)
Avec le <% - Il suffit de faire cette commande corps%> vous chargez dans votre mise en page juste un extrait de code source: Après l'exécution de votre. site, cliquez dessus avec le bouton droit de la souris et laissez le code source s'afficher Il devrait s'agir d'un code source HTML habituel En réalité, c'est le code source de votre layout.ejs, qui a pris quelques extraits de votre code.
Avec le <% - body%> commande dans votre layout.ejs, vous pouvez charger dans un extrait de code. <% - body%> = "index.ejs", "contact.ejs", etc. Pour chaque fichier .ejs, vous devez étendre le app.js à son "get" -methode (l'exemple suit). Si vous avez plus de sites (bien sûr, vous n'avez tout simplement pas un site), vous devez placer l'extrait de code du nouveau site dans un fichier .ejs (par exemple: contact.html => contact.ejs). Vous devez également étendre votre fichier app.js à ceci:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
OU
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
Et ne pas oublier de changer les liens dans les fichiers .ejs-: fenêtre onclick = ". location.replace ('contact.html') "devient le nom que vous avez choisi dans app.get-methode. Par exemple, il change en onclick = "window.location.replace ('contact')".
onclick = "window.location.replace ('contact.html')" DEVIENT POUR onclick = "window.location.replace ('le contact')"
Vous faites simplement un lien vers le nom de l'URL, pas vers le fichier. App.js va gérer cela maintenant pour vous :)
Man, comment pourraient-ils manquer dans les docs? –
Haine d'élever un vieux fil, mais sa réponse ne fournit aucune explication, whatsover. D'où cette déclaration appartient-elle? Qu'est ce que ça fait? Comment l'utilisez-vous en contexte? C'est une non-réponse tellement frustrante et je ne vois pas comment elle a autant de votes. – Brian
La question suppose une compréhension de ce que <%= yield %> signifie dans d'autres langages de modèle comme erb. C'est pourquoi son obtention de upvotes, mais de toute façon, le rendement dans une "mise en page" est l'endroit où vous voulez que le "modèle" de rendre, où une mise en page peut être considéré comme un modèle parent. –