Я только начинаю с node.js + express + ejs. Я не могу найти нигде, как вытащить запрошенный файл ejs в файл макета.Что такое макет `yield` в ejs?
Я точно знаю, что yield здесь не так.
например.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
Наконец нашел исходный код для экспресс-приложения:
<%- body %>
Я думаю, я могу помочь вы здесь. Я дам вам некоторое объяснение.
layout.ejs - это действительно макет, который должен иметь HTML-сайт, построенный из фрагментов кода :).
Мои layout.ejs выглядит следующим образом:
<!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>
я дам вам объяснение кода. «Header» -tag - моя оболочка (800x600) со всем моим контентом. С помощью «частичной» команды вы можете загружать фрагменты исходного кода. На моем примере «topic.ejs» - это моя тема-дизайн с изображениями и цветами, которые должны оставаться на каждой странице (можно сказать, что это статично).
Sourcecode из topic.ejs: (это действительно только HTML-теги, начинается с DIV и заканчивается одним: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Теперь каждая страница реализованная моих topic.e (если вы следуйте первому исходному коду, вы можете его увидеть):
«<% - частично (« topic.ejs »)%>».
Это означает: Эй, макет! На каждой странице реализована эта часть кода, она есть ?! -Хорошо.
А как насчет "<% - тело%>" -command? Это легко понять. App.js позаботится о том, что именно <% - body%> точно сделает. Но как это происходит, я объясню это позже.
Как вы знаете, первая страница HTML-страницы называется «index.html». Итак, прямо здесь, мы должны взять наш index.html и скомпилировать его на «index.ejs». Используйте ту же процедуру, что и для «topic.ejs». Снизить исходный код для HTML-тегов:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
Здесь вы должны взглянуть на моем app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Объяснение: хуг является случайным именем. Выберите один самостоятельно. Это имя СЕЙЧАС - ваш URL. Не понял? Посмотрите пример ниже. После запуска вашего сервера через выполнение приложения.js, ваш сервер работает на особенно портах (по умолчанию 3000 я думаю). Ваш обычный URL-адрес index.html должен быть «localhost: 3000/index.html». Введите его в адресной строке вашего браузера. Ваш сайт должен быть показан. Теперь попробуйте это:
локальное: PORT/хуг
В app.get-Methode показано выше, вы четко сказать, ваш app.js: За "/ А" -path там стоишь файл index.ejs. Но что это значит?
Это означает, что теперь вы можете ввести «locallhost: PORT/xyz» в свою адресную строку вашего браузера, и будет отображаться содержимое вашего первичного сайта index.html, но то, что вы увидите, - это сгенерированное содержимое layout.ejs. !
Логика позади: (если вы снова посмотрите на layout.ejs)
С командой <% - body%> вы загружаете в свой макет только фрагмент исходного кода. Просто выполните следующее: после запуска сайт, щелкните его правой кнопкой мыши и покажите исходный код.Он должен быть обычным кодом HTML-источника.На самом деле это исходный код вашего layout.ejs, который взял некоторые фрагменты вашего кода.
Все в одном:
С <% - body%> в вашем layout.ejs, вы можете загрузить фрагмент кода. <% - body%> = "index.ejs", "contact.ejs" и т. Д. Для каждого файла .ejs вам необходимо расширить app.js до его «get» -метода (пример следует). Если у вас больше сайтов (конечно, у вас просто нет одного сайта), вам нужно поместить фрагмент кода для нового сайта в файл .ejs (например .: contact.html => contact.ejs). Кроме того, необходимо расширить app.js файл следующим образом:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
ИЛИ
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
И не забудьте изменить ссылки в .ejs-файлов: OnClick = "окно. location.replace ('contact.html') "становится именем, которое вы выбрали в app.get-методе. Например, он изменяется на onclick = "window.location.replace ('contact')".
OnClick = "window.location.replace ('contact.html')" становится OnClick = "window.location.replace ('контакта')"
You просто сделайте ссылку на имя URL, а не на файл. App.js справится с этим сейчас для вас :)
Человек, как они могут пропустить это в документах? –
Ненависть, чтобы воспитывать старую нить, но его ответ не дает никаких объяснений, что. Где это утверждение относится? Что оно делает? Как вы используете его в контексте? Это такой неприятный не-ответ, и я не вижу, как у него так много голосов. – Brian
Вопрос предполагает понимание того, что означает <%= yield %> на других языках шаблонов, таких как erb. Вот почему его получение upvotes, но в любом случае, доходность в «макете» - это местоположение, в котором вы хотите отобразить «шаблон», где макет можно рассматривать как родительский шаблон. –