13.01.2026 00:15
gresserg 0 6800 Источник

Это перевод статьи Брайана Тимана (Brian Teeman) о доработке модуля Материалы (mod_articles), позволяющей выводить заголовки материалов категории (ий) с группировкой по годам и месяцам.

Благодарю за идейное вдохновение, корректировку и наставничество, при создании статьи, Joomla-разработчика Сергея (WebTolk) Толкачёва.

Шаг 1 - настройка модуля

  1. В административной панели Joomla перейдите в раздел Система → Модули сайта → Создать.

  2. Выберите Материалы (mod_articles) в качестве типа модуля.

  3. В настройках создаваемого модуля:

    Количество материалов: установите значение 0, чтобы отобразить все материалы.

    Категория: выберите какие материалы вы хотите включить для вывода модулем (например: выбрать категории, исключить/включить дочерние категории и т.д.).

    Отображение: установите "Список материалов (только заголовки)" = Да.

    Сортировка: укажите дату по которой будут отсортированы материалы (например: "Дата начала публикации") и направление сортировки (например: "По убыванию").

    Группировка: установите значение параметров "Группировка материалов" = Месяц и год, "Поле для группировки" = например: Дата начала публикации, "Направление группировки" = например: по убыванию.

  4. Выберите для модуля позицию, привяжите к пунктам меню, если это необходимо, сохраните и опубликуйте.

Результат: на странице сайта mod_articles выведет список ваших материалов, сгруппированных по месяцам и годам.

Примечание переводчика:

Из-за особенностей русской локализации Jommla мы видим, что месяца переводятся на русский язык в родительном падеже. Чтобы отобразить месяца в именительном падеже, мною внесены изменения в код файла макета модуля. Подробнее смотрите в конце шага 3

Шаг 2 - группировка по годам

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

Используя переопределение шаблона вы можете применить свою HTML-верстку при выводе модуля Joomla, без изменения основных файлов, что обеспечит сохранение ваших изменений при обновлениях.

1.Создайте переопределение шаблона модуля.

  • Перейдите в раздел Система → Шаблоны сайта.

  • Кликните по активному шаблону.

  • Перейдите на вкладку Создание переопределений.

  • Найдите модуль, который мы хотим переопределить (mod_articles) и нажмите на него. Joomla автоматически создаст копию макета модуля в вашем шаблоне, в папке /templates/template_name/html/mod_articles.

2.Переименуйте переопределенные файлы. Нам нужно переименовать три файла, например: date.php, date_details.php и date_title.php.

3.Обновите настройки модуля, чтобы использовать переопределение.

  • вернитесь в модуль, перейдите на вкладку "Дополнительные параметры" и в параметре "Макет" выберите в раскрывающемся списке переопределенный файл макета модуля.

4.Добавьте PHP-код для группировки по году.

  • Вернитесь в редактор шаблонов и откройте файл date.php для редактирования.

  • Добавьте следующий код, чтобы разделить дату и сгруппировать ее по году, а затем по месяцу. 

<?php
// Группируем материалы по году, а затем по месяцу.
$groupedByYear = [];
foreach ($list as $groupName => $items) {
    // Разделим название группы на месяц и год.
    [$month, $year] = explode(' ', $groupName);
    // Инициализируйте группу год если она не существует.
    if (!isset($groupedByYear[$year])) {
        $groupedByYear[$year] = [];
    }
    // Добавим месяц и материалы в нем в соответствующий год
    $groupedByYear[$year][$month] = $items;
}
?>

  • Визуальных изменений на странице пока нет!

Шаг 3 - добавление постепенного раскрытия

Следующий шаг изменить отображение применением HTML-тегов <details>и<summary>.

  • В редакторе шаблонов откройте файл date.php для редактирования.

  • Удалите имеющийся код отображения заголовков материалов.

<?php if ($grouped) : ?>
    <?php foreach ($list as $groupName => $items) : ?>
        <div class="mod-articles-group">
        <<?php echo $groupHeading; ?>><?php echo Text::_($groupName); ?></<?php echo $groupHeading; ?>>
        <?php require ModuleHelper::getLayoutPath('mod_articles', $params->get('layout', 'default') . $layoutSuffix); ?>
        </div>
    <?php endforeach; ?>
<?php else : ?>
    <?php $items = $list; ?>
    <?php require ModuleHelper::getLayoutPath('mod_articles', $params->get('layout', 'default') . $layoutSuffix); ?>
<?php endif;

  • И вставьте вместо него этот код:

<?php
$months = [
    'января' => 'январь',
    'февраля' => 'февраль',
    'марта' => 'март',
    'апреля' => 'апрель',
    'мая' => 'май',
    'июня' => 'июнь',
    'июля' => 'июль',
    'августа' => 'август',
    'сентября' => 'сентябрь',
    'октября' => 'октябрь',
    'ноября' => 'ноябрь',
    'декабря' => 'декабрь',
];
foreach ($groupedByYear as $year => $months) : ?>
    <details class="mod-articles-year">
        <summary><?php echo $year; ?></summary>
        <?php foreach ($months as $month => $items) :
            <details class="mod-articles-month">
                <summary><?php echo $months[$month]; ?></summary>
                <?php require ModuleHelper::getLayoutPath('mod_articles', $params->get('layout', 'date') . $layoutSuffix); ?>
            </details>
        <?php endforeach; ?>
    </details>
<?php endforeach; ?>

Убедитесь, что $params->get('layout', 'date') соответствует названию вашего переопределенного файла.

Примечание переводчика:

В процессе перевода оригинальной статьи, в выше приведенный код мною были внесены изменения, а именно:

  • создан массив с изменением падежа месяцев (строки 2 - 15);

  • исключен класс Text::_ при выводе года и месяца.

Шаг 4 - доработка с помощью CSS

Сейчас на вашем сайте все должно работать, но вы можете улучшить отображение с помощью CSS.

Вернемся в редактор шаблонов, чтобы добавить немного CSS.

Если вы используете шаблон Cassiopeia, то можете добавить свой CSS-код в файл user.css расположенный в папке media/templates/site/cassiopeia/css. Если у вас файл user.css еще не создан, то вы можете создать его прямо сейчас.

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

/* раскрытие блога */
details.mod-articles-month {
    padding-inline-start: 1em;
}
.mod-articles-month ul {
    margin-bottom: 0;
}
.mod-articles-month li {
    margin-inline-start: 2em;
    list-style: disc;
}

Конечный результат

Ниже вы можете увидеть конечный результат со всеми изменениями HTML и CSS, а также его работу в действии на сайте Брайана Тимана https://brian.teeman.net/.

Комментарии (0)