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

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

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

например.

layout.ejs

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

index.ejs

<p>Hi</p>

Ответы

Ответ 1

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

<%- body %>

Ответ 2

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

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

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

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

Но как насчет команды <% - 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". Введите его в адресной строке вашего браузера. Ваш сайт должен быть показан. Теперь попробуйте следующее:

локальный: PORT/хуг

В показанном ранее 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-методе. Например, он изменяется на onclick = "window.location.replace('контакт')".

onclick = "window.location.replace(' contact.html)" СТАНОВИТСЯ OnClick = "window.location.replace( ' контакт')"

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