npm install --save ejs / pug / express-handlebars
UTILISER UN TEMPLATE :
// app.set() nous permet de fixer des valeurs globales dans notre application expressJS
//Dans app.js :
// on dit quel moteur on utilise
app.set("view engine", 'pug');
// where to find the templates
app.set("views", "views");
Les fichiers pug doivent avoir l'extension .pug et ils ressemblent a ca :
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
title My Shop
link(rel="stylesheet" href="css/main.css")
link(rel="stylesheet" href="css/product.css")
body
header.main-header
nav.main-header_nav
ul.main-header__item-list
li.main-header__item
a.active(href="/") Shop
li.main-header__item
a.(href="/admin/add-product") Add product
Et pour l'utiliser :
router.get('/', (req, res, next) => {
const products = adminData.products;
// AVANT :
// res.sendFile(path.join(rootDir, 'views', 'shop.html'));
// MAINTENANT (pas besoin de mettre le chemin , on a definit plus haut que tout etait
// dans le dossier 'views' ): + on peut passer des params en 2nd argument
res.render('shop', {products: products, docTitle: 'Shop'})
});
Avec .pug l'interpolation se fait comme cela :
title #{docTitle}
// loop :
if prods.length > 0
.grid
each product in prods
else
h1 No Products
Si on a du code qui se repete dans le template (par exemple le header) on va creer un dossier layouts/ avec un fichiers ou plusieurs .pug
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title #{pageTitle}
link(rel="stylesheet", href="/css/main.css")
// on utilise la syntaxe block nomDuBlock pour dire que les templates enfants
// pourront afficher leur modifs ici
block styles
body
header.main-header
nav.main-header__nav
ul.main-header__item-list
li.main-header__item
a(href="/") Shop
li.main-header__item
a(href="/admin/add-product") Add Product
// chaque block enfant pourra display son content ici
block content
utiliser le layout :
// on etends le block principal
extends layouts/main-layout.pug
// on modifie ce qu'on a a modifier
block content
h1 Page Not Found!
Si je veux rendre mes liens 'active' dans le header ?
router.get('/', (req, res, next) => {
const products = adminData.products;
res.render('shop', {
prods: products,
docTitle: 'Shop',
// j'exporte une var de plus, je l'appelle comme je le veux
path: 'shop'
})
});
// dans le template main-layout.pug
li.main-header__item
// si la var path est 'shop' bah je suis sur la page shop donc je met la class active
a(href="/", class=(path==='shop' ? 'active' : '')) Shop
li.main-header__item
// meme chose ici
a(href="/admin/add-product", class=(path==='admin/add-product' ? 'active' : '')) Add Product