Hur fungerar det?
Det hÀr avsnittet handlar om hur Express fungerar. För att förstÄ det sÄ kommer du att skriva om delar av startkoden som Express generator skapat. Du kommer att skapa en meny, redigera vyer och Àndra routingen.
Viktigt! Eftersom vi kört NJK som templates för 11ty sÄ fortsÀtter vi med NJK för Node och Express. Detta gör att PUG inte anvÀnds. Jag har dock inte hunnit uppdatera fÀrdigt texten just nu.
NJK
Installera Nunjucks.
npm install nunjucks
För att anvÀnda Nunjucks behöver det laddas i app.js
och konfigureras.
const nunjucks = require('nunjucks')
nunjucks.configure('views', {
autoescape: true,
express: app
});
Nu kan vi skapa views för projektet. Skapa en mapp i roten /views
. Denna template blir en bas för sidornas layout som vi kan anvÀnda med extends.
<!doctype html>
<html lang="en">
<head>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Skapa sedan den specifika view filen för index sidan, index.njk
.
{% extends layout %}
{% block content %}
<h1>{{message}}</h1>
{% endblock %}
För nÀsta steg sÄ behöver vi redigera routen som anvÀnder Nunjucks filerna. Redigera index routen.
router.get('/', async function(req, res, next) {
let data = {
message: 'Hello world!',
layout: 'layout.njk',
title: 'Nunjucks example'
}
res.render('index.njk', data)
})
Testa nu att starta servern igen med dev
scriptet. NĂ€sta tsteg blir att uppdatera layout grunden till att vara en korrekt HTML5 mall och inkludera css.
Pug
Express stöder ett flertal olika templatmotorer (pÄ engelska template engine), den som anvÀnds hÀr Àr Pug. Pug Àr snarlikt html och relativt enkelt att komma igÄng med.
InnehÄllet pÄ en sida med Pug struktureras med indentering. Text i början av en rad representerar generellt en HTML tag. Taggarna behöver inte stÀngas (det sköter indenteringen). För att nÀstla element indenteras de under andra taggar. LÀs mer om taggar och attribut i Pug.
Pug stöder variabler, iteration och mixins(funktioner) bland annat.
div#idname
h1.classname Rubrik
p.class1.class2 Brödtext
| Fortsatt text i p elementet ovan.
p Lorem...
a(href='#') LĂ€nk i p texten
LÀs mer om Pug i dokumentationen och anvÀnd den vid behov. Det finns Àven ett antal extensions för Visual Studio Code (förkortat till vscode) för att underlÀtta arbetet med Pug.
Layout
Det hÀr projektets vy-struktur utgÄr frÄn filen layout.pug. Underliggande sidor Àrver layout-vyns struktur för att skapa en fÀrdig HTML-sida. Nyckelordet (pÄ engelska keyword) för detta Àr extends
.
Filen index.pug Àrver frÄn layout.pug med
extends layout
Layout-vyn Ă€r projektets HTML-bas sĂ„ i den filen behövs en validerande HTML grund. Ăppna filen och skriv följande kod.
doctype html
html(lang='sv')
head
meta(name='viewport' content='width=device-width,initial-scale=1.0')
meta(charset='utf-8')
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
Index
Index-vyn Àr webbsidans startpunkt. Index-routen anropar index-vyn och skapar den HTML-kod som webblÀsaren visar. Route filen kallar res.render()
funktionen för att visa den vy som anges, i det hÀr fallet index.
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});
I render funktionen kallas först den vy som ska anvÀndas, index, sedan bifogas ett objekt till vy-filen(till pug). Objeketet innehÄller hÀr egenskapen title med Express som vÀrde.
extends layout
block content
main
h1= title
p Welcome to #{title}
I index-vyn kan sedan det bifogade objektet anvÀndas för att dynamiskt Àndra vy-filen. Det kallas för template locals, lÀs mer om template locals hÀr.
Byt ut title till nÄgot annat. Redigera sedan objektet och lÀgg till en annan egenskap. Visa sedan denna i index.pug.
Nav
Med extends
kan Pug ÄteranvÀnda kod. Det leder till enklare utveckling och mindre fel (don't repeat yourself, DRY). Ett bra anvÀndningsfall (engelska use case) för detta Àr navigation pÄ en webbsida.
Du ska nu skapa en navigation. Redigera layout-vyn och skapa ett nav block efter body-taggen.
body
block nav
include nav.pug
block content
Nav-blocket följs av nyckelordet include
som anvÀnds för att lÀgga till innehÄllet frÄn en annan fil, nav.pug.
Skapa sedan nav-vyn och lÀgg till HTML-koden.
nav
ul
li
a(href='/') Home
li
a(href='/users') Users
Spara de redigerade filerna och ladda om sidan i webblÀsaren.
Users
Den users-route som Express generator skapat returnerar enbart en resurs. För att users-routen ska svara med en users-vy behöver res.render
anvÀndas.
router.get('/', function(req, res, next) {
res.render('users', {});
});
Koden hÀnvisar nu till en users-vy som behöver skapas. Basera den pÄ index-vyn.
extends layout
block content
main
h1= title
För att visa Pugs och Express samspel mellan route och vy ska users-vyn uppdateras för att visa ett flertal anvÀndare. Skapa en array i det objekt som bifogas av users-routen.
res.render('users', {'users': ['Hans', 'Moa', 'Bengt', 'Frans', 'Lisa'] });
Arrayen frÄn users-routen kan nu anvÀndas som en template-local i users-vyn. För att visa innehÄllet i arrayen kommer en loop att anvÀndas. Formen för denna iteration Àr för varje user i users utför... Uppdatera users-vyn med följande kod.
ul
each user in users
li= user
Först skapas ett ul-element följt av koden för loopen. I loopen skapas sedan ett li-element för varje index i users-arrayen. Ladda om sidan och se resultatet.
Footer
I den hÀr uppgiften ska du skapa en footer-vy som ska inkluderas pÄ varje sida, förfarandet Àr mer eller mindre detsamma som för navigationen. Skapa vy-filen views/footer.pug och inkludera den frÄn views/layout.pug. I filen skapar du ett footer element.
Sass
Sass Àr en sprÄk-utökning för att skapa css. Sass förkompileras till fÀrdig css.
Express generator installerar ett middleware för att kompilera Sass-filer till css-filer. Projektets css skrivs i .sass filen vilken kompileras till .css kod nÀr sidan hÀmtas frÄn webbservern.
Sass-kod kan delas upp i flera filer, det Àr mycket praktiskt. För att inkludera filer anvÀnds @use
regeln. TyvÀrr har node-sass-middleware som experess anvÀnder ett Àldre syntax. DÀrför anvÀnds @import
istÀllet för @use
.
style.sass
Sass syntax skiljer nĂ„got frĂ„n css, men grunderna Ă€r liknande. Precis som Pug förlitar sig Sass pĂ„ korrekt indentering för att fungera och strukturera. Ăppna filen och skriv in följande.
html
height: 100%
body
height: 100%
display: flex
flex-direction: column
nav, main, footer
width: 80%
margin: 0 auto
footer
margin-top: auto
nav > ul
list-style: none
display: flex
padding: 0
> li
padding-right: 16px
De hÀr stilarna ger en grundlÀggande formatering. Placeringen av elementen sker med flexbox. Prova att lÀgga till en font med Google fonts. Fonten behöver dÄ lÀnkas i layout-vyn, och Sass-stilen behöver uppdateras.
head
link(href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet")
För egenskaper som upprepas i Sass-kod Àr det praktiskt att skapa variabler. Det gör att du slipper upprepa kod och enkelt kan Àndra vÀrden.
$font: 'Roboto', sans-serif
h1
font-family: $font
Arbeta med Sass
Testa nu att skapa variabler för ett par fÀrger pÄ sidan. Passa Àven pÄ att styla User-vyns lista ocksÄ.
LĂ€s mer om Sass.
Last updated
Was this helpful?