Это перевод статьи Creating a Mephisto Theme using Liquid.
Mephisto это отличный блоговый (и не только) движок, написанный Риком Ольсеном и Джастином Палмером. По ходу этой статьи вы пройдете шаг за шагом по процессу создания собственных шаблонов и тем для этой системы.
Я надеюсь что вы знакомы с фреймворком Ruby on Rails, тем не менее я постараюсь объяснять максимально доступно.
Первый и самый эффективный способ научиться создавать собственные шаблоны и темы - это скачать уже готовую с mephisto themes gallery и посмотреть внутрь архива чтобы разобраться как автор создавал свою тему.
Для начала вам нужна работающая копия Mephisto для тестирования. Вы можете воспользоваться версией из репозитория. Как это сделать написано на сайте. Темы хранятся в папке /themes в корне вашего rails приложения. Если у вас установлена конфигурация по умолчанию для одного сайта - вам нужно создать новую пустую папку в /themes/site1/. Вы можете назвать папку как вам нравится, это то место где мы будем собирать новую тему.
Тема для Mephisto делается на основе шаблонов liquid (html с дополнительной разметкой для вставки контента на страницу), картинок, таблиц стилей CSS и javascript файлов.
Что такое liquid файлы.
Liquid был создан разработчиками из Shopify для того чтоб их пользователи могли создавать собственные магазины. Эти шаблоны работают так же как файлы .rhtml в rails, они безопасны в плане того что не вызывают ошибок на сервере если переменная нулевая или неопределенная, они не генерируют никакого контента. Для тех кто не знаком rails - .rhtml файлы содержат разметку в html и специальные таги "< >" c Ruby кодом, таги которые могут осуществлять вывод на страницу "<= >". Liquid очень похож на эту структуру, только вместо тагов "< >" мы используем "{}" и вместо "<= >" есть "{{}}" таги.
Подробную информацию вы можете найти на сайте Shopify, и я рекомендую вам ознакомится с ней в дополнении к моей статье.
Mephisto содержит много переменных, которые могут быть использованы не только для вывода информации на страницу, но и для создания навигационных ссылок, ссылок между страницами. Например на этой странице, для того чтоб вывести содержимое статьи я использую таг {{ article.body }}
Итераторы
Если у нас есть массив элементов, то мы легко можем пройтись по всем элементам при помощи конструкции:
{% for blog_section in site.blog_sections }
{{ blog_section.name }}
{ endfor %}
Условные операторы
Мы также можем проверить значения liquid переменных и, в зависимости от условия, вывести информацию:
{% if section.is_home }
Welcome to the site…
{ endif %}
Описание переменных
Прежде чем начать подробное рассмотрение шаблонов - нужно ознакомиться с liquid переменными, доступными в Mephisto. На сайте Mephisto и почитав вики
Там есть несколько отличных примеров как форматировать даты и т.д.
Структура Mephisto
Mephiso не просто блог, он обеспечивает нас Системой Управления Контентом (CMS), что позволяет вам создавать информационные страницы - такие как страница портфолио, информация "об авторе" и подобные им. Когда мы создаем тему нам необходимо учесть эти варианты.
Необходимые Liquid файлы.
Для создания темы Mephisto ищет необхоимый минимум файлов, которые должны располагаться в папке под названием 'templates' внутри /themes/site1/. Будьте внимательны с написанием названий папок.
- section.liquid - шаблон используемый для блоговых разделов и обычно выводит несколько статей подряд, этот шаблон так же используется для главной страницы.
- single.liquid - этот шаблон используется для показа одной статьи, обычно выводит короткую статью или выдержку.
- tag.liquid - шаблон для вывода статей по ключевому слову.
- search.liquid - шаблон для вывода результатов поиска.
- archive.liquid - шаблон для вывода статье за определенный месяц.
- error.liquid - шаблон для вывода ошибки, когда раздел или статья не найдены.
layout.liquid
В дополнение к вышеперечисленным шаблонам, у нас есть общий шаблон (шаблон разметки) который предоставляет содержимое каждой страницы, в котором мы размещаем основные элементы, внешний вид. Этот файл расположен не в папке 'templates' как предыдущие, а в подпапке с названием 'layouts'.
Создание шаблона разметки (layout.liquid)
Как уже было сказано, этот файл расположен в папке 'layout' в папке темы. Этот файл используется везде на нашем сайте, не зависимо от раздела, так что мы можем расположить в нем общие элементы, используемые на всех страницах. Например заголовок с логотипом, форму поиска, подвал (footer). Так же это единственная страница, где хранится html заголовок и тэг body, соответственно минимальное содержание будет:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>My Blog</title>
</head>
<body>
{{ content_for_layout }}
</body>
</html>
Секция HEAD.
Вместо статического заголовка мы можем динамически вставлять название сайта или, если мы смотрим отдельную статью, добавлять ее заголовок. Это не только добавляет удобство читателям, но и показывает заголовки поисковикам и сервисам типа Feedburner.
<title>{{ site.title }} {% if article } – {{ article.title }} { else } {{ site.subtitle }} { endif %}</title>
Этот код выводит название сайта и, если мы просматриваем статью, нам доступен объект article, так что мы можем показать ее название или подзаголовок сайта, который задается в настройках панели управления.
Так же мы должны убелиться что наша RSS лента доступна пользовательским браузерами, для этого добавляем следующий код:
{{ head.feed }}
<!— If you are using feed burner, set it up with your RSS feed http://yourdomain/feed then use the feedburner address —>
<link href=“http://feeds.feedburner.com/miletbaker“ title=“Jon Milet Baker’s Blog“ type=“application/rss+xml“ rel=“alternate“/>
Можно добавить любой внешний скрипт или таблицу стилей:
{{ ‘stylesheetfilename’ | stylesheet }}
{{ ‘javascriptfilename’ | javascript }}
Секция BODY.
В layout.liquid нам нужно создать меню навигации для доступа к различным разделам и страницам сайта. Я обычно использую неупорядоченный список ul, затем добавляю в CSS его оформление. Для генерации элементов списка можно использовать итераторы:
<ul>
{% for section in site.page_sections }
<li><a href=“{{ section.url }}“>{{ section.name }}</a></li>
{ endfor %}
</ul>
Этот код содзаст ссылки на page_sections нашего сайта. Мы можем вывести разделы blog_sections изменив вторую строку кода на:
{% for section in site.blog_sections %}
Так же просто добавить поиск на каждую страницу:
<form method=“get“ action=“/search“>
<input type=“text“ class=“search“ value=““ name=“q“ id=“q“ size=“15“/>
</form>
Мы можем использовать технику вывода по условию, которую мы рассматривали при выводе заголовка сайта, для вывода нужной нам информации. Например при просмотре отдельной статьи, у меня, в боковой колонке, выводится список статей помеченных одним ключевым словом. Это просто:
{% if article }
{{ article.tags | tagged_articles | assign_to: ‘rel_articles’}}
{ for rel_article in rel_articles limit: 5 }
<a href=‘{{rel_article.url}}‘>{{ rel_article.title }}
{ endfor }
{ endif %}
Этот код выводится только тогда когда просматривается отдельная статья, затем передаются ключевые слова, котрыми помечена наша статья и возвращается массив статей с подобными ключевыми словами.
В добавок к этому мы можем вывести ссылки на архив:
{% for month in section.months }
{{ section | monthly_articles: month | size | assign_to: ‘articles_count’ }}
{ if articles_count > 0 }
<a href=“{{ section.path }}/{{ section.archive_path }}/{{ month | strftime: “Y/m“ }}“>{{ month | strftime: “%B %Y” }} ( {{ articles_count }} )</a>
{ endif }
{ endfor %}
Можно вывести список всех ключевых слов сайта, я использую для этого плагин Mephisto Tag Cloud plugin by Hank для вывода ссылок разного размера, который зависит от частоты использования. Вы можете использовать для этого Technorati Widget или просто вывести весь список:
{{ site | linked_tag_list }}
Теперь у нас есть основной шаблон разметки, который содержит общие элементы, и мы можем перейти к отдельным шаблонам.
Шаблон раздела (section.liquid)
Шаблон раздела, как уже было сказано, служит начальной страницей для разделов, включая начальный раздел. В нем вы уже получаете доступ кроме переменных уровня сайта, к переменным разделов.
{% if articles.size > 0 }
<h1>Статьи</h1>
{ for article in articles }
<!— В этом цикле мы получаем доступ к переменным статьей. Это нам нужно для вывода каждой статьи и дополнительной полезной информации.:—>
{{ article | link_to_article }}
{{ article.published_at | date: ‘%b %d’ }}
{{ article.author.login }}
{{ article | linked_tag_list }}
<a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a>
{{ article.body | textilize }}
{ endfor }
{ else }
<p>Статей не найдено.</p>
{ endif %}
Строка с тегом ссылки позволяет нам вывести количество комментариев с ссылкой на часть страницы, с которой комментарии начинаются, обратите внимание на то что метод pluralize автоматически добавляет множественное число, в зависимости от количества комментариев. Например “1 comment” или “2 comments”.
У нас могут быть длинные статьи, для которых Mephisto позволяет писать выдержки (excerpt). Мы можем написать условное выражение которое выводит выдержку (если она задана) или содержимое статьи, для коротких статей. Для использования этой возможности нужно задавать выдержку (Add an excerpt ) при написании статьи.
Чтобы использовать это нам нужно заменить {{article.body | textilize }} в предыдущем коде на :
{% if article.excerpt.size > 0 }
{{ article.excerpt | textilize }}
<a href=‘{{ article.url }}‘ >More…</a><br/><br/>
{ else }
{{ article.body | textilize }}
{ endif %}
Шаблон single.liquid
Этот шаблон используется для показа отдельной статьй. На этой странице мы получаем доступ к элементам объекта article:
<h1>{{ article.title }}</h1>
<p>Дата: {{ article.published_at | date: ‘%d %B %Y’ }}, by {{ article.author.login }}<br/>
Ключевые слова: {{ article | linked_tag_list }}<br/>
Комментарии: <a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a></p>
{{ article.excerpt | textilize }}
{{ article.body | textilize }}
В этом коде мы выводим название статьи, дату публикации и ключевые слова. Т.к. я использую выдержку для больших статей, я сначала вывожу ее, а сразу за ней текст статьи. Если выдержка отсутствует - то выводится только текст статьи.
В дополнение к этому мы позволим пользователям добавлять комментарии к статьям. Следующий код нужен нам для вывода комментариев:
<a name=‘comments‘></a>
{% if article.comments.size != 0 }
{ for comment in article.comments }
{{ comment.author_link }}
{{ comment.published_at | date: ‘%d %B %Y’ }}
{{ comment.body | textilize }}
{ endfor }
{ endif %}
Можно добавить Gravatar комментатора, если он у него есть:
{{ comment | gravatar: 80, “/images/mephisto/avatar.gif” }}
И форму для добавления комментария:
{% commentform }
<!- comment form ->
<label for=“comment_author“>Nick Name</label><br/>{{ form.name }}<br/>
<label for=“comment_author_email“>Email (optional)</label><br/>{{ form.email }}<br/>
<label for=“comment_author_url“>Website (optional)</label><br/>{{ form.url }}<br/>
<label for=“comment_body“>Let the thoughts flow….</label><br/>{{ form.body }}<br/>
<input type=“submit“ value=“Add“ />
{ endcommentform %}
Шаблон тагов (tags.liquid), шаблон архива (archive.liquid) и шаблон поиска (search.liquid).
Это три способа, с помощью которых пользователи могут найти информацию на вашем сайте. Используя ключевые слова для поиска статей, отмеченных интересующими тагами, архив для поиска по определенной дате и возможность поиска.
Все они схожи между собой и выводят список названий и дат и, возможно, выдержки или содержимое статей, так же как мы делали в шаблоне section.layout.
С помощью следующего кода можно вывести количество статей:
{{articles.size | pluralize: ‘article’ }} найдено.
Шаблон ошибки (error.liquid)
В заключении напишем шаблон который отображается когда пользователь запрашивает несуществующую страницу или ресурс. Отличная практика - предоставлять пользователю возможности для поиска того, что ему нужно. Я обычно показываю последние статьи и форму поиска.
Повторное использование кода (partials)
Так же как и в rails, если у нас есть куски кода, который мы используем более одного раза, мы можем сохранить их в отдельном файле и вызывать при необходимости. Например можно вынести в отдельный файл вывод статьи:
{{ article | link_to_article }}
{{ article.published_at | date: ‘%b %d’ }}
{{ article.author.login }}
{{ article | linked_tag_list }}
<a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a>
и затем вызвать его в файлах tag.liquid, search.liquid, archive.liquid:
{% include ‘article’ with articles %}
Распространение тем
Если вы считаете что получилась классная тема, почему бы не выложить ее на Mephisto Theme Gallery? Для этого нужно запаковать в .zip каталог с темой, но перед этим надо сделать картинку-превью нашей темы preview.png в корневом каталоге темы и файл с описанием, где написан автор, название темы и т.д. Это пишется в файле about.yml в формате YAML:
title: ClockObj Theme
author: Jon Milet Baker
version: 1.0
homepage: http://clockobj.co.uk
summary: THe theme for clockobj.co.uk
Надеюсь что эта статья окажется вам полезной при создании собственных тем для Mephisto. Дополнительную информацию вы можете найти на сайтах:
