no.hideout-lastation.com
Paradis For Designere Og Utviklere


En titt inn i: Kitsspråket

La oss si at du var å bygge prototyper for et nettsted med HTML- filer. Du har omtrent 10 HTML-sider eller så, og disse sidene deler noen vanlige komponenter som Header, Sidebar og Footer.

Nå kommer problemet: Hvis du gjør en endring i disse delte komponentene, kan du ende opp med å endre dem i de andre filene også. Det er kontraproduktivt og stort spild av tid.

For å unngå dette kan du prøve ut templerende motorer . Det finnes en rekke templerende motorer der ute, hver med sine særegne egenskaper. I dette innlegget skal vi gå deg gjennom en som vi har funnet å være den enkleste men likevel kraftige: Kit .

Hva er Kit?

Kit er et proprietært språk av Codekit som bringer variabel og fil import evne til HTML. Den er skrevet med en .kit . Ved hjelp av Codekit kan den deretter kompileres til en HTML-fil ved en filsparing.

variabler

Kitvariabler er ikke satt i stein; de kan defineres med $ eller @ notasjonen. Så, hvis du bruker Kit sammen med MINDRE, kan du navngi variablene dine med @ notasjonen for å følge MINDRE konvensjonen. På samme måte kan du bruke $ for Sass. Verdiene kan tilordnes med kolon, like tegn eller mellomrom. Nedenfor er noen eksempler:

Det er imidlertid verdt å merke seg at du kanskje bare angir en variabel per kommentar, slik at følgende eksempel ikke fungerer som en variabel.

Import

Med Kit-språket kan du importere alle typer filer, inkludert .html, .txt, .kit og til og med .php . For å importere filer kan du bruke @import eller @include .

Videre, i motsetning til å definere variabler, kan du importere flere filer i én linje, slik som:

Ved lagring vil Codekit gripe innholdet i disse filene og legge dem til filen.

Bruke Kit

Så vi har sett hva Kit har å tilby. De kan ikke være mye, men de er absolutt kraftige nok til å gjøre livet enklere når man håndterer en haug med HTML-filer.

I et praktisk scenario kan vi bryte dokumentet ned i flere filer, for eksempel: header.kit, sidebar.kit, footer.kit, head.kit, opening.kit og closing.kit . Vi vil importere disse filene til våre sider, slik at når vi gjør en endring, gjelder den på alle sidene.

Dokument åpning og avslutting

Jeg er sikker på at filnavnene er ganske selvforklarende hva filene bærer, med unntak av (kanskje) opening.kit og closing.kit .

I vårt eksempel nedenfor inneholder filen open.kit Doctype, HTML-åpningstaggen og åpningslegemet. I denne filen importerer vi også head.kit som inneholder alt som er pakket inn i element, og kan også definere flere globale variabler som kan arves gjennom alle filene, slik som:

 <! - @page_name -> - Hongkiat.com 

Merk at jeg også har lagt til to variabler: @body_class i @page_name og @page_name i titteltaggen. Disse variablene vil tillate oss å angi forskjellige klasser og sidenavn på tvers av sidene. Hvis vi har to sider kalt index.kit og about.kit, kan vi i hver av disse filene sette verdiene for disse to variablene slik:

index.kit

about.kit

Når vi har lagret filene, erstatter Codekit de variablene vi har lagt inn i kroppsmerket og title med disse verdiene. En ting å merke seg er at variablene må komme før inkludering av opening.kit, ellers vil de ikke bli plukket opp.

Konklusjon

Som tidligere nevnt, kan Kit være det enkleste templerende språket som er tilgjengelig. Den bruker bare HTML-kommentarkoden, og gir stor fleksibilitet når det gjelder å definere variabler og importere filer.

Å kunne bruke variabler og importere filer i HTML betyr at vi kan øke vår produktivitet, da vi ikke lenger må endre koder flere ganger i flere filer, noe som er svært tidkrevende. I tillegg tillater det oss også å gjøre prosjektet modulært, og dermed mer overkommelig.

20 WordPress Group Kjøp Temaer og Plugins for 2018

20 WordPress Group Kjøp Temaer og Plugins for 2018

Gruppekjøp er en av de hotteste trender i online shopping arena disse dager. Og hvorfor ville det ikke! Med så mange nettsteder som tilbyr bulkpakker til utrolig lave priser, ønsker alle å være den klarte fyren som fikk det bedre tilbudet - og det er det som bringer disse nettstedene så mye profitt.Så, h

(Tekniske og design tips)

Slik tilpasser du Firefox Reader View for bedre lesbarhet

Slik tilpasser du Firefox Reader View for bedre lesbarhet

Reader View er et populært trekk ved Firefox-nettleseren, som endrer utseendet på en nettside, og gjør det lettere å fjerne visuelle rot som bilder, annonser, overskrifter og sidebjelker. Leservisning er imidlertid ikke tilgjengelig for alle hjemmesider.Hvis funksjonen er tilgjengelig for en bestemt side, finner du ikonet for å aktivere det i form av et lite bokikon som vises til høyre for adressefeltet. Det

(Tekniske og design tips)