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

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

Важно: используйте разрыв "Подробнее" (Read More)

Чтобы Joomla сохраняла контент отдельно как вводный текст (introtext)и полный текст (fulltext), при редактировании статьи необходимо вставить разрыв "Подробнее" (Read More).

Для этого, при редактировании статьи:

Поместите курсор в то место, где вы хотите, чтобы вводный текст закончился.
Нажмите кнопку "Подробнее" на панели инструментов редактора.

Всё, что находится выше строки «Подробнее», становится вводным (вступительным) текстом (introtext). Всё, что ниже, становится полным текстом (fulltext). Если не использовать разрыв «Подробнее», Joomla не создаст отдельное значение для полного текста.

Шаг 1: Найдите свой активный шаблон сайта

Перейдите в панель администратора вашего сайта.
Перейдите в раздел Система → Шаблоны сайта.
Определите ваш активный шаблон (например, Сassiopeia или ваш собственный шаблон).

Мы создадим переопределение внутри этого шаблона.

Шаг 2: Создайте переопределение

В Joomla это сделать просто:

Перейдите в раздел Система → Шаблоны сайта.
Кликните по активному шаблону.
Перейдите на вкладку Создание переопределений.
Выберите Компоненты → com_content.
Нажмите на article.

В результате создается файл:

/templates/YOUR_TEMPLATE/html/com_content/article/default.php

Этот файл переопределяет основной макет, расположенный по адресу:

/components/com_content/tmpl/article/default.php

Никогда не редактируйте основные файлы (файлы ядра). Всегда используйте переопределения.

Шаг 3: Отредактируйте файл переопределения.

Откройте файл:

templates/YOUR_TEMPLATE/html/com_content/article/default.php

Найдите этот код:

<div class="com-content-article__body">
  <?php echo $this->item->text; ?>
</div>

И замените его на:

<?php if (!empty($this->item->introtext)) : ?>
  <div class="com-content-article__body_intro">
    <?php echo $this->item->introtext; ?>
  </div>
<?php endif; ?>

<?php if (!empty($this->item->fulltext)) : ?>
  <div class="com-content-article__body">
    <?php echo $this->item->fulltext; ?>
  </div>
<?php endif; ?>

Joomla хранит содержимое статьи в виде:

$this->item->introtext
$this->item->fulltext
$thiss->item->text (комбинация: вводный текст + полный текст).

Выводя эти два поля по отдельности, мы получаем полный контроль над их оформлением.

Шаг 4: Добавьте свои стили CSS.

Добавьте свой CSS-код в CSS-файл вашего шаблона. Например, для шаблона Cassiopeia в Joomla 4.1 и выше, создайте или отредактируйте файл:

/media/templates/site/cassiopeia/css/user.css

Добавьте в этот файл:

.com-content-article__body_intro {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #555;
    background-color: lavender;
    padding: 1em;
}

.com-content-article__body {
    font-size: 1rem;
    line-height: 1.7;
}

При необходимости очистите кэш Joomla и перезагрузите страницу браузеров, чтобы увидеть изменения.

Резюме

Вы создали переопределение шаблона для com_content.
Вы разделили вводный текст и полный текст на разные блоки.
Вы применили CSS-стили для блока с вводным текстом.
Вы обеспечили безопасность своим изменениям при обновлении.

Переопределение шаблонов - одна из самых мощных функций в Joomla. Она позволяет легко настраивать вывод данных, сохраняя при этом удобство обслуживания вашего сайта и его надежность в будущем.

Пример отображение материала

Индивидуальный макет материала со вводным текстом, оформленным иначе, чем основная часть текста

Настройка отображения материалов в Joomla