Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CMS

Добавление тегов и разметки Ghost Template

by
Read Time:12 minsLanguages:
This post is part of a series called Building a Ghost Theme From Scratch.
Organizing Ghost Theme Files and Folders
Styling Our Ghost Theme With LESS

Russian (Pусский) translation by Khristich Vadim (you can also view the original English article)

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


Написание файла "index.hbs"

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

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

Примечание: В этом разделе предполагается, что вы используете новую локальную установку Ghost с первой опубликованной по умолчанию публикацией «Добро пожаловать в Ghost». Если ваша установка не является новой, имейте в виду, что некоторые из приведенных в нашем примере снимков экрана могут отличаться от содержимого ваших собственных.

Перед началом вы можете создать второе сообщение на своем сайте Ghost и установить для параметра «Количество сообщений на странице» значение «1» через «Настройки> Общие» в своей панели администратора. Таким образом, вы можете проверить правильность отображения нумерации вашей темы.


Добавление тегов шаблона

Шаг 1:

Откройте файл "index.hbs" в вашем редакторе кода.

Шаг 2:

Под тегом шаблона {{!< default}} запустите цикл, который будет повторять ваши последние сообщения, добавив следующий код:

Все, что вы добавляете между этими двумя тегами, будет выводиться для каждого отображаемого сообщения.

Шаг 3:

Добавьте дату публикации, заголовок публикации, содержание публикации и теги, поместив следующий код между тегами шаблона {{foreach}}:

Примечания к вышесказанному:

  • Формат даты контролируется moment.js. Изменяя значение format = "" (в соответствии с инструкциями на сайте moment.js), вы можете легко определить, как читается дата.
  • Тег шаблона {{content}} выводит полный контент поста. В качестве альтернативы вы можете использовать шаблонный тег {{excerpt}} для вывода краткого пост-введения.
  • Тег шаблона {{content}} также будет принимать параметр words = "100", чтобы ограничить количество выводимых слов. Аналогичным образом, тег шаблона {{excerpt}} будет принимать параметр words = "50" или characters = "50".
  • В теге шаблона {{tags}} значение separator = "" можно изменить на любое, что вы хотите использовать в качестве разделителя между отображаемыми тегами записей, будь то запятые или что-то еще.

Шаг 4:

Добавьте нумерацию страниц, поместив следующий код после закрывающего тега шаблона {{/ foreach}}:

Шаг 5:

Проверьте, что ваш полный набор тегов шаблона index.hbs теперь выглядит так:

Шаг 6:

Сохраните файл, затем в своем браузере перезагрузите интерфейсную страницу Ghost, как правило: http://localhost:2368/. Вы должны увидеть что-то вроде этого (фактический контент будет отражать контент вашего последнего поста Ghost):

GhostTheming_PostLoopAddedGhostTheming_PostLoopAddedGhostTheming_PostLoopAdded

Убедитесь, что вы видите следующее:

  • Дата
  • Заголовок сообщения (в нашем примере "Welcome to Ghost")
  • Содержание сообщения
  • Теги (Ghost добавляет «Getting Started» в качестве тега по умолчанию. Хотя он не показан на изображении выше, вы должны увидеть этот тег в нижней части поста «Welcome to Ghost». Если вы не видите никаких тегов, убедитесь, что в сообщении есть теги через редактор сообщений в Ghost admin)
  • Разбивка на страницы внизу, если вы создали второе сообщение и установили свои сообщения на странице равными 1. Он должен выглядеть как «Страница 1 из 2 Старые сообщения →»

Если чего-то не хватает, пожалуйста, проверьте теги шаблона, добавленные в ваш файл.


Добавление разметки

Теперь мы собираемся начать процесс добавления разметки, включая семантический (т.е. значимый) HTML5, роли WAI-ARIA, Schema.org по мере необходимости, а также классы CSS с пространством имен, которые будут использоваться для стилизации темы позже. 

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

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

Шаг 1:

Добавьте теги <main>  html5, чтобы указать область основного содержимого сайта.

Открывающий тег <main> html должен быть помещен после тега шаблона {{!<default}}

Закрывающий тег </main>  должен находиться в конце документа:

Шаг 2:

Добавьте теги <article>  html5, чтобы указать содержание статьи.

Открывающий HTML-тег <article>  должен гласить:

HTML-теги <article> должны обернуть все внутри цикла post:

Шаг 3:

Добавьте теги <header>  html5 в статью.

Открывающий тег html должен выглядеть так:

Теги <header>  должны обернуть теги шаблона {{title}} и {{date}}:

Шаг 4:

Оберните теги <time>  html5 в дату публикации. Открывающий тег <time>  html должен выглядеть так:

Теги <time>  должны обернуть тег шаблона {{date format = 'dddd DD MMM YYYY'}}, как показано ниже:

Шаг 5:

Оберните <h1> html-теги и ссылку на один пост вокруг тега заголовка {{title}}. Открывающие теги <h1> и  <a> html должны иметь следующий вид:

Теги <h1> и <a> html должны обернуть тег шаблона {{title}}, как вы можете видеть ниже:

Шаг 6:

Добавьте <div>  обертку вокруг содержимого публикации. Открывающий тег <div>  html должен гласить:

