Работа с CMS NetCat. Урок 8. Адаптация html-шаблона

Данный урок научит вас тому, как самостоятельно можно внедрить html-вёрстку на сайт под управлением CMS NetCat. Сразу же уточню для то, что для NetCat'a не существует готовых html-шаблонов, как для многих других CMS. Точно так же не существует каталогов, где бы вы могли найти раздел с названием "Шаблоны для CMS NetCat". Ситуация в данном случае простая и решается весьма несложным образом - для вас подойдёт любой чистый html-шаблон, который вы можете найти! Разумеется, в том случае, если вы берёте шаблон уже адаптированный для, предположим, CMS Joomla или WordPress, то вам прийдётся его сначала почистить от специальных функций, переменных и т.д.

Таким образом всё, что вам нужно сделать - заказать у дизайнера макет, у верстальщика шаблон и далее заняться внедрением шаблона на сайт. Так же вы можете воспользоваться уже готовым html-шаблоном. В этом случае, при поиске, именно такой запрос вам нужно писать в поисковой системе ("html-шаблоны", "html-templates" и т.д.). Этим способом воспользуемся и мы.

Для написания данного урока и продолжения построение нашего сайта на CMS NetCat, мной был выбран бесплатный html-шаблон под названием "Shop Around" от производителя Chocotemplates.

Наш шаблон выглядит следующим образом (демо-версия):

Рис.1 - Внедряемый html-шаблон

Данный шаблон легко может быть использован для небольшого интернет-магазина.

Сейчас давайте ненадолго перейдём в администраторский раздел NetCat'a и посмотрим где должен находиться шаблон нашего сайта. На сайте под управлением CMS NetCat вы можете использовать любое количество макетов (шаблонов). В первом уроке вы можете посмотреть как выглядит наш сайт сейчас. В нашем уроке, мы будем использовать только один шаблон. Управление макетами находится в разделе "Разработка: Макеты дизайна":

Рис.2 - Раздел с существующими макетами

Как вы видите, у нас уже существует "Стандартный макет", но я предлагаю его не использовать, а создать новый. Для создания нового макета необходимо нажать на пиктограмму с зелёным крестиком: у соответствующего раздела-родителя. Должен заметить, что у макетов, как и у разделов, так же существует иерархия и вложенности. Мы же, в данном случае, выбираем самый верхний пункт "Макеты дизайна":

Рис.4 - Родительский пункт

При нажатии на кнопку добавления откроется стандартное окно добавления нового макета, оно же управление макетом.

Рис.5 - Окно для управления макетом

Структурированно наш макет должен делиться на:

1. Хедер (шапка). Верхняя часть сайтас логотипом, навигацией и т.п.
2. Контентная часть. Всё содержимое нашего сайта
3. Футер (подвал). Нижняя часть сайта со счётчиками, копирайтами и т.д.

Теперь давайте посмотрим на то, какие поля присутствуют в макете дизайна:

1. Название макета. Название используется только для разработчика и визуально на самом сайе никак не отображается.
2. Шаблоны вывода навигации. Данное поле содержит массивы, используемые при построении меню, путь по сайту ("хлебные крошки") и т.п. Поле так же позволяет добавлять некоторый php или js скрипт, который может участвовать в составлении макета.
3. Верхняя часть страницы (Header). Собственно, название говорит само за себя. В данное поле помещается всё то, что должно отображаться в хедере вашего сайта.
4. Нижняя часть страницы (Footer). В данное поле помещаться всё то, что будет отображаться в подвале вашего сайта.
5. Настройки отображения макета дизайна в разделе. Данные настройки содержат массивы задаваемых разработчиком переменных/полей, которые задаются один раз и далее, в них просто прописываются необходимые значения. Пример того, как выглядят подобные настройки мы рассматривали при настройке компонента "Обратная связь" в визуальных настройках.
6. Дополнительные поля. По-умолчанию добавлено только одно поле "Таблица стилей", но вы можете добавить свои поля по необходимости перейдя в раздел "Разработка: Системные таблицы: Макеты дизайна". Потом свои поля вы сможете использовать в макете дизайна. Использование существующего поля (CSS) в качестве хранения стилей возможно, но не желательно. Дело в том, что значения, которые будут сюда записаны, попадут прямиком в исходный код шаблона, что увеличит размер страницы. Всё же рекомендуется выносить все CSS стили в отдельный файл. Отдельный файл легко кешируется браузером, сервером, что позволяет загружать стили один раз для многих страниц, тогда как код внутри страницы кешироваться не будет.

