Створюємо багатомовний блог за допомогою OctoberCMS — Частина 2

минулій статті ми зробили багатомовний сайт з навігацією і статичними сторінками. У цій статті ми закінчимо створення сайту, доповнивши його блогом.
Що нам треба зробити:
  • Сторінка блогу — містить список посад і категорій;
  • Сторінка перегляду посади;
  • Сторінка перегляду категорії;
  • Відображення останнього посту на головній сторінці.
image

Крім тих плагінів, що ми вже використали, нам знадобиться ще один — RainLab Blog plugin. Це гнучка платформа для блогу, в якій для створення і редагування постів використовується Markdown.
З допомогою плагіна "Translate" ми зможемо зробити наш блог повністю багатомовним: ви зможете переводити категорії, заголовки і будь-який контент сайту. Все, що буде описано в цій статті, є і в офіційній документації до директорії.
Перед тим, як продовжити, встановіть плагін "Blog". Створіть і опублікуйте кілька постів для тестових цілей.
Створення сторінки блогу
Ця сторінка буде відображати список опублікованих постів, пагінацію та список категорій. Flat UI тема вже містить сторінку з демонстраційним блогом з демо-контентом, який ми візьмемо за основу.
Плагін "Blog" надає компонент Post list, який виводить список постів (як повний, так і в певної категорії).
Зайдіть в адмінку і відкрийте в редакторі сторінку
blog/blog
. Видаліть весь непотрібний контент на кшталт "Blog post #1", "Pagination".
Відкрийте список компонентів, знайдіть там
Post list
і перенесіть його в редактор, в місце, звідки ви щойно видалили демо-контент. Якщо все зробити правильно, то ви побачите наступне:
<div class="col-sm-9">
{% component 'blogPosts' %}

<div class="clearfix"></div>
</div>

Оскільки нам потрібна пагинация, ми додамо потрібний параметр URL-шаблон сторінки. Замініть значення URL на
url = "/blog/:page?"
. Параметр
:page
визначається компонентом Post list.
Зауважте, що багато компонентів плагінів дозволяють використовувати кастомні параметри URL. Це означає, що замість
:page
у вас може бути інший параметр. Зробити це можна, змінивши конфігурацію потрібного компонента (в даному випадку — Post list).
Зберегти сторінку і натисніть на кнопку
Preview
. Якщо ви все зробили правильно, то ви побачите сторінку з блогом і пагінацію.
image
Якщо вас не влаштовує стандартна розмітка блогу, то October дозволяє скасувати її. Також ви можете помістити "каретку" для введення на слово
component
і клікнути на кнопку розкриття компонента в лівому верхньому кутку редактора. Це додасть розмітку компонента прямо в редакторі, де ви зможете відредагувати її як захочете. Ця фіча актуальна для всіх компонентів October CMS.
Список категорій
У нашої теми є шаблон
blog/sidebar
, який відображає список категорій. Зараз в ньому знаходиться демо-контент. Видалимо його.
Відкрийте
blog/sidebar
в адмінці і видаліть весь тег UL. Знайдіть
Category List
у списку компонентів і перетягніть його у місце, з якого ви тільки що видалили UL:
<div class="panel panel-default">
<div class="panel-heading">
Categories
</div>
{% component 'blogCategories' %}
</div>

Збережіть шаблон і перейдіть на сторінку
/blog
. Тепер sidebar відображає перелік категорій, але посилання в списку поки що нікуди не ведуть. Зараз ми це виправимо.
Створюємо сторінку категорії
Наша тема не містить в собі сторінку категорії, так що ми створимо її з нуля. На ній ми будемо виводити список посад, які належать до обраної категорії.
Зайдіть в адмінку, перейдіть на сторінку Pages і натисніть
Add
. В полі
Title
введіть "category Blog", а в полі URL —
/blog/category/:slug/:page?
(шаблон URL взято з офіційній документації до директорії). Потім назва файлу введіть
blog/category
, виберіть
default
у списку шаблонів і збережіть файл.
Скопіюйте код розмітки з головної сторінки блогу і додайте її на сторінку категорії. Компонент Post list ми додавали на головній сторінці блогу, тому тут потрібно зробити це ще раз. У списку компонентів виберіть Post list і додайте в необхідне вам місце сторінки.
image
Компонент Post list повинен бути налаштований для відображення постів тільки певної категорії. Потрібна нам категорія буде передаватися через параметр
:slug
в URL. Натисніть на компонент, а потім на іконку >_
Category filter
і введіть там
:slug
. Збережіть сторінку.
Щоб відображати ім'я категорії на сторінці, потрібно замінити
<h3>Blog</h3>

на
{% if not category %}
<h3>Category not found</h3>
{% else %}
<h3>{{ category.name }}</h3>
{% endif %}

Можна використовувати схоже умова, щоб сховати список посад, якщо він порожній.
Поверніться на головну сторінку і натисніть на компонент Post list. Розгорніть список властивостей, знайдіть у ньому "Category page" і виберіть сторінку категорії, яку ви тільки що створили. Закрийте і збережіть шаблон. Те ж саме потрібно зробити з компонентом Category list в сайдбарі.
Перейдіть на сторінку блогу і перевірте, як працюють категорії.
Створення сторінки поста
Ця сторінка вже є в темі, тому вам потрібно просто додати компонент в потрібне місце. Зайдіть в адмінку і відкрийте
blog/post
в редакторі, далі видаліть код під
Blog post #1
та
Pagination
.
В плагіні Blog є компонент Post, який показує потрібний пост по параметру в URL. Перетягніть компонент із списку, на місце, звідки ви тільки що видаляли html.
За умовчанням параметр URL називається
slug
. В полі URL введіть
/blog/post/:slug
і збережіть сторінку. Також замініть рядок
<h3>Blog post</h3>
на
<h3>{{ post.title }}</h3>
.
Після цього зайдіть у блог, відкрийте будь-який пост і переконайтеся, що все працює правильно.
Для того, щоб показувати повідомлення «Пост не знайдений», ми можемо використовувати наступне умова:
{% if post %}
Normal blog post markup-
{% else %}
Post not found message
{% endif %}

Показуємо останні пости на головній сторінці
Для відображення останніх постів на головній сторінці ми будемо використовувати вже знайомий нам компонент Post list. Він дозволяє вказати ліміт для відображуваних постів, який задається властивістю
postsPerPage
.
Зайдіть в адмінку і відкрийте в редакторі головну сторінку; перетягніть компонент в потрібне місце:
<!-- Latest blog post -->
<h3>Latest from the blog</h3>
{% component 'blogPosts' %}

Відкрийте властивості компонента і змініть значення
postsPerPage
1.
image
Зберегти сторінку і перейдіть на головну, перевірте, чи все ви зробили правильно.
Щоб приховати пагінацію, яку компонент виводить за замовчуванням, можна використовувати css:
.page-home {
.pagination {
display: none;
}
}

Також для цього можна перевизначити шаблон компонента або просто розкрити код компонента і прибрати звідти все зайве.
Переклад постів у блозі
Щоб зробити блог перекладним, нам не знадобиться багато часу. У минулій статті ми налаштували плагін Translate, тому вам просто потрібно буде вибрати необхідну мову під час написання посту.
image
На цьому ми закінчуємо створення блогу. Чекайте нових уроків, в яких ми розповімо вам, як налаштувати робоче оточення. Дякую за увагу.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.