У joomla-4 у меню блогу можна керувати розташуванням та кількістю колонок виведення статей. Завдяки новій системі класів grid та flex, можна створювати красиві блоки новин без сторонніх компонентів.
У цьому матеріалі я покажу кілька прикладів на основі стандартних матеріалів. Ви можете змiнитi оформлення, для цього добавте свiй стиль у файл user.css.
У базовому шаблоні cassiopeia встановлено такі варіанти блогу:
- Поділ на Головні та Вступні матеріали ▬: верх / низ.
- Поділ на колонки ▥: 1, 2, 3, 4...
- Поділ на ряди ▤: 1, 2, 3, 4...
- Розміщення картинки щодо тексту ▣: зліва, праворуч, зверху, знизу, реверс, масонрі.
Я додав наступний макет:
- Розташування Головних матеріалів та Вступних матеріалів горизонтально в 2 блоки ◧: ліворуч/праворуч.
- Виведення на мобільному телефоні в дві колонки ◫. За замовчанням система grid на екранах менше 576px виводить кожен матеріал на всю ширину. Додаємо нове правило до grid blog і вставляємо ім'я нового класу
mobile-cols-2
Класи вставляються вручну. Спробувавши різні варіанти, швидко зрозумієте, куди що вставляти. Макет Блога не треба міняти щодня, він налаштовується один раз.
Параметри відображення статей у макеті блогу
1 колонка, фото зліва, клас image-left
1 колонка, фото зліва-праворуч, класи image-left image-alternate boxed
2 колонки, фото зліва, клас image-left
3 колонки, клас boxed
3 колонки, масонрі, фото внизу, класи masonry-3 image-bottom boxed
Головні: 3 колонки, клас columns-3
Вступні: 1 колонка, класи image-left image-alternate boxed
Мобільний телефон: 2 колонки, без вступного тексту, клас mobile-cols-2 boxed
