Что такое метод доходности макета в EJS?

StackOverflow https://stackoverflow.com/questions/3943188

  •  30-09-2019
  •  | 
  •  

Вопрос

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

Я хорошо знаю, что yield не правильная вещь здесь.

например

layout.ejs.

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

index.ejs.

<p>Hi</p>
Это было полезно?

Решение

Наконец нашел какой-то исходный код для App Express App:

<%- 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>

Я дам вам объяснение кода. «Заголовок» -Tag - моя обертка (800x600) со всем моим контентом. С «частичным» -Command вы можете загружать фрагменты Sourcecode. В моем применении «Topic.ejs» - моя тема-дизайн с изображениями и цветами, которые должны оставаться на каждой странице (вы могли бы сказать, что это статично).
Sourcecode Topic.ejs.: (Это действительно просто HTML-теги, начинается с div и заканчивается одним: p)

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

Теперь на каждой странице реализована моя Topic.ejs (если вы будете следовать первым Sourcecode, вы можете его увидеть):
«<% - частичный (« Topic.ejs »)%>".
Это означает: эй макет! У каждой страницы есть этот частичный код, реализованный, получил его?! -Хорошо.

Но как насчет "<% - Тело%>«-Command? Это легко понять. App.js позаботится о том, что <% - body%> точно будет делать. Но как это так, я объясню это позже.
Как вы должны знать, первая страница HTML-страницы называется «index.html». Так что прямо здесь, мы должны принять наш index.html тоже и компилируйте егоindex.ejs.«. Используйте ту же процедуру, что и для« Topic.ejs ». Уменьшите SourceCode к 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: порт / xyz

В App.get-Methode, показанном ранее, вы явным скажем, что ваше приложение. Но что это значит значит?
Это означает, что вы теперь можете ввести «localhost: port / xyz в вашу адресную строку вашего браузера, а содержимое сайта Primal index.html будет показан, но то, что вы увидите, это сгенерированное содержимое layout.ejs. Magic!

Логика позади: (если вы снова посмотрите на Layout.ejs)
С помощью команды <% - Body%> вы загружаете в свой макет, просто фрагмент Sourcecode. Просто сделайте это: после запуска вашего сайта щелкните правой кнопкой мыши и вы можете показать исходный код. Это должен быть обычный HTML-Sourcecode. На самом деле это Sourcecode вашего макета .ejs, который взял несколько фрагментов вашего кода.

Все в одном:
С командой <% - Body%> в вашем макете .ejs вы можете загрузить в фрагменте кода. <% - body%> = "index.ejs", "contact.ejs" и так далее. Для каждого файла .ejs вам необходимо продлить приложение .js к его "Get" -Methode (пример следует). Если у вас есть больше сайтов (конечно, у вас просто нет одного сайта), вам нужно поставить фрагмент кода для нового сайта в файл .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-Methode. Например, это изменяется в onclick = "window.location.replace (« контакт »)».

OnClick = "window.location.replace ('Contact.html.') "Становится в onclick =" window.location.replace ('контакт')"

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top