Механизм шаблонов (Ejs против мопса)

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

В этой статье предполагается, что у вас уже установлены node.js и npm.

если нет, проверьте обе ссылки, чтобы начать. https://nodejs.org/en/download/

и https://brew.sh/

Эйс

ejs (встроенные шаблоны javaScript) — это синтаксис на основе html и простого js, который позволяет писать минимальный код и организовывать файлы.

скачать здесь https://ejs.co/

$ npm install ejs

Структура папок и файлов проекта

-projectName
      |-public
         |_css
         |_js
      |-views
           |_partials
                |_header.ejs
                |_footer.ejs
           |_main.ejs
           | contact.ejs
       |-app.js

app.js

const ejs = require ("ejs")
const port = 3000;
app.set('view engine', "ejs")
//this will allow the static folders css/js to be rendered and apply.
app.use(express.static(__dirname + "/public")
app.listen (port, function (){
console.log("Server Ready")
})

ejs позволяет нам разбить наш код на конкретные. Внутри папки представлений перейдите и создайте папку partials, которая будет содержать верхний и нижний колонтитулы веб-страницы. Теперь вам нужно будет создать файлы внутри партиалов как header.ejs, так и footer.ejs.

$ cd projectName/views/
$ mkdir partials
$ cd projectName/views/partials/
$ touch header.ejs footer.ejs

Затем свяжите верхний и нижний колонтитулы в каждом файле страницы ejs.

//Attach header-place it on the top of the page
<%-include("partials/header");%>
//Attach footer-place it on the very bottom of the page
<%-include("partials/footer");%>

Обратитесь к следующему коду в качестве примера, который является main.ejs.

<%- include(“partials/header”); -%>
 <h1>Home</h1>
 <p> <%= articleContent %> </p>
<%- include(“partials/footer”); -%>

Мопс

Jade, который теперь известен как pug, — это еще один js-шаблон узла, основанный на синтаксисе пробелов и отступов. Им легко управлять, и его можно использовать для хранения повторно используемых кодов. Процесс установки аналогичен ejs, однако синтаксис имеет другую структуру и может привести к фатальным ошибкам, если один синтаксис неточен из-за его чувствительности к синтаксису.

$ npm install pug 

Структурируйте свою папку

-projectName
      |-public
         |_css
         |_js
      |-views
          |_includes
                |_head.pug
                |_foot.pug
           |_main.pug
           |_about.bug
           | contact.pug
       |-app.js

Внутри app.js мы должны потребовать все библиотеки зависимостей, которые мы установили через терминал.

const express = require('express');
const pug = require('pug');
const port = 3000;
app.set('view engine', 'pug')
app.use(express.static('public'));

// Compile a pug string 
const compileClient = function (str, options){
console.log("Print Here")
}
app.listen (port, function (){
console.log("Server Ready")
})

Пишите код внутри main.pug , закрывающие теги не требуются, как мы это делаем внутри html-файлов.

DOCTYPE html
head
    title My pug project
    include includes/head.pug
      include style.css
  body
h1  Learn Bug
p Hello World.
include app.js
include includes/foot.pug

Заключение

Когда дело доходит до выбора, оба шаблона великолепны, все зависит только от ваших личных предпочтений. Ejs популярен как для больших, так и для небольших проектов, и его легко освоить, если вы новичок, но Pug также является отличным шаблоном, который предоставляет многофункциональное и высокопроизводительное веб-приложение.