HTML-теги <div>  должны обернуть тег шаблона {{content}}:

Шаг 7:

Добавьте обертку <div>  вокруг отображения тега. Открывающий тег <div>  html должен гласить:

HTML-теги <div> должны обернуть тег шаблона {{tags}} внутри помощника {{#if tags}}:

Шаг 8:

Добавьте обертку <div>  вокруг дисплея разбивки на страницы. Открывающий тег <div>  html должен гласить:

Теги <div> html должны обернуть тег шаблона {{pagination}} внутри помощника {{#if pagination}}:

Шаг 9:

Сохраните файл "index.hbs".


Тестирование вашего заполненного файла

Ваш файл "index.hbs" завершен и готов к тестированию. Для этого перейдите на ваш внешний интерфейс Ghost по адресу http://localhost:2368/.

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

Убедитесь, что каждый фрагмент разметки, указанный выше, присутствует в коде. Если чего-то не хватает, повторите шаг(и), показанные выше, чтобы добавить то, чего не хватает.


Написание файла "post.hbs"

Теперь мы подошли к последнему из трех файлов шаблонов для вашей темы. Файл "post.hbs" управляет отображением ваших отдельных сообщений, то есть ваших сообщений при просмотре по их индивидуальному URL.

Код файла «post.hbs» очень похож на файл «index.hbs», поэтому вместо того, чтобы в этот раз проходить по каждой строке, я дам вам код для всего файла, а затем укажу, где есть различия.

Шаг 1:

Откройте файл "post.hbs" в редакторе кода.

Шаг 2:

Добавьте следующий код:

  • Теги шаблона {{#foreach posts}} {{/ foreach}} заменены на {{#post}} {{/ post}}. Это потому, что отображается только один пост, а не серия постов
  • Гиперссылка была удалена из заголовка, потому что мы уже находимся в URL поста, поэтому это не нужно.
  • Первый раздел с отступом: были добавлены ссылки для публикации постов в Twitter, Facebook и Google+.
  • Второй раздел с отступом: <footer>  html5 теги были добавлены в статью, чтобы отображаться, если информация доступна автору сообщения. Информация об авторе может отображаться только в виде одного сообщения. Мы не используем здесь все доступные теги шаблонов авторов - вы можете узнать больше о полном диапазоне тегов шаблонов, доступных по адресу: http://docs.ghost.org/themes/

Шаг 3:

Сохраните файл "post.hbs".


Тестирование вашего заполненного файла

Чтобы правильно протестировать файл "post.hbs", вам необходимо заполнить некоторые поля в биографии автора вашей установки Ghost в «Настройках> Пользователь». Добавьте изображение автора, адрес веб-сайта и биографию.

Перейдите к своему интерфейсу Ghost по адресу http://localhost:2368/, затем щелкните по гиперссылке на заголовок первого сообщения.

Убедитесь, что вы видите следующее:

  • Дата
  • Заголовок сообщения
  • Содержание сообщения
  • Теги сообщений
  • Обмен ссылками на Twitter, Facebook и Google+.
  • Автор изображения, имя, сайт и биография

Если чего-то не хватает, повторите описанные выше шаги, чтобы дважды проверить код файла шаблона.


Написание Частичных Файлов Шаблона

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

Давайте начнем с частичного файла шаблона заголовка.

Шаг 1:

В предпочитаемом вами редакторе кода создайте новый файл и сохраните его в папке «UberTheme> partials» как "header.hbs".

Шаг 2:

Добавьте следующий код и сохраните:

Этот код будет отображать логотип (если есть), название блога и описание блога. Теперь, чтобы загрузить этот частичный файл шаблона в тему.

Шаг 3:

Откройте файл «index.hbs» и файл «post.hbs».

Шаг 4:

В каждый файл сразу после тега шаблона {{!<  default}} добавьте следующее:

Шаг 5:

В вашем браузере обновите домашнюю страницу Ghost и просмотр одного сообщения.

В верхней части каждого вы должны увидеть заголовок блога «Ghost» и описание блога «Просто платформа для блогов» (или заголовок и описание, относящиеся к вашему блогу, если вы его изменили).

Шаг 6:

Создайте еще один новый файл и сохраните его в папке «UberTheme> partials» как "footer.hbs".

Шаг 7:

Добавьте следующий код и сохраните:

Этот код добавит ссылку на подписку RSS, сообщение об авторских правах и ссылку на Ghost.

Шаг 8:

Вернитесь к своим файлам "index.hbs" и "post.hbs".

Шаг 9:

В каждом файле в самой нижней строке добавьте следующее и затем сохраните:

Шаг 10:

Опять же, перейдите в браузер и обновите домашнюю страницу Ghost и просмотр одного сообщения. В нижней части каждой страницы вы должны увидеть свою RSS-ссылку, сообщение об авторском праве и атрибуцию Ghost.

Ваши файлы шаблонов тем Ghost теперь готовы!

Вы добавили все необходимые теги шаблонов руля и добавили семантическую, оптимизированную для SEO и доступную разметку.


Далее

Теперь, когда шаблонная стадия вашей темы готова, пришло время перейти к этапу стилизации.

В следующей части этого урока вы узнаете, как стилизовать типографику и макет, создать общий вид и адаптировать тему.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.