Aktiv sida
Att skapa en active page länk med Pugs mixin, block och variabler.
Koden för det här avsnittet finner du i denna commit.
Mixin
Mixins är kodsnuttar i Pug som kan återanvändas, en sorts funktioner. För att ge exempel på hur mixins fungerar kommer du att skapa en active navigation länk till exempel-projektet.
Mixin kan antingen skapas i en enskild fil eller i en pug-templat. I det här exemplet skapas detta mixin i nav-vyn. Skriv mixin koden överst i filen.
Mixins kan sparas i separata filer så att du kan återanvända dem mellan olika projekt.
Studera koden ovan. Nav-link är namnet på den mixin som skapas. Denna mixin tar två parametrar (argument). Detta är som en funktion i de flesta programmeringsspråk.
href, för den faktiska länken som ska användas
name, för titeln som ska visas på länken
I koden används title variabeln från layout-vyns head block. Variabeln sätts till olika värden beroende på vilken aktiv vy som visas. Detta behöver läggas till i layout-vyn samt den aktiva sidan.
För att använda ett mixin är koden.
Block
I head-taggen på layout-vyn så lägger du till.
Först skapas ett block med namnet head, i detta initieras en variabel med namnet title som tilldelas värdet Webbserverprogrammering. Det låter alla sidor som ärver av layout-vyn byta ut innehållet i head blocket. På det sättet kan variabeln tilldelas ett nytt värde i vy filerna.
Resultatet blir nu att på index sidan så visas titeln Webbserverprogrammering - Hem, samt att sidans navigation kan kontrollera titel-variabelns värde och lägga till css-klassen active på nuvarande sida.
users.pug
Detta är en uppgift med eget arbete.
Färdigställ navigationen och koden i users-vyn.
Stilar
Active-klassens syfte är att ge användaren visuell återkoppling kring vilken sida som är aktiv. Klassen behöver alltså skilja sig från övriga länkar. Skriv följande kod.
Notera strukturen och indenteringen. För att skapa :hover
regeln i dokumentet används &-tecknet samt indraget. Sass tolkar det och skapar klasserna .active
och .active:hover
utifrån detta.
Last updated
Was this helpful?