Właśnie zaczynam od node.js + express + ejs. Nie mogę znaleźć nigdzie, jak pobrać żądany plik ejs do pliku układu.Jaka jest metoda "yield" układu w programie ejs?
Wiem doskonale, że yield nie jest odpowiednią rzeczą.
np.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
końcu znalazłem trochę kodu źródłowego wyraźnego aplikacji:
<%- body %>
Chyba mogę pomóc jesteś tutaj na wolności. Dam ci wyjaśnienie.
Układ layout.ejs to naprawdę układ, w którym musisz mieć stronę HTML zbudowaną z fragmentów kodu :).
Moi layout.ejs wygląda następująco:
<!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>
będę daje wyjaśnienie kodu. "Nagłówek" - tag to moje opakowanie (800 x 600) z całą moją zawartością. Za pomocą polecenia "częściowego" możesz załadować fragmenty kodu źródłowego. W moim przykładzie "topic.ejs" znajduje się mój temat projektu z obrazami i kolorami, które powinny pozostać na każdej stronie (można powiedzieć, że jest statyczny).
źródłowego z topic.ejs (jest to naprawdę tylko tagi html, rozpoczyna się i kończy div z jednym: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Teraz każda strona była realizowana moje topic.ejs (jeżeli postępuj zgodnie z pierwszym kodem źródłowym, możesz go zobaczyć):
"<% - częściowy (" topic.ejs ")%>".
Oznacza to: Hej układ! Każda strona ma zaimplementowaną tę część kodu, rozumiesz ?! -Dobry.
Ale co z "<% - body%>" -polecenie? Łatwo też zrozumieć. Aplikacja app.js będzie dbać o to, co dokładnie zrobi <% - body%>. Ale jak to działa, wyjaśnię to później.
Jak powinieneś wiedzieć, pierwsza strona strony HTML nosi nazwę "index.html". Więc tutaj powinniśmy wziąć nasz plik index.html i skompilować go do "index.ejs". Zastosuj tę samą procedurę, co w przypadku "topic.ejs". Zmniejszyć źródłowego HTML tagów podobnych do:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
Stąd należy przyjrzeć się moim app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Objaśnienie: xyz jest losowa nazwa. Wybierz sam. Ta nazwa TERAZ to Twój adres URL. Nie rozumiem? Spójrz przykład poniżej. Po uruchomieniu serwera przez wykonanie aplikacji.js, twój serwer działa na konkretnym porcie (domyślnie 3000, jak sądzę). Twoim zwykłym adresem URL pliku index.html powinien być "localhost: 3000/index.html". Wpisz go w pasku adresu przeglądarki. Twoja witryna powinna być wyświetlana. Teraz spróbuj tego:
localhost: port/xyz
W app.get-Methode pokazano wcześniej, wyraźny mówią twoi app.js: Za "/ xyz" path stoi plik "index.ejs". Ale co to dokładnie oznacza?
Oznacza to, że możesz teraz wpisać "locallhost: PORT/xyz" w pasku adresu przeglądarki, a zawartość strony głównej index.html zostanie pokazana, ale zobaczysz wygenerowaną zawartość layout.ejs. Magic !
Logika za: (jeśli ponownie spojrzysz na layout.ejs)
Za pomocą polecenia <% - body%> ładujesz do swojego układu tylko fragment kodu źródłowego. Po prostu wykonaj to: Po uruchomieniu kliknij prawym przyciskiem myszy i pokaż kod źródłowy, który powinien być zwykłym kodem źródłowym HTML. W rzeczywistości jest to kod źródłowy twojego layout.ejs, który zrobił kilka fragmentów kodu.
Wszystko w jednym:
Z <% - body%> polecenie w twoim layout.ejs, możesz załadować w fragmencie kodu. <% - treść%> = "index.ejs", "contact.ejs" i tak dalej. Dla każdego pliku .ejs należy rozszerzyć plik app.js do jego metody "get" -metode (przykład poniżej). Jeśli masz więcej stron (oczywiście po prostu nie masz jednej witryny), musisz wstawić fragment kodu nowej witryny do pliku .ejs (np .: contact.html => contact.ejs). Należy również rozszerzyć plik app.js do tego:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
LUB
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
I nie zapomnij zmienić odsyłaczy w .ejs Z Archiwum okno onclick = ". location.replace ("contact.html") "staje się nazwą wybraną w app.get-methode. Na przykład zmienia się na onclick = "window.location.replace (" contact ")".
onclick = "window.location.replace ('contact.html')" STAJE DO onclick = "window.location.replace ('kontaktowego')"
You po prostu wykonaj link do nazwy URL, a nie do pliku. App.js obsłuży to teraz dla ciebie :)
Człowieku, jak mogliby to przegapić w dokumentach? –
Nienawidzę przywoływania starego wątku, ale jego odpowiedź nie zawiera żadnych wyjaśnień. Gdzie znajduje się to stwierdzenie? Co to robi? Jak używasz go w kontekście? To bardzo frustrująca odpowiedź, której nie mam i nie rozumiem, jak ma tak wiele głosów. – Brian
Pytanie zakłada zrozumienie, co oznacza <%= yield %> w innych językach szablonowych, takich jak erb. Właśnie dlatego jego zdobycie upvotes, ale tak czy inaczej, daje "układ" jest miejscem, w którym ma się wyświetlać "szablon", gdzie układ może być uważany za szablon nadrzędny. –