Учебники

Koa.js — шаблоны

Ноябрь 5, 2018

Мопс — движок шаблонов. Движки шаблонов используются для устранения загромождения кода нашего сервера с помощью HTML, дико объединяя строки с существующими шаблонами HTML. Мопс — очень мощный движок шаблонов, который имеет множество функций, таких как фильтры, включает в себя, наследование, интерполяция и т. Д. Есть много оснований, чтобы покрыть это.

Чтобы использовать Pug с Koa, нам нужно установить его с помощью следующей команды. 

$ npm install --save pug koa-pug

Как только pug установлен, установите его в качестве движка шаблонов для вашего приложения. Добавьте следующий код в файл app.js. 

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

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

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

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

_.get('/hello', getMessage); // Define routes

function *getMessage(){
   this.render('first_view');
};

Вы получите вывод как —

Привет Просмотров

Pug конвертирует эту очень простую на вид разметку в html. Нам не нужно отслеживать закрытие наших тегов, не нужно использовать ключевые слова class и id, лучше использовать ‘.’ и «#», чтобы определить их. Приведенный выше код сначала преобразуется в 

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

Мопс способен на гораздо большее, чем просто упрощение разметки HTML. Давайте рассмотрим некоторые из этих особенностей мопса.

Простые теги

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

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

Есть три способа поместить текст внутри тега —

  • Пространство отделено — 
h1 Welcome to Pug
  • Трубный текст — 
div
   | To insert multiline text, 
   | You can use the pipe operator.
  • Блок текста — 
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.

Комментарии

Pug использует тот же синтаксис, что и JavaScript (//) для создания комментариев. Эти комментарии преобразуются в html комментарии (<! — comment ->). Например, 

//This is a Pug comment

Этот комментарий преобразуется в — 

<!--This is a Pug comment-->

Атрибуты

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

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

Эта строка кода преобразуется в — 

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

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

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

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app // equals to pug.use(app) and app.use(pug.middleware)
});

var _ = router(); //Instantiate the router

_.get('//dynamic_view', dynamicMessage); // Define routes

function *dynamicMessage(){
   this.render('dynamic', {
      name: "TutorialsPoint", 
      url:"https://www.tutorialspoint.com"
   });
};

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

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

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

Откройте localhost: 3000 / dynamic в вашем браузере, и следующий должен быть вывод. —

Шаблонные Переменные

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

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

Этот метод использования значений называется интерполяцией.

Conditionals

Мы также можем использовать условные операторы и циклические конструкции. Рассмотрим этот практический пример: если пользователь вошел в систему, мы хотели бы отобразить «Привет, пользователь», а если нет, то мы бы хотели показать ему ссылку «Войти / Зарегистрироваться». Чтобы достичь этого, мы можем определить простой шаблон, такой как — 

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

Когда мы рендерим это, используя наши маршруты, и если мы передаем объект вроде — 

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

Появится сообщение «Привет, Аюш». Однако, если мы не передадим какой-либо объект или не передадим объект без ключа пользователя, мы получим ссылку «Зарегистрироваться».

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

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

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

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 koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

_.get('/components', getComponents);

function *getComponents(){
   this.render('content.pug');
}

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

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

Компоненты шаблонов

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

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

45
Share: