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 nunjucksFö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.
För nästa steg så behöver vi redigera routen som använder Nunjucks filerna. Redigera index routen.
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.
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.
Det går utmärkt att konvertera färdiga HTML-sidor till Pug, det finns flera verktyg för detta, Google.
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
Layout-vyn är projektets HTML-bas så i den filen behövs en validerande HTML grund. Öppna filen och skriv följande kod.
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.
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.
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.
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.
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.
Koden hänvisar nu till en users-vy som behöver skapas. Basera den på index-vyn.
Spara och ladda om, felsök vid behov.
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.
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.
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
Detta är en uppgift med eget arbete.
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.
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.
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.
Arbeta med Sass
Detta är en uppgift med eget arbete.
Testa nu att skapa variabler för ett par färger på sidan. Passa även på att styla User-vyns lista också.
Sidan coolors.co har Sass export.
Läs mer om Sass.
Last updated