Что такое метод layout `yield` в ejs? - PullRequest
Новая
       4

Что такое метод layout `yield` в ejs?

24 голосов
/ 15 октября 2010

Я только начинаю с node.js + express + ejs. Я нигде не могу найти, как вытащить запрошенный файл ejs в файл макета.

Я прекрасно знаю, что yield здесь не так.

, например

layout.ejs 

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

index.ejs 

<p>Hi</p>

Ответы [ 2 ]

42 голосов
/ 15 октября 2010

Наконец-то нашел исходный код для экспресс-приложения: 

<%- body %>
11 голосов
/ 31 мая 2012

Я думаю, что могу помочь вам здесь.Я дам вам некоторые пояснения.

layout.ejs - это действительно макет, вам нужен HTML-сайт, построенный из фрагментов кода:).

Мой макет.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" - это моя оболочка (800x600) со всем моим контентом.С помощью «частичной» -команды вы можете загружать фрагменты исходного кода.В моем примере "topic.ejs" - это мой дизайн темы с изображениями и цветами, которые должны оставаться на каждой странице (можно сказать, что это статично).
Исходный код topic.ejs : (на самом деле это просто html-теги, начинающиеся с div и заканчивающиеся одним: P) 

<!-- frame of topic -->
<div id="topic">
    ...
</div> <!-- end of "topic" -->

Теперь на каждой странице реализован мойtopic.ejs (если вы следуете первому исходному коду, вы можете его увидеть):
"<% - частичное ('topic.ejs')%>".
Это означает: Привет, Layout!На каждой странице реализован этот фрагмент кода, понял ?!-Хорошо.

А как насчет команды " <% - body%> "?Это легко понять.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' });
});

Пояснение: xyz - это случайное имя.Выбери один сам.Это имя сейчас ваш URL.Не понимаю?Посмотрите пример ниже.После запуска вашего сервера с помощью app.js ваш сервер работает на специальном порту (по умолчанию 3000, я думаю).Ваш обычный URL index.html должен быть «localhost: 3000 / index.html».Введите его в адресной строке вашего браузера.Ваш сайт должен быть показан.Теперь попробуйте это:

localhost: PORT / xyz

В методе app.get, показанном ранее, вы явно говорите, что app.js: Позади"/ xyz" -path стоит файл "index.ejs".Но что именно это означает?
Это означает, что теперь вы можете ввести «locallhost: PORT / xyz» в адресную строку своего браузера, и будет показано содержимое вашего основного сайта index.html, но вы увидите, чтосгенерированный контент layout.ejs. Magic!

Логика: (если вы снова посмотрите на 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= "window.location.replace ('contact.html')" становится именем, выбранным вами в app.get-method.Например, он изменяется на onclick = "window.location.replace ('contact')".

onclick = "window.location.replace (' contact.html ')"BECOMES TO onclick =" window.location.replace (' contact ') "

Вы просто делаете ссылку на имя URL, а не на файл.App.js справится с этим сейчас для вас:)

...