read

Так как я на данный момент ковыряю Ghost, то решил вольно перевести статью про структуру тем в движке Ghost. Оригинал статьи тут.

Основы

Ghost всё еще достаточно молодая платформа, на данный момент последняя версия 0.5.8.

Платформа основана на Node.js, поэтому для запуска на локальном ПК потребуется установить Node (хотя бы версии 0.10.). В папке с Ghost расположены три директории(content, core и node_modules) и несколько файлов. В папке “content” хранятся все установленные темы. Стандартная тема называется “casper” и хранится в соответствующей папке.

Файлы тем

Стандартная тема Casper содержит всего одну папку, зовётся она “assets”. В ней содержится все шрифты, javascript, css и вспомогательные изображения. Все внешние файлы для оформления темы можно смело кидать в “assets”.

Now lets get serious and look at what files we have got in our main theme directory: Пройдемся по файлам которые содержаться в корневой папке темы:

  • default.hbs - HTML фрейм для каждого шаблона в теме.
  • index.hbs - HTML шаблон главной страницы, она же index.
  • post.hbs - HTML шаблон для страницы с постом
  • page.hbs - HTML шаблон для статической страницы
  • tag.hbs - HTML шаблон со списком страниц при поиске по тэгам
  • package.json - Конфигурационный файл с информацией о теме (имя, версия и т.п.)
  • readme.md - текстовая информация, оно же readme
Настраиваем тему

Ghost использует Handlebars как движок для своих шаблонов. Плюс в том, что у Handlebars довольно читаемый код. Возьмём к примеру {{{body}}}. Это тег который мы встретим в default.hbs(шаблон, который служит фреймом для всех остальных .hbs где в первой строке есть {{!< default}}). Таким образом default.hbs можно считать родителем для других страниц.

Несколько базовых тегов:

  • {{@blog.title}} - Выводит имя блога указанного в настройках Ghost
  • {{@blog.logo}} - Выводит URL изображения указанного как логотип в настройках Ghost.
  • {{@blog.cover}} - Выводит URL изображения указанного как фоновое в настройках Ghost.
  • {{@blog.description}} - Выводит текст описания блога (вводится в админке)
index.hbs

Для отображения постов используется цикл foreach. Синтаксис такой: открывающий тег {{#foreach posts}} и закрываем {{/foreach}}. Таким образом каждый post из базы блога будет отрабатываться согласно коду указанному между этими двумя тегами. Примечание: В теме casper подобную конструкцию выделили в отдельный файл loops.hbs в папке partials.

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

  • {{{title}}} - Заголовок поста
  • {{{url}}} - Url поста
  • {{date format='YYYY-MM-DD'}} - Дата поста
  • {{tags prefix="on "}} - Теги поста
  • {{content words="100"}} - Выводит первые 100 слов поста (включая HTML).
  • {{excerpt characters="250"}} - Тоже самое что content, только по количеству символов.
post.hbs

Страница отвечающая за отображение отдельно открытого поста. Начинается с тега {{#post}} и закрывается {{/post}}. Между ними обязательно требуется тег {{{title}}} и {{content}}, всё остальное опционально.

Возможные теги:

  • {{author.name}} - Имя автора (выставляется в настройках профиля)
  • {{author.bio}} - Биография автора (так же выставляется в настройках)
  • {{author.website}} - Сайт автора (всё в настройках профиля)

Есть и множество других тегов которые можно посмотреть на странице Ghosts theme helper.

Примечание: Некоторые теги начинаются с трех {{{, другие с {{. В чем разница? Дело в том что если использовать три {{{ то контент будет отдаваться как есть, т.е. если будет HTML код, то и вывод будет с кодом. Если же использовать {{ тогда мы получим только текст, без кода, если таковой имеется.

page.hbs

Всё аналогично странице post.hbs. С одной лишь разницей, что данный шаблон используется для статических страниц. Можно задавать различные шаблоны для разных статических страниц. Например сделаем копию page.hbs и назовём её page-about.hbs. Редактируя полученный файл мы сможем настроить своё отображение для страницы /about.

tags.hbs

Аналогично index.hbs только отображаются посты отфильтрованные по тегу.

Заключение

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

Полезные ссылки
Blog Logo

Keiga


Published

Image

Imagine Any Title Here

Personal notes about video games and other stuff

Back to Overview