Быстрое развертывание сайтов-сателлитов с помощью фреймворка Skeletic
В процессе производства сайтов-сателлитов возникает надобность быстрой привязки структуры и контента сайта к найденному в сети или заказанному html-шаблону. Сама структура сайта при этом бывает достаточно простой и статической. При этом, каждому адресу (URL) сайта соответствуют свои title и мета тэги keywords и description. Также, требует некоторых усилий настройка текущего пункта меню (когда это предусмотренно дизайном). Для облегчения этого, и без того не сложного процесса, был создан пакет Skeletic, который я рискну назвать мини-фреймворком, ведь в нем присутствует 2/3 от MVC , а именно - Views и Controllers. В процессе развития Скелетика оказалось, что найденная архитектура позволяет легко организовать поддержку также и простых динамических адресов. Не смог я пройти мимо и прогрессивной технологии разметки haml.
Прежде всего, перечислю возможности, предоставляемые Скелетиком:
- Быстрая адаптация html/haml шаблона под ваш сайт;
- Простое назначение title, meta keywords, meta description для конкретных URL-ов;
- По образцу предыдущего пунтка, могут быть назначенны любые другие параметры уровня URL;
- Простая организация выделения текущего пунтка меню (когда это предусмотренно шаблоном);
- Опциональное логгирование работы;
- Возможность обработки POST запросов;
Прежде всего, рассмотрим файловую структуру Скелетика:
/inc/ /views/ /actions/ /.htaccess /index.php /skeletic.ini
Папка inc содержит мною немного переработанный класс HamlParser, папка views - файлы представлений отдельных страниц, папка actions содержит опциональные файлы действий (контроллеры, в классической терминологии).
Весь кастомный код будет располагаться в папках actions и views . Настройки - в файле skeletic.ini .
Я подготовил Демонстрационный сайт на основе этого WP шаблона:
Предлагаю рассмотреть ini-файл этого сайта: http://sk2.kamagra.im/skeletic.ini. Файл состоит из секций. Первая секция, _config_ содержит параметры, которые применяются ко всему сайту:
-
selected_menu_class -
задает класс выделенного пункта меню. Сразу посмотрим, как это используется в шаблоне:
<li class="<? sk::menu('home'); ?>"><a href="/">page1</a></li> <li class="<? sk::menu('page2'); ?>"><a href="/page2">page2</a></li> <li class="<? sk::menu('dynamic'); ?>"><a href="/sqrt-of/25">page3</a></li> <li class="<? sk::menu('redirect'); ?>"><a href="/redirect">redirect</a></li>Функция sk::menu() получает имя секции ini-файла, соответствующей адресу страницы, и печатает selected_menu_class если текущая секция (содержащая URL-ом текущий URL страницы) равна переданной. Таким образом, для текущего пункта меню будет напечатано имя класса, соответствующее выбранному пункту меню. Как и остальные функции Скелетика, sk::menu() печатает свой результат, а не возвращает его.
- base - определяет место расположения Скелетика - он может находиться как в корневой папке сайта, так и в более глубокой области.
- layout - определяет имя файла-шаблона сайта. Этот файл находится в папке /views и может быть, как php-файлом, так и haml-файлом.
- logfile - определяет файл в который будет записываться лог работы. Для отключения лога достаточно закомментировать параметр.
- content_type - определяет кодировку страниц сайта.
Теперь, рассмотрим остальные секции файла skeletic.ini . Каждая секция соответствует одному адресу нашего сайта, имя секции может может быть произвольным а сам URL записывается в секции параметром url. В конце URL-а может быть записана звездочка, как в секции [dynamic], вычисляющей квадратный корень параметра, взятого из URL-а, она, звездочка, может стоять только в конце строки, означающей URL. Часто бывает нужно взять из URLа два и более параметров, например, если вы описываете секцию, которая содержит поле редактирования поста, ее актуальный адрес может быть /post/20/edit, где 20 - индекс поста. Записав в секции Скелетика такой адрес:
url = "/post/*"
мы получим переменную $param1 равную "20/edit" и легко ее разбираем на нужные нам части (в контроллере):
list($post_id,$action) = explode('/',$param1);
Как видим, такая простая схема позволяет создавать достаточно сложную структура сайта.
Вернемся к другим параметрам, описываемым в секции, это - заголовок (title) страницы и ее мета тэги - keywords и description. Вот как это используется в шаблоне (файл actions/layout.php):
<title><? sk::title(); ?></title>
<h1><? sk::title(); ?></h1>
<meta name="description" content="<? sk::description(); ?>">
<meta name="keywords" content="<? sk::keywords(); ?>">
В тексте title, keyword, description можно использовать переменные, вычисленные в action -файле (контроллере) текущей секции как, например, в секции [dynamic] ). Также, эти переменные могут использоваться напрямую в представлении - view -файле, поскольку вычисление представлений и действий происходят в одной глобальной области видимости. Собственно, это - все, что требуется от движка, реализующего гостевой дизайн в плане СЕО. Однако, возможности Скелетика этим не огранициваются. Наряду с title, keywords и description, вы можете вводить и другие пераметры секции. Например, чтоб не повторять значение title как в титле, так и в заголовке страницы, можно ввести параметр
[section_name]
header = "Header of the current section"
и использовать его таким образом:
<title><? sk::title(); ?></title>
<h1><? sk::header(); ?></h1>
Далее, все параметры каждой из секций переписывают соответствующие по именам параметры секции _config_. Таким образом, мы можем в секции _config_ определить общий параметр, а в остальных секциях - использовать его по умолчанию, или переписывать локальным значением. Конечно, в случае title, keywords и description смысла в таком нет, но, приведу такой пример:
[_config_]
style = style
[section1]
style = style2
И использование в шаблоне:
<style src="/css/<? sk::style();?>.css" />
То есть тут мы для секции section1 определили файл стилей, отличный от общего.
Аналогично, можно переопределить файл шаблона (layout) или любой другой параметр.
Теперь посмотрим, как в шаблоне указать место вставки текущей страницы. Обычно, это - div с именем content или wrapper, я попозже на примере демонстрационного сайта покажу весь процесс преобразования дизайна в шаблон. Наша задача сделать такую структуру:
<div id="content"><? sk::page(); ?></div>
Функция page() печатает контент текущей страницы.
Вы, вероятно, уже заметили, что все функции Скелетика печатают значения, а не возвращают их. А зачем нам набирать лишний print? Если же есть надобность получить значение вместо его печати, то можно воспользоваться массивом sk::$section, например:
[edit_post]
require_auth = 1
action = edit_post
и в файле actions/edit_post.php:
if (@sk::$section['require_auth']) include "actions/check-auth.php";
Также в секции может определяться параметр method. Он соответствует методу HTTP-запроса. Если значение метода не определено, секция будет "отзываться" на запрос своего URL-а любым методом - если это нежелательно, то можно в определить
[_config_]
method = get ; регистронезависимо
В демонстрашке прохождение POST-вызовов иллюстрирует форма поиска. Но, поскольку искать нечего, то контроллер секциии [md5], отзывающийся на POST /search просто вычисляет md5 хэш строки поиска и иллюстрирует использование результатов в title, keywords и desctiption.
Надеюсь, я не утомил вас теорией и теперь мы перейдем к практике адаптации стороннего дизайна средствами Скелетика. Изложу это в виде алгоритма.
1. Ищем подходящий шаблон. Очень много хороших и разных шаблонов можно найти среди тем Wordpress. Нам нужна тема с demo версией, потому что с нее мы будем брать исходный html код. Всякие связи с WP нам не интересны. Обращу здесь ваше внимание на то, что донорский дизайн должен быть создан средствами html а не javascript (для WP это - стандарт) и иметь табулированную разметку, а не месиво тэгов, поскольку нам придется его слегка дорабатывать. Еще, надо проследить, чтоб пункты меню были текстом, а не рисунками, ведь у нас будут свои пункты меню.
2. Сохраняем html дизайна. Для этого, например в Опере жмем Ctrl-S и выбираем Тип файла: HTML file with images, а в поле Имя файла, вместо предложенного Оперой титла страницы пишем что-нибудь покороче, например, index.
При этом браузер сохраняет все картинки, стили и скрипты в папку, которая в нашем случае будет иметь имя index_files, а в файле index.html пути к этим элементам будут соответствующим образом откорректированы. Для сохранения лучше выбрать страницу с минимальным контентным содежимым, например Contacts или About us.
3. Переносим файлы. Здесь мы переносим полученную папку с файлами (index_files) в папку со Скелетиком, то есть ту папку, в которой находится файл skeletic.ini. Файл же с исходным кодом переносим в папку actions и переименовываем в layout.php. Поскольку изначальный файл skeletic.ini содержит элементы
[_config_]
layout = index.php
[home]
view = home.html
То наш сайт уже будет загружаться.
4. Подчищаем шаблон. Теперь удаляем все ненужное - jsvascript счетчики, "левые ссылки" и прочее. Некоторые элементы непросто найти в html коде, тут нам поможет отладчик браузера, покажу на примере Opera Dragonfly. Например, нам нужно удалить ссылку на предыдущий WP шаблон:
Мы переходим на вкладку Documents, и оказываемся в режиме выделения кода по наведению мыши.
Возвращаемся на страницу сайта и находим такое положение мыши, при котором сиренивым цветом выделяется наибольшая часть нежелательного элемента.
И кликаем мышкой в этом месте. После чего возвращаемся в окно Opera Dragonfly и видим интересующий нас элемент выделенным в html коде:
Аналогичным образом нам надо удалить непосредственный контент страницы, сохранив сам элемент, его содержащий и вставив на место контента строку
<? sk::page(); ?>
Далее, остается заменить значения title, meta keywords, meta description соответствующими вызовами (см. ранее) и откорректировать элементы меню (см. еще более ранее). Если Скелетик установлен в корневой папке и дизайн не предуматривает выделения текущего пункта меню, то структура меню упрощается до такой:
<li ...><a href="/">page1</a></li>
<li ...><a href="/page2">page2</a></li>
<li ...><a href="/sqrt-of/25">page3</a></li>
<li ...><a href="/redirect">redirect</a></li>
Если у вас будут использоваться в адресах виртуальные папки (например http://example.com/post/20, то в пути к файлам css, js и картинкам, сгенерированные браузером при сохранении следует добавить в начало символ слеш '/', иначе браузер их не найдет. Это делается просто: ^F index_files/ => /index_files/ .
5. Наполняем контентом. Тут надо создать секцию страницы, где указать:
[section2]
; адрес страницы
url = /aaa/bbb
;
; файл /actions/section2.php будет контроллером секции, то есть ВЫЧИСЛЯТЬ данные
action = section2.php ; опционально
;
; файл /views/section2.php будет представлением секции, то есть ОТОБРАЖАТЬ вычисленные данные
view = section2.php ; это может быть также .haml файл
;
title = "Заголовок страницы"
keywords = "ключевые, слова, страницы"
description = "Описание страницы"
И после этого внести адрес созданной страницы в шаблон, например, как пункт меню, или как другая ссылка, при этом можно использовать стиль какой-нибудь из ссылок шаблона, например из блока последних постов или тегов.
Текста тут написано много, но все делается достаточно быстро, 10-20 минут - и у вас готов отличный сателлит.
И в конце, немного о новом (уже не очень) языке разметки и по совместительству - шаблонизаторе HAML. Основная идея его настолько проста, что достаточно прочитать небольшую заметку на Википедии, чтобы понять, насколько это удобно. Более подробная документация здесь. Эту статью, как и большинство предыдущих, я набираю в haml, и вот, как это выглядит:
В добавок к документации, расскажу немного о той реализации haml, что используется в Скелетике. В стандарте haml отступы делаются по два пробела, это - неудобно, когда надо увеличить или уменьшить отступ нескольких строк. В моей реализации можно использовать табуляцию для отступа, она заменяется на два пробела, но нежелательно в одном файле смешивать табулированный и пробельный отступ, поскольку в большинстве редакторов табуляция отображается, как 4 пробела. В демонстрашке все файлы в папках actions и views продублированны с расширением .txt, например http://sk2.kamagra.im/views/page2.txt для файла /views/page2.haml.
Надеюсь, Скелетик окажет вам существенную помощь в развитии вашей сети качественных сайтов.