nl.hideout-lastation.com
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
<! - @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.
Hoe HTML5 bereikschuifregelaar over meerdere browsers op te maken
Het bereik is een van het nieuwe invoertype dat is geïntroduceerd in HTML5. Met dit invoertype kunt u een nummer invoeren binnen het opgegeven bereik. De browsers zullen dit invoertype native als een schuifregelaar weergeven . Het is een zeer intuïtieve gebruikersinterface die we vaak in een app vinden.
Hoe Black Folder Icon Background te verwijderen in Windows 10
Er is schijnbaar een fout in Windows 10 die een zwarte achtergrond aan mappen toevoegt . Het heeft op geen enkele manier invloed op de gegevens erin; het maakt gewoon dat de map eruit ziet, nou ... lelijk. Het kan gebeuren vanwege beschadigde bestanden, een probleem met de cache van de mapminiatuur of met de Windows-afbeelding
