И именно здесь возникает проблема: если вам нужно внести какое-то изменение, то вам придется отредактировать все файлы, в которых используется тот или иной компонент. Это контропродуктивно и требует больших временных затрат.
Чтобы избежать этого, вы можете попробовать воспользоваться шаблонными движками. Существует множество подобных движков, и у каждого из них есть свои отдельные функции. Сегодня мы хотим пообщаться с вами на тему одного из самых простых в этом смысле: языкового движка Kit.
Что такое Kit?
Kit представляет собой отдельный язык Codekit, который привносит в HTML возможность импортировать переменные и файлы. Файлы данного формата имеют расширение .kit. Используя Codekit, вы можете компилировать код в HTML-файл прямо при сохранении.
Переменные
Kit-переменные пока что не имеют какой-то определенной строгой формы, - их можно определять при помощи знаков $ или @. Так что, если вы используете Kit вместе с LESS, вы можете задавать имена переменных при помощи @, что позволяет вам следовать концепции LESS. Точно так же вы можете использовать и $ для Sass. Значения можно задавать при помощи знаков двоеточия, знака равенства или пробела. Ниже приведено несколько примеров:
<!-- $var: variable value -->
<!-- @var: variable value -->
<!-- $var = variable value -->
<!-- @var = variable value -->
<!-- $var variable value -->Однако важно также отметить, что вы можете определить всего одну переменную на комментарий, так что данный пример не сработает в качестве переменной.
<!-- $var1: variable value, @var2: variable value -->Импортирование
При помощи языка Kit, вы можете импортировать любые типы файлов, включая .html, .txt, .kit и даже .php. Чтобы импортировать файлы, вы можете использовать @import или @include.
<!-- @import "file.kit" -->
<!-- @include "file.html" -->Более того, в отличии от определения переменных, вы можете импортировать сразу несколько файлов одной строкой. Реализуется это следующим образом:
<!-- @import file1.kit, file2.html, inc/file3.txt -->При сохранении, Codekit извлечет контент этих файлов и вставит их в файл.
Применение Kit
Итак, мы рассмотрели, что нам предлагает Kit. Возможно, это не так уж и много, но этого вполне достаточно для того, чтобы облегчить себе жизнь при работе с множественными HTML-файлами.
На практике мы можем разобрать наш документ на несколько файлов. К примеру, header.kit, sidebar.kit, footer.kit, head.kit, opening.kit и closing.kit. Мы импортируем эти файлы в наши страницы, и поэтому, когда мы вносим изменения в один из этих компонентов, его содержимое обновляется сразу на всех страницах.
Открытие и закрытие документов
Нам кажется, что названия файлов вполне сами себя объясняют. За исключением, возможно, opening.kit и closing.kit.
В нижеприведенном примере, файл opening.kit состоит из doctype, открывающего HTML-тэга и открывающего тэга body. В данном файле мы также импортируем head.kit, который содержит все, что обернуто в элемент 'head', а также можем определить несколько глобальных переменных, которые могут наследоваться во всех файлах следующим образом:
<!DOCTYPE html>
<html lang="en-US">
<!-- @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">
<script src="<!-- @path_js -->jquery.js"></script>
</head>
<body class="<!-- @body_class -->">Обратите внимание на то, что мы также добавили 2 переменные: @body_class в тэге body и @page_name в тэге title. Эти переменные позволят нам устанавливать разные классы и названия страниц между страницами. Если у нас есть две страницы с названиями index.kit и about.kit, в каждом из этих файлов мы можем использовать значения этих переменных следующим образом:
index.kit
<!-- @page_name: Homepage -->
<!-- @body_class: home blog -->
<!-- @include inc/opening.kit -->about.kit
<!-- @page_name: About -->
<!-- @body_class: about page page-template -->
<!-- @include inc/opening.kit -->Когда мы сохраняем файлы, Codekit заменяет этими значениями переменные, которые мы поместили в тэги body и title. Здесь следует отметить следующее: переменные появляются перед включением opening.kit, иначе они просто не будут работать.
В завершение
Как уже было отмечено ранее, Kit может стать для вас самым простым языком шаблонов. Он использует только тэг комментария в HTML, и дает нам большую гибкость в определении переменных и импортировании файлов.
Возможность использовать переменные и импортировать файлы в HTML значит, что мы можем сильно увеличить нашу продуктивность, так как теперь нам не нужно изменять наши коды во всех файлах каждый раз, когда нужно внести незначительное изменение. Вдобавок, это также позволяет нам сделать наш проект модульным, а это имеет значение.