С полями макета разобрались, теперь давайте вернёмся к нашему html-шаблону и визуально разделим его на наши составляющие. Пусть вас не смущает то, что наш учебный макет на английском языке, потому что в процессе внедрения все необходимые места будут нами переведены.

Рис.6 - Шаблон с разделёнными осставляющими

Для удобства, мной были выделены цветом 4 зоны для внедрения в макет. Давайте рассмотрим их начиная с верхнего:

1. Зелёным цветом выделено то, что пойдёт в хедер. Сюда будут включены: логотип, главное меню, корзина товаров, форма поиска и список категорий. Сразу поясню, почему блоки из боковой панели так же идут в хедер. Дело в том, что нам нужно найти такую область, которая будет повторяться на всех или на большинстве страниц. В данном случае, все элементы боковой панели как раз-таки будут выводиться на всех страницах нашего сайта.
2. Красным цветом обозначена панель с товарами. В нашем случае пусть это будет список последних товаров. Данную панель считаю нужным выводить только на главной странице.
3. Жёлтым цветом обозначен футер нашего сайта, а именно вся нижняя часть.
4. Невыделенная часть в центре является контентной областью и будет изменяться в зависимость от нашего содержимого.

Теперь переходим к файлам нашего шаблона и начинаем подготовку к его внедрению. В папке с шаблоном, когда вы её откроете, будут находиться все необходимые нам файлы.

Рис.7 - Файлы шаблона

Лично меня сразу же не устроило то, что папка с изображениями находится внутри папки стилей. Исправляю эту неточность и переношу её в корень шаблона. Все пути мы подправим по ходу. Теперь наша папка с файлами выглядит как и нужно:

Рис.8 - Файлы шаблона

Нам будет необходимо отредактировать два файла: index.html и style.css. Открывайте их сразу в текстовом редакторе.

Сразу же расскажу про два правила, которые вы должны обязательно соблюдать:

