nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Een kijkje in: The Kit Language

Laten we zeggen dat je prototypes aan het bouwen bent voor een website met HTML- bestanden. Je hebt ongeveer 10 HTML-pagina's of zo, en deze pagina's delen enkele veelgebruikte componenten zoals Header, Sidebar en Footer.

Nu komt hier het probleem: als u een verandering aanbrengt in deze gedeelde componenten, kunt u ze uiteindelijk ook in de andere bestanden wijzigen . Het is contraproductief en een grote verspilling van tijd.

Om dit te voorkomen, kun je template-engines uitproberen. Er zijn een aantal sjablonerende engines, elk met zijn onderscheidende kenmerken. In deze post gaan we je begeleiden naar een die we als de eenvoudigste en toch nog steeds krachtigste hebben gevonden: Kit .

Wat is Kit?

Kit is een eigen taal van Codekit die variabele en bestandsimportmogelijkheden naar HTML brengt. Het is geschreven met de extensie .kit . Met Codekit kan het vervolgens worden gecompileerd in een HTML-bestand na het opslaan van een bestand.

Variabelen

Kitvariabelen worden niet in steen gezet; ze kunnen worden gedefinieerd met de $ of @ notatie. Dus als u Kit samen met LESS gebruikt, kunt u uw variabelen een naam geven met de @ -notatie om de LESS-conventie te volgen. Op dezelfde manier kunt u de $ voor Sass gebruiken. De waarden kunnen worden toegewezen met dubbele punt, gelijkteken of spatie. Hieronder zijn enkele voorbeelden:

Het is echter vermeldenswaard dat u slechts één variabele per opmerking mag instellen, dus het volgende voorbeeld zal niet werken als een variabele.

Importeren

Met de taal Kit kunt u elk type bestand importeren, inclusief .html, .txt, .kit en zelfs .php . Om bestanden te importeren, kunt u @import of @include .

Bovendien kunt u, in tegenstelling tot het definiëren van variabelen, meerdere bestanden op één regel importeren, zoals:

Na het opslaan haalt Codekit de inhoud in deze bestanden en voegt ze toe aan het bestand.

Kit gebruiken

Dus we hebben gezien wat Kit te bieden heeft. Ze zijn misschien niet veel, maar ze zijn zeker krachtig genoeg om het leven gemakkelijker te maken bij het verwerken van een heleboel HTML-bestanden.

In een praktisch scenario kunnen we ons document opsplitsen in verschillende bestanden, bijvoorbeeld: header.kit, sidebar.kit, footer.kit, head.kit, opening.kit en closing.kit . We zullen deze bestanden in onze pagina's importeren, zodat wanneer we een wijziging aanbrengen, deze op alle pagina's van toepassing is.

Openen en sluiten van documenten

Ik weet zeker dat de bestandsnamen vrij duidelijk zijn voor wat de bestanden bevatten, behalve (misschien) de opening.kit en de closing.kit .

In ons onderstaande voorbeeld bevat het bestand openings.kit het Doctype, de HTML-openingstag en de openingstags-tag. In dit bestand importeren we ook de head.kit die alles bevat dat is ingepakt in de element, en kan ook verschillende globale variabelen definiëren die door alle bestanden kunnen worden geërfd, zoals:

 <! - @page_name -> - Hongkiat.com 

Merk op dat ik ook twee variabelen heb toegevoegd: @body_class in de body-tag en @page_name in de title-tag. Met deze variabelen kunnen we verschillende klassen en paginanamen over de pagina's instellen. Als we twee pagina's met de naam index.kit en about.kit, kunnen we in elk van deze bestanden de waarden van die twee variabelen als volgt instellen:

index.kit

about.kit

Wanneer we de bestanden hebben opgeslagen, vervangt Codekit de variabelen die we in de body tag en de title met die waarden hebben geplaatst. Een ding om op te merken is echter dat de variabelen moeten komen vóór de opname van opening.kit, anders worden ze niet opgehaald.

Conclusie

Zoals eerder vermeld, kan Kit de eenvoudigste sjabloontaal zijn die beschikbaar is. Het maakt alleen gebruik van de HTML-commentaartag en biedt een grote flexibiliteit bij het definiëren van variabelen en het importeren van bestanden.

Het kunnen gebruiken van variabelen en het importeren van bestanden in HTML betekent dat we onze productiviteit kunnen verhogen, omdat we onze codes niet meer meerdere keren in meerdere bestanden hoeven te wijzigen, wat erg tijdrovend is. Bovendien kunnen we ons project modulair en dus beter beheersbaar maken.

5 eenvoudige manieren om uw online omzet te stimuleren

5 eenvoudige manieren om uw online omzet te stimuleren

Heeft u uw analyserapporten ooit gezien en gemerkt dat uw winkel niet genoeg geld verdient? Hoe voelde dat? Het moet vrij slecht aanvoelen. In die momenten van wanhoop zou je waarschijnlijk alles doen om de inkomsten van je winkel te verhogen.Wat daarna gebeurt is vrij normaal: je gaat op zoek naar andere ideeën over hoe je je inkomsten kunt vergroten, maar vindt niets nuttigs.

(Technische en ontwerptips)

20 Awesome robotgadgets om uit te spoelen

20 Awesome robotgadgets om uit te spoelen

Wilt u nieuwe cadeau-ideeën voor de komende feestdagen? Hoe zit het met het krijgen van een robot speelgoed of gadget voor de jongen, tiener of volwassene in je leven? Verras je geliefden met deze fijne, geavanceerde robotgadgets die hen kunnen helpen met huishoudelijke taken, robotkits voor doe-het-zelfprojecten, robot-metgezellen die entertainen of opvoeden, de ontwikkeling van jonge kinderen ondersteunen of helpen bij het verzorgen van huisdieren.

(Technische en ontwerptips)