Sekarang inilah masalahnya: jika Anda membuat perubahan dalam komponen bersama, Anda mungkin akhirnya harus mengubahnya dalam file lain juga. Hal ini kontraproduktif dan pemborosan besar waktu .
Untuk menghindari hal ini, Anda dapat mencoba mesin template. Ada beberapa mesin template di luar sana, masing-masing dengan fitur khas. Dalam posting ini, kita akan memandu Anda melalui salah satu yang kami temukan untuk menjadi sederhana namun tetap kuat : .Kit
Apa itu .Kit ?
.Kit adalah bahasa milik Codekit yang membawa variabel dan berkas kemampuan impor ke HTML. Hal ini ditulis dengan ekstensi file .kit. Menggunakan Codekit, maka dapat dikompilasi menjadi file HTML pada file save.
Variabel
Variabel Kit tidak diatur dalam batu, mereka dapat didefinisikan dengan $ atau @ notasi. Jadi, jika Anda menggunakan Kit bersama dengan KURANG, Anda dapat nama variabel Anda dengan notasi @ untuk mengikuti konvensi KURANG. Demikian pula, Anda dapat menggunakan $ untuk Sass. Nilai-nilai dapat diberikan dengan usus, tanda sama dengan, atau ruang.
Berikut adalah beberapa contoh :
< - ! $ Var : nilai variabel - >
< - ! @ Var : nilai variabel - >
< - ! $ Var = nilai variabel - >
< - ! @ Var = nilai variabel - >
< - ! $ Var nilai variabel - >
Namun, perlu dicatat bahwa Anda hanya dapat menetapkan satu variabel per komentar, sehingga contoh berikut tidak akan bekerja sebagai variabel.
< - ! $ Var1 : nilai variabel , @ var2 : nilai variabel - >
Impor
Dengan bahasa Kit, Anda dapat mengimpor semua jenis file termasuk .html, .Txt, .Kit, dan bahkan .Php. Untuk mengimpor file, Anda dapat menggunakan @ import atau @ include.
< - ! @ Import " file.kit " - >
< - ! @ Include " file.html " - >
Selain itu, tidak seperti mendefinisikan variabel, Anda dapat mengimpor beberapa file dalam satu baris, seperti:
< - ! @ Import file1.kit , file2.html , inc/file3.txt - >
Setelah save, Codekit akan mengambil isi dalam file ini dan menambahkan mereka ke file
menggunakan .Kit
Jadi kita telah melihat apa Kit yang ditawarkan. Mereka mungkin tidak banyak, tetapi mereka pasti cukup kuat untuk membuat hidup lebih mudah ketika menangani sekelompok file HTML.
Dalam skenario praktis, kita dapat mematahkan dokumen kami ke dalam beberapa file, misalnya : header.kit, sidebar.kit, footer.kit, head.kit, opening.kit, dan closing.kit. Kami akan mengimpor file-file ini ke halaman kita sehingga ketika kita membuat perubahan, itu akan berlaku pada semua halaman.
Dokumen Pembukaan dan Penutupan
Saya yakin nama file yang cukup jelas mengenai file apa yang membawa, kecuali (mungkin) yang opening.kit, dan closing.kit tersebut.
Dalam contoh kita di bawah, file opening.kit berisi DOCTYPE, tag pembuka HTML, dan tag body pembukaan. Dalam file ini, kita juga mengimpor head.kit yang berisi segala sesuatu yang dibungkus dalam elemen head, dan juga dapat mendefinisikan beberapa variabel global yang dapat diwariskan melalui semua file, seperti:
< ! DOCTYPE html >
<html lang="SV">
< - ! @ Path_js : js / - >
< - ! @ Path_css : css / - >
< - ! @ Path_img : img / - >
<head>
<title> < - ! @ page_name - > - Hongkiat.com < / title>
< link href = " < - ! @ path_css - > style.css " rel = " stylesheet " Media = " screen " >
< skrip src = " < - ! @ path_js - > jquery.js " > < / script >
< / head>
< class body = " < - ! @ body_class - > " >
Perhatikan bahwa juga ditambahkan dua variabel : @ body_class pada tag tubuh dan @ page_name dalam tag judul. Variabel ini akan memungkinkan kita untuk mengatur kelas yang berbeda dan nama halaman di halaman . Jika kita memiliki dua halaman bernama index.kit dan about.kit, di masing-masing file kita dapat mengatur nilai dari kedua variabel seperti:
index.kit
< - ! @ Page_name : Homepage - >
< - ! @ Body_class : blog rumah - >
< - ! @ Include inc / opening.kit - >
about.kit
melihat plaincopy untuk clipboardprint ?
< - ! @ Page_name : Tentang - >
< - @ Body_class : tentang halaman halaman template - >
< - ! @ Include inc / opening.kit - >
Ketika kita telah menyimpan file, Codekit akan menggantikan variabel yang kita telah dimasukkan ke dalam tubuh dan tag judul dengan nilai-nilai tersebut. Satu hal yang perlu diperhatikan meskipun, adalah bahwa variabel harus datang sebelum masuknya opening.kit, kalau tidak mereka tidak akan dijemput.
Kesimpulan
Seperti disebutkan sebelumnya, Kit bisa menjadi bahasa template yang paling sederhana tersedia. Ini hanya menggunakan tag HTML komentar, dan memberikan fleksibilitas yang besar dalam mendefinisikan variabel dan mengimpor file.
Mampu menggunakan variabel dan file impor dalam HTML berarti bahwa kita dapat meningkatkan producivity kita, karena kita tidak lagi harus mengubah kode kita beberapa kali dalam beberapa file, yang sangat memakan waktu. Selain itu, juga memungkinkan kita untuk membuat modular proyek kita, dan dengan demikian lebih mudah dikelola.
Sumber hongkiat.com