Uno sguardo in: The Kit Language

Diciamo che stavi costruendo prototipi per un sito Web con file HTML . Hai circa 10 pagine HTML o giù di lì e queste pagine condividono alcuni componenti comuni come Intestazione, Barra laterale e Piè di pagina.

Ora arriva il problema: se apporti una modifica a questi componenti condivisi, potresti doverli modificare anche negli altri file . È controproducente e una grande perdita di tempo.

Per evitare questo, puoi provare i motori di template . Ci sono una serie di motori di modelli là fuori, ognuno con le sue caratteristiche distintive. In questo post ti illustreremo quello che abbiamo scoperto essere il più semplice ma potente: Kit .

Cos'è il kit?

Kit è un linguaggio proprietario di Codekit che consente di importare variabili e file in HTML. È scritto con estensione .kit . Usando Codekit, può quindi essere compilato in un file HTML su un file salvato.

variabili

Le variabili del kit non sono impostate in pietra; possono essere definiti con la notazione $ o @ . Quindi, se usi Kit insieme a LESS, puoi nominare le tue variabili con la notazione @ per seguire la convenzione LESS. Allo stesso modo, puoi usare $ per Sass. I valori possono essere assegnati con due punti, segno di uguale o spazio. Di seguito sono riportati alcuni esempi:

Tuttavia, vale la pena notare che è possibile impostare solo una variabile per commento, quindi il seguente esempio non funzionerà come variabile.

Importare

Con la lingua del kit, puoi importare qualsiasi tipo di file inclusi .html, .txt, .kit e anche .php . Per importare i file, puoi usare @import o @include .

Inoltre, a differenza della definizione delle variabili, puoi importare più file in una riga, in questo modo:

Al momento del salvataggio, Codekit catturerà il contenuto di questi file e li aggiungerà al file.

Utilizzo del kit

Quindi abbiamo visto cosa Kit ha da offrire. Potrebbero non essere molto, ma sono certamente abbastanza potenti da semplificare la vita quando si gestiscono un sacco di file HTML.

In uno scenario pratico, possiamo suddividere il nostro documento in diversi file, ad esempio: header.kit, footer.kit, head.kit, opening.kit, closing.kit e closing.kit . Importeremo questi file nelle nostre pagine in modo che quando apportiamo una modifica, si applichino su tutte le pagine.

Apertura e chiusura del documento

Sono sicuro che i nomi dei file sono piuttosto auto-esplicativi riguardo a cosa stanno portando i file, tranne (forse) il file opening.kit e il file closing.kit .

Nel nostro esempio qui sotto, il file opening.kit contiene il Doctype, il tag di apertura HTML e il tag di apertura del corpo. In questo file, importiamo anche head.kit che contiene tutto ciò che è head.kit nel elemento, e può anche definire diverse variabili globali che possono essere ereditate attraverso tutti i file, in questo modo:

Nota che ho aggiunto anche due variabili: @body_class nel tag body e @page_name nel tag title. Queste variabili ci permetteranno di impostare diverse classi e nomi di pagine tra le pagine. Se abbiamo due pagine denominate index.kit e about.kit, in ognuno di questi file possiamo impostare i valori di queste due variabili in questo modo:

index.kit

about.kit

Quando abbiamo salvato i file, Codekit sostituirà le variabili che abbiamo inserito nel tag body e il title con quei valori. Una cosa da notare però è che le variabili devono arrivare prima dell'inserimento di opening.kit, altrimenti non verranno prese in considerazione.

Conclusione

Come accennato in precedenza, Kit potrebbe essere il più semplice linguaggio di template disponibile. Utilizza solo il tag di commento HTML e offre una grande flessibilità nella definizione di variabili e nell'importazione di file.

Essere in grado di utilizzare variabili e importare file in HTML significa che possiamo aumentare la nostra produttività, dal momento che non dobbiamo più cambiare i nostri codici più volte in più file, il che richiede molto tempo. Inoltre, ci consente anche di rendere il nostro progetto modulare e quindi più gestibile.

Crea la tua Guida al piano personale con la guida del percorso

La navigazione di un grande edificio per la prima volta può essere molto disorientante, in particolare se stai cercando attivamente uno sport particolare in detto edificio. La stessa Microsoft sarebbe probabilmente consapevole del fatto che la navigazione in un nuovo luogo potrebbe essere una sfida per alcuni, motivo per cui la società ha rilasciato un'app chiamata Path Guide per dispositivi Android.P

(Consigli tecnici e di design)

20 stupefacenti colpi di droni

I droni sono forse le tecnologie più innovative dei nostri tempi e gli strumenti più utili per i fotografi. Con i droni, puoi scattare video aerei o scattare fotografie aeree. Questo tipo di foto sembra totalmente fuori dal mondo, in quanto è difficile immaginare come i luoghi sembrino davvero dal cielo .Al

(Consigli tecnici e di design)