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.

Pug

views/nav.pug

mixin nav-link(href, name)
  if name === title
    a.nav-link.active(href=href)= name
  else
    a.nav-link(href=href)= name

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.

Pug

+mixinname(params)
// dvs. för hem länken
+nav-link('/', 'Hem)

Block

I head-taggen på layout-vyn så lägger du till.

Pug

views/layout.pug

block head
  title Webbserverprogrammering

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.

Pug

views/index.pug

block head
  -var title = "Hem"
  title Webbserverprogrammering - #{title}

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.

• Skapa ett head block i filen users.pug

• Använd en titel-variabel för att ge sidan en titel.

• Skapa en länk till en Om-sida i navigationen.

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.

CSS

public/stylesheets/style.sass

  .active
    color: $active-color
    &:hover
      color: $active-color-hover

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.