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.

10 WordPress-plugins for å overføre WordPress-nettsteder - Best of

10 WordPress-plugins for å overføre WordPress-nettsteder - Best of

WordPress er ikke det enkleste å flytte eller overføre fra utvikling til produksjonsmiljø eller fra en server til en annen . Man kan komme på tvers av en rekke veibeskrivelser, for eksempel database import / eksport feil, fil eller database tillatelse feil, bane feil, og mange flere mens du migrerer en WordPress blogg eller et nettsted. De

(Tekniske og design tips)

En titt inn i: SublimeLinter 3

En titt inn i: SublimeLinter 3

I et tidligere innlegg har vi vist deg hvordan du finner potensielle kodefeil og feil i SublimeText ved hjelp av SublimeLinter. Dessverre, som en av våre lesere også pekte på det, virker det ikke i Sublime Text 3.Sublime Text 3 introduserte et nytt sett med API om hvordan et plugin skal fungere, noe som sannsynligvis har påvirket SublimeLinters-evner. Ut

(Tekniske og design tips)