1. Вы должны следить за кавычками и за спецсимволами. Все двойные кавычки и знак $ должны экранироваться обратным слэшем. (\", \$)
2. Пути к файлам стилей, скриптов, картинок и т.д. должны быть абсолютными, то есть указывать путь к файлу от корня сайта.

Сначала займёмся нашим индексным файлом. Первое, что нам нужно сделать - это избавить от двойных кавычек. Можно сделать это с помощью инструмента экранирования:

Рис.9 - Инструмент для экранирования спецсимволов

Мне больше нравится другой способ - замена двойных кавычек на одинарные.

Рис.10 - Замена двойных кавычек на одинарные

К одинарным кавычкам NetCat относится дружественно да и код не засоряется лишними символами. После проведения данной операции у меня произошло 465 замены. После обновления страницы всё так же корректно отображается. За исключением картинок, которые ранее были перенесены.

Теперь займёмся путями. Советую сделать таким же образом - заменой.

Рис.11 - Замена путей к файлам

Точно так же меняем пути к картинкам, js скриптам и т.д. После того, как вы поменяете все пути на абсолютные, работа с шаблоном до внедрения на сайт продолжится только в текстовом режиме. Я так же поправлю все пути к картинкам.

Теперь открываем файл стилей и так же проверяем все пути. В том случае, если они не соответствуют нашим требованиям - изменяем их по аналогии с индексным файлом.

Рис.12 - Редактирование файла со стилями

Теперь нам необходимо в файл index.html внедрить специальные переменные, функции и команды. Я воспользуюсь стандартным шаблоном и скопирую оттуда всё, что нам необходимо.

Первое, что нужно сделать - вставить необходимые переменные в тегах head. Вы можете воспользоваться нижеприведёнными кодами и скопировать их себе на сайт:

1. <title>".strip_tags($f_browse_path=s_browse_path($browse_path))."</title>
2. <meta name='description' content='".$current_sub[Description]."' />
3. <meta name='keywwords' content='".$current_sub[Keywords]."' />
4. <meta http-equiv='Content-type' content='text/html; charset=".$nc_core->NC_CHARSET."' />

Дальше наш шаблон разделяем на составляющие: хедер, футер и контентная часть. Верхняя часть заканчивается в том месте, где начинается вывод контентной части:

Рис.13 - Добавление комментириев

В это место мы вставляем функцию NetCat'a и заключаем контентную часть в комментарии:

<!-- content -->
<!-- /content -->

Теперь мы можем скопировать верхнюю часть нашего шаблона в поле "Верхняя часть страницы" нашего нового макета. То, что ниже закрывающего комментария <!-- /content --> переносим в поле "Нижняя часть страницы". То, что между - этими комментариями будет добавлено в отдельный макет титульной страницы.

Так же вы можете скопировать папки "css", "images" и "js" в корневой каталог вашего сайта.

Для того, чтобы установить добавленный вами макет дизайна, нужно в настройках сайта назначить его основным:

Рис.14 - Установка макета дизайна

В том случае, если вы добавляете макет на уже работающий сайт и не хотите, чтобы посетители видели ваши эксперименты, можете назначить этот макет для скрытого раздела и заходить на него используя урл раздела, либо добавив в адресной строке переменную template и номер шаблона:

Рис.15 - Тестирование макета дизайна

Узнать номер макета дизайна вы можете в администраторском разделе:

Рис.16 - Номер макета дизайна

Теперь остаётся добавить материалы на титульную страницу и далее приступать к настройке меню, к созданию разделов и т.д. Для титульной страницы мы создадим отдельный макет дизайна и скопируем в него оставшуюся часть нашего html-шаблона. Здесь учтите, что все остальные макеты, которые вы будете создавать для одного сайта желательно делать дочерними родительскому макету:

Рис.17 - Добавление дочернего макета

Называем новый макет "Титульная страница". Теперь важный момент. Так как мы создали макет для титульной страницы дочерним от основного, то он может наследовать значения полей футера, хедера и шаблонов вывода навигации.

Для того, чтобы данные из основного макета отображались так же на титульной странице, существуют макропеременные %Header и %Footer, которые заменяют копирование кода. То есть, вставка макропеременной %Header в соответствующее поле будет равна всему тому коду, который вы добавили в родительском макете дизайна.

Таким образом, в верхнюю часть страницы нам нужно вставить макропеременную %Header и всё то, что осталось в нашем html-шаблоне. В нижнюю часть страницы мы вставляем ТОЛЬКО макропеременную %Footer.

Рис.18 - Коды титульной страницы

Сохраняем страницу и теперь видим, что в списке макетов дизайна у нас добавился новый макет:

Рис.19 - Новый макет дизайна

Шаблоном вывода навигации, меню и распределением блоком мы займёмся в следующих уроках, а на данный момент последнее что нам остаётся - для раздела титульной страницы в карте сайта выбрать только что созданный нами макет дизайна.

Рис.20 - Выбор макета дизайна для титульной страницы

Теперь мы можем зайти на сайт и увидеть, что html-шаблон полностью перенесён, то есть адаптирован под CMS NetCat.

В девятом и последующих уроках мы продолжим настройку и развитие нашего сайта.

Скачать оригинал шаблона | Скачать адаптированный вариант шаблона