—»     —»   Введение в Kit
  Раздел: Образование и Изучение   Нет комментариев  

Введение в Kit



Давайте предположим, что вы занимаетесь разработкой прототипов для веб-сайтов с использованием HTML-файлов. Представим, что у вас есть около 10 HTML-страниц, и все эти страницы разделяют между собой одинаковые компоненты вроде шапки, сайдбара и подвала.

И именно здесь возникает проблема: если вам нужно внести какое-то изменение, то вам придется отредактировать все файлы, в которых используется тот или иной компонент. Это контропродуктивно и требует больших временных затрат.

Введение в Kit

Чтобы избежать этого, вы можете попробовать воспользоваться шаблонными движками. Существует множество подобных движков, и у каждого из них есть свои отдельные функции. Сегодня мы хотим пообщаться с вами на тему одного из самых простых в этом смысле: языкового движка 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 --> &mdash; 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 значит, что мы можем сильно увеличить нашу продуктивность, так как теперь нам не нужно изменять наши коды во всех файлах каждый раз, когда нужно внести незначительное изменение. Вдобавок, это также позволяет нам сделать наш проект модульным, а это имеет значение.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 2733   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Печати в Текстильщиках
Печать цифровых фотографий. Гильдия издателей периодической печати
pechatige.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031