Un regard dans: La langue du kit

Imaginons que vous construisiez des prototypes pour un site Web avec des fichiers HTML . Vous avez environ 10 pages HTML ou plus, et ces pages partagent certains composants communs tels que l'en-tête, la barre latérale et le pied de page.

Maintenant, voici le problème: si vous faites un changement dans ces composants partagés, vous devrez peut-être aussi les changer dans les autres fichiers . C'est contre-productif et une grosse perte de temps.

Pour éviter cela, vous pouvez essayer des moteurs de templates . Il y a un certain nombre de moteurs de modèles là-bas, chacun avec ses caractéristiques distinctives. Dans ce post, nous allons vous guider à travers celui que nous avons trouvé pour être le plus simple mais encore puissant: Kit .

Qu'est-ce que Kit?

Kit est un langage propriétaire de Codekit qui apporte la capacité d' importation de fichiers et de variables en HTML. Il est écrit avec une extension de fichier .kit . En utilisant Codekit, il peut ensuite être compilé dans un fichier HTML lors d'une sauvegarde de fichier.

Variables

Les variables du kit ne sont pas figées; ils peuvent être définis avec la notation $ ou @ . Donc, si vous utilisez Kit avec LESS, vous pouvez nommer vos variables avec la notation @ pour suivre la convention LESS. De même, vous pouvez utiliser le $ pour Sass. Les valeurs peuvent être affectées de deux points, d'un signe égal ou d'un espace. Voici quelques exemples:

Cependant, il est à noter que vous ne pouvez définir qu'une seule variable par commentaire, l'exemple suivant ne fonctionnera donc pas comme variable.

Importer

Avec le langage Kit, vous pouvez importer n'importe quel type de fichier, y compris .html, .txt, .kit et même .php . Pour importer des fichiers, vous pouvez utiliser @import ou @include .

De plus, contrairement à la définition de variables, vous pouvez importer plusieurs fichiers sur une ligne, comme ceci:

Lors de l'enregistrement, Codekit récupère le contenu de ces fichiers et les ajoute au fichier.

Utiliser Kit

Nous avons donc vu ce que Kit a à offrir. Ils peuvent ne pas être beaucoup, mais ils sont certainement assez puissants pour rendre la vie plus facile lors de la manipulation d'un tas de fichiers HTML.

Dans un scénario pratique, nous pouvons décomposer notre document en plusieurs fichiers, par exemple: header.kit, sidebar.kit, footer.kit, head.kit, closing.kit et closing.kit . Nous importerons ces fichiers dans nos pages afin que lorsque nous faisons un changement, il s'appliquera sur toutes les pages.

Ouverture et clôture du document

Je suis sûr que les noms de fichiers sont assez explicites quant à ce que les fichiers closing.kit, sauf (peut-être) le closing.kit et le closing.kit .

Dans notre exemple ci-dessous, le fichier opening.kit contient le Doctype, la balise d'ouverture HTML et la balise body d'ouverture. Dans ce fichier, nous importons également le head.kit qui contient tout ce qui est enveloppé dans le élément, et peut également définir plusieurs variables globales qui peuvent être héritées à travers tous les fichiers, comme ceci:

Notez que j'ai également ajouté deux variables: @body_class dans la balise body et @page_name dans la balise title. Ces variables nous permettront de définir différentes classes et noms de pages sur les pages. Si nous avons deux pages nommées index.kit et about.kit, dans chacun de ces fichiers, nous pouvons définir les valeurs de ces deux variables comme suit:

index.kit

à propos de

Lorsque nous aurons sauvegardé les fichiers, Codekit remplacera les variables que nous avons placées dans la balise body et le title avec ces valeurs. Une chose à noter cependant, c'est que les variables doivent venir avant l'inclusion de opening.kit, sinon elles ne seront pas récupérées.

Conclusion

Comme mentionné précédemment, Kit pourrait être la langue de modèle la plus simple disponible. Il utilise uniquement la balise de commentaire HTML et offre une grande flexibilité dans la définition des variables et l'importation des fichiers.

La possibilité d'utiliser des variables et d'importer des fichiers en HTML signifie que nous pouvons augmenter notre productivité, car nous ne devons plus changer nos codes plusieurs fois dans plusieurs fichiers, ce qui prend beaucoup de temps. De plus, cela nous permet également de rendre notre projet modulaire et donc plus maniable.

40 excellents ensembles d'icônes mini

Lorsque vous partez à la recherche d'icônes pour vos créations, vous pouvez vous retrouver avec différents types d'icônes, certaines icônes muti-spécifiques et d'autres très spécifiques. Toutefois, lorsque vous concevez pour une application mobile ou un design Web mobile, vous avez besoin d'un ensemble de mini-icônes .Donc, pou

(Conseils techniques et de conception)

Un regard sur: L'industrie en plein essor des sports électroniques

L'industrie du jeu vidéo a récemment été lancée avec des compétitions et des tournois partout dans le monde. Le sport électronique, ou e-sport, est un terme qui désigne les compétitions organisées où les joueurs professionnels ou les joueurs vont s'affronter dans des jeux électroniques pour un prize pool.Les e-sport

(Conseils techniques et de conception)