hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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:

 <! - @page_name -> - Hongkiat.com 

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.

10 habitudes de programmation Les développeurs devraient adopter

10 habitudes de programmation Les développeurs devraient adopter

La programmation d'apprentissage est amusante et facile, mais écrire un bon programme peut s'avérer une tâche ardue . Dans la plupart des cas, nous nous retrouvons constamment à nous gratter la tête en essayant de comprendre le code spaghetti que nous avons écrit, ou en faisant beaucoup de changements à cause d'une fonctionnalité mineure nouvellement ajoutée .Ces résu

(Conseils techniques et de conception)

5 meilleures extensions pour gérer les onglets et la mémoire Chrome

5 meilleures extensions pour gérer les onglets et la mémoire Chrome

L'un des nombreux atouts de Chrome consiste à synchroniser tous vos signets et vos extensions Google Chrome avec un compte Google. Il ouvre également des onglets dans un processus de mémoire distinct afin de ne pas devoir l'arrêter complètement si un onglet tombe en panne.Cependant, l'implémentation de processus de mémoire séparés signifie qu'il utilise beaucoup de mémoire lorsque vous ouvrez plusieurs onglets. Cela peu

(Conseils techniques et de conception)