Ein Blick in: Die Kit-Sprache
Angenommen, Sie haben Prototypen für eine Website mit HTML- Dateien erstellt. Sie haben etwa 10 HTML-Seiten oder so, und diese Seiten teilen einige gemeinsame Komponenten wie Header, Sidebar und Footer.
Jetzt kommt das Problem: Wenn Sie diese freigegebenen Komponenten ändern, müssen Sie sie möglicherweise auch in den anderen Dateien ändern . Es ist kontraproduktiv und eine große Zeitverschwendung.
Um dies zu vermeiden, können Sie Templating-Engines ausprobieren. Es gibt eine Reihe von Templating-Engines, die sich durch ihre besonderen Merkmale auszeichnen. In diesem Beitrag werden wir Sie durch einen führen, den wir als den einfachsten, aber immer noch leistungsfähigsten gefunden haben: Kit .
Was ist Kit?
Kit ist eine proprietäre Programmiersprache von Codekit, die den Import von Variablen und Dateien in HTML ermöglicht. Es wird mit einer .kit
Dateierweiterung geschrieben. Mit Hilfe von Codekit kann es beim Speichern einer Datei in eine HTML-Datei kompiliert werden.
Variablen
Kit-Variablen sind nicht in Stein gemeißelt; Sie können mit der Notation $
oder @
werden. Wenn Sie also Kit zusammen mit LESS verwenden, können Sie Ihre Variablen mit der @
-Notation benennen, um der LESS-Konvention zu folgen. Ähnlich können Sie das $
für Sass verwenden. Die Werte können mit Doppelpunkt, Gleichheitszeichen oder Leerzeichen zugewiesen werden. Im Folgenden finden Sie einige Beispiele:
Beachten Sie jedoch, dass Sie nur eine Variable pro Kommentar festlegen können. Daher funktioniert das folgende Beispiel nicht als Variable.
Einführen
Mit der Kit-Sprache können Sie jede Art von Datei einschließlich .html
, .txt
, .kit
und sogar .php
. Um Dateien zu importieren, können Sie @import
oder @include
.
Außerdem können Sie im Gegensatz zur Definition von Variablen mehrere Dateien in einer Zeile importieren:
Nach dem Speichern greift Codekit den Inhalt dieser Dateien und hängt sie an die Datei an.
Verwenden von Kit
Wir haben also gesehen, was Kit zu bieten hat. Sie sind vielleicht nicht viel, aber sie sind sicherlich stark genug, um das Leben einfacher zu machen, wenn Sie eine Menge HTML-Dateien bearbeiten.
In einem praktischen Szenario können wir unser Dokument in mehrere Dateien header.kit
, zum Beispiel: header.kit
, sidebar.kit
, footer.kit
, head.kit
, opening.kit
und closing.kit
. Wir werden diese Dateien auf unsere Seiten importieren, so dass sie bei einer Änderung auf allen Seiten angewendet werden.
Dokument öffnen und schließen
Ich bin mir sicher, dass die Dateinamen ziemlich selbsterklärend sind, was die Dateien beinhalten, außer (vielleicht) dem opening.kit
und dem closing.kit
.
In unserem Beispiel unten enthält die Datei opening.kit
den Doctype, das HTML-Eröffnungs-Tag und das Eröffnungs-Body-Tag. In dieser Datei importieren wir auch das head.kit
das alles enthält, was innerhalb des
<! - @page_name -> - Hongkiat.com
Beachten Sie, dass ich auch zwei Variablen hinzugefügt habe: @body_class
im body-Tag und @page_name
im title-Tag. Diese Variablen ermöglichen es uns, verschiedene Klassen und Seitennamen auf den Seiten festzulegen. Wenn wir zwei Seiten mit dem Namen index.kit
und about.kit
, können wir in jeder dieser Dateien die Werte dieser beiden Variablen wie about.kit
setzen:
index.kit
about.kit
Wenn wir die Dateien gespeichert haben, ersetzt Codekit die Variablen, die wir in das body
Tag und den title
mit diesen Werten eingefügt haben. Zu beachten ist jedoch, dass die Variablen vor der Aufnahme von opening.kit
, sonst werden sie nicht abgeholt.
Fazit
Wie bereits erwähnt, könnte Kit die einfachste verfügbare Templatierungssprache sein. Es verwendet nur das HTML-Kommentar-Tag und bietet große Flexibilität beim Definieren von Variablen und Importieren von Dateien.
Die Möglichkeit, Variablen zu verwenden und Dateien in HTML zu importieren, bedeutet, dass wir unsere Produktivität erhöhen können, da wir unsere Codes nicht mehr mehrfach in mehreren Dateien ändern müssen, was sehr zeitaufwendig ist. Darüber hinaus ermöglicht es uns, unser Projekt modular und damit überschaubarer zu machen.
Kleinunternehmen: Warum sollten Sie sich auf Ihre visuellen Inhalte konzentrieren?
Du hast hart gearbeitet und langweilige Blogposts und -artikel zusammen mit ein paar Bildern veröffentlicht, aber zu deiner Bestürzung bekommst du immer noch nicht genug Traffic oder Engagement in deinem Blog. In diesem Zeitalter aller Arten von Big Data werden Menschen oft mit einer Menge Informationen bombardiert, die sie entweder nicht brauchen oder nicht konsumieren können .Dr
Warum richtige Markendesign ist wichtig
Manche Leute denken, dass traditionelles Branding-Design im Zeitalter von Social Networking, neuen Medien und der "persönlichen Marke" irrelevant wird . Ich sage, das ist lächerlich. Natürlich mag ich voreingenommen sein, selbst Branding-Designer zu sein. Aber große Unternehmensmarken-Strategien kosten Millionen von Dollar, und kein CEO würde jemals so viel Geld für etwas ausgeben, das keine Ergebnisse oder Dividenden bringt.Wenn