ExpressJS - Шаблоны

Pug - это шаблонизатор для Express. Механизмы создания шаблонов используются для устранения загромождения нашего серверного кода HTML, дико объединяя строки в существующие шаблоны HTML. Pug - очень мощный движок для создания шаблонов, который имеет множество функций, включаяfilters, includes, inheritance, interpolationи т. д. Здесь есть над чем поговорить.

Чтобы использовать Pug with Express, нам нужно его установить,

npm install --save pug

Теперь, когда Pug установлен, установите его в качестве движка шаблонов для вашего приложения. Выdon'tнужно «требовать» этого. Добавьте следующий код в свойindex.js файл.

app.set('view engine', 'pug');
app.set('views','./views');

Теперь создайте новый каталог под названием views. Внутри этого создайте файл с именемfirst_view.pug, и введите в него следующие данные.

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Чтобы запустить эту страницу, добавьте в приложение следующий маршрут -

app.get('/first_template', function(req, res){
   res.render('first_view');
});

Вы получите результат как - Hello World!Pug конвертирует эту очень простую на вид разметку в HTML. Нам не нужно отслеживать закрытие тегов, не нужно использовать ключевые слова class и id, вместо этого используйте '.' и'#'чтобы определить их. Приведенный выше код сначала преобразуется в -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug может делать гораздо больше, чем просто упрощать разметку HTML.

Важные особенности мопса

Давайте теперь рассмотрим несколько важных особенностей Pug.

Простые теги

Теги вкладываются в соответствии с их отступом. Как и в приведенном выше примере,<title> был отступ внутри <head>тег, чтобы он был внутри него. Но<body> тег был на том же отступе, так что это был брат <head> тег.

Нам не нужно закрывать теги, как только Pug встречает следующий тег на том же или внешнем уровне отступа, он закрывает тег для нас.

Чтобы поместить текст внутри тега, у нас есть 3 метода:

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

Атрибуты

Для определения атрибутов мы используем список атрибутов, разделенных запятыми, в круглых скобках. Атрибуты класса и идентификатора имеют специальные представления. Следующая строка кода описывает определение атрибутов, классов и идентификатора для данного тега html.

div.container.column.main#division(width = "100", height = "100")

Эта строка кода преобразуется в следующую. -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Передача значений в шаблоны

Когда мы визуализируем шаблон Pug, мы можем передать ему значение из нашего обработчика маршрута, которое затем мы можем использовать в нашем шаблоне. Создайте новый обработчик маршрута со следующим.

var express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

И создайте новый файл представления в каталоге представлений с именем dynamic.pug, со следующим кодом -

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Откройте в браузере localhost: 3000 / dynamic_view; Вы должны получить следующий результат -

Мы также можем использовать эти переданные переменные в тексте. Чтобы вставить переданные переменные между текстом тега, мы используем#{variableName}синтаксис. Например, в приведенном выше примере, если бы мы хотели разместить приветствия от TutorialsPoint, мы могли бы сделать следующее.

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Этот способ использования значений называется interpolation. Приведенный выше код отобразит следующий вывод. -

Условные

Мы также можем использовать условные операторы и конструкции цикла.

Рассмотрим следующее -

Если пользователь вошел в систему, страница должна отображаться "Hi, User" а если нет, то "Login/Sign Up"ссылка. Для этого мы можем определить простой шаблон вроде -

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Когда мы визуализируем это с помощью наших маршрутов, мы можем передать объект, как в следующей программе:

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Вы получите сообщение - Hi, Ayush. Но если мы не передадим какой-либо объект или передадим его без пользовательского ключа, то мы получим ссылку для регистрации.

Включить и компоненты

Pug предоставляет очень интуитивно понятный способ создания компонентов для веб-страницы. Например, если вы видите новостной сайт, заголовок с логотипом и категориями всегда фиксирован. Вместо того, чтобы копировать это в каждое создаваемое представление, мы можем использоватьincludeхарактерная черта. В следующем примере показано, как мы можем использовать эту функцию -

Создайте 3 представления с помощью следующего кода -

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

Создайте маршрут для этого следующим образом -

var express = require('express');
var app = express();

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

Перейдите на localhost: 3000 / components, вы получите следующий вывод -

include также может использоваться для включения открытого текста, CSS и JavaScript.

Есть еще много возможностей Pug. Но это выходит за рамки данного руководства. Вы можете продолжить изучение Мопса в Мопсе .