Продолжаем редактировать, а точнее переопределять (или если угодно шаблонизировать) макет блога категории Joomla 3. В первой части данной статьи мы познакомились с основными файлами, отвечающими за макет блога категории, и разобрали их код (если вы не читали первую часть статьи, то настоятельно рекомендую это сделать). Данная же статья будет полностью посвящена редактированию данных файлов.
Для начала мы удалим лишний код, тем самым пусть незначительно, но все же сократим размер данных файлов и снизим нагрузку на сервер. Затем внесем определенные правки в соответствии с техническим заданием, а точнее в соответствии с PSD макетом, который нам необходимо перенести в шаблон Joomla 3 (данный макет я показывал в статье «Создание шаблона Joomla 3 – вёрстка»).
Удаление «лишнего» кода с файлов ядра Joomla 3
Итак, приступим! Для начала открываем файл blog.php и очищаем его от лишнего кода, который нам не пригодиться. Хочу сразу сказать, что код, который будет лишний в моем случае, для любого другого сайта может таковым не являться.
В самом начале я удаляю строки, отвечающие за вывод заголовка категории, в моем случае они мне не нужны, если заголовок все же будет необходим, то его можно будет вывести с помощью пункта меню:
Точно так же мне не нужны метки категории, код, отвечающий за их отображение так же можно удалить:
Следующий блок кода отвечает за вывод описания и изображения категории, мне эти данные на странице сайта не нужны, поэтому я их так же удаляю (можно поступить по-другому, переместить описание и изображение категории в конец страницы, для этого необходимо вставить весь блок кода перед пагинацией):
В заключении я удаляю код, отвечающий за вывод материалов в колонках и в виде ссылок, мне они не нужны, ведь в моем случае материалы должны выводиться по всей ширине страницы:
Таким образом, мы избавились от лишнего, а точнее не нужного для конкретного случая кода в файле blog.php. В результате чего размер файла сократился с 5862 до 3506 байт, мелочь, а приятно! Кроме размера файла мы так же пусть незначительно, но все же снизили нагрузку на сервер, ведь для формирования страницы ему не придется обрабатывать тот самый код, который мы удалили.
Оформление и изменение внешнего вида материалов в блоге
С файлом blog.php закончили, переходим к файлу blog_item.php который отвечает за внешний вид материалов выводимых в блоге категории.
Что тут можно поменять? Для ответа на этот вопрос давайте взглянем на макет того что должно получиться:
Как видите изображение должно быть размещено слева, а вся остальная информация о материале в правой части. Но по умолчанию в Joomla изображение вступительного текста материала расположено под заголовком, но нам это не нужно. Самый простой способ это исправить, это найти в файле blog_item.php строчку кода:
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
Нашли? Отлично, вырезаем её и вставляем перед кодом, который отвечает за вывод заголовка материала:
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
Готово, благодаря незначительному изменению в порядке вывода данных мы добились желаемого результата:
Хочу обратить внимание, что заголовок материала в блоге категорий выводится при помощи специального глобального класса JLayout. И если появилась необходимость изменить заголовок материала тогда обычной правкой файла blog_item.php не обойтись (хотя такой вариант так же возможен). Придется поискать дополнительный файл, который за это отвечает. Сложного тут ничего нет, если посмотреть на код вывода заголовка внимательно:
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
Можно понять, что для этих целей используются дополнительный файл с именем blog_style_default_item_title расположенный в папке /layouts/joomla/content. Его точно так же можно переопределить, скопировав в папку /templates/имя_шаблона/html/layouts/joomla/content.
Теперь нам необходимо изменить стиль вывода даты публикации статьи. По умолчанию у нас дата публикации выглядит следующим образом – «Опубликовано: число месяц год». Однако в макете слова «Опубликовано» нет, а вместо него стоит изображение часов. Как это исправить? Придется искать необходимый файл, который отвечает за вывод подобной информации.
Опять переходим к слоям (layouts), нас интересует файл block.php расположенный в папке /layouts/joomla/content/info_block. Почему именно он? Потому что именно он указан в файле blog_item.php:
<?php echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'above')); ?>
Открываем указанный выше файл и смотрим, что в нем есть, а есть в нем очередная ссылка на другой файл (если честно уровень вложений просто удивляет):
echo JLayoutHelper::render('joomla.content.info_block', $displayData);
Данная ссылка указывает на файл /layouts/joomla/content/info_block.php. Переходим по указанному пути и открываем файл. Это уже похоже на то, что нам необходимо – вывод дополнительной информации о материале (родительская категория, автор, дата публикации и т.д.)
Находим строчки кода отвечающие за вывод даты публикации материала:
<?php if ($displayData['params']->get('show_publish_date')) : ?>
<?php echo $this->sublayout('publish_date', $displayData); ?>
<?php endif; ?>
Как видим, тут используется обычное условие - если в настройках макета блога используется значение «Показать дату публикации» тогда выводим то, что необходимо. Однако тут есть новая загвоздка – очередная ссылка на новый файл (как я и говорил, уровень вложенности может свести с ума). Смотрим на имя файла publish_date, а теперь переходим в папку /layouts/joomla/content/info_block и находим файл с таким именем.
Чтобы не вносить изменение в ядро Joomla напрямую, давайте создадим переопределение данному файлу. Для этого копируем его в папку /templates/имя_шаблона/html/layouts/joomla/content/info_block.
Открываем только что переопределенный файл publish_date.php, он небольшой всего 17 строк кода, но основная часть начинается с 12-ой строки:
<dd class="published">
<span class="glyphicon glyphicon-time"></span>
<time datetime="<?php echo JHtml::_('date', $displayData['item']->publish_up, 'c'); ?>" itemprop="datePublished">
<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $displayData['item']->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
Чтобы добавить к дате публикации изображение можно поступить традиционным способом - указать изображение явно, либо воспользоваться возможностями Bootstrap и использовать специальные символы (glyphicon). Я решил пойти вторым путем и подобрал наиболее подходящую иконку Бутстрапа - glyphicon-time. Как её применить? Все просто, заменяем строку:
<span class="icon-calendar" aria-hidden="true"></span>
На следующую строчку:
<span class="glyphicon glyphicon-time"></span>
Теперь нам надо избавиться от надписи «Опубликовано», для этого будет вполне достаточно удалить следующую строку COM_CONTENT_PUBLISHED_DATE_ON. В результате код должен получиться примерно таким:
<dd class="published">
<span class="glyphicon glyphicon-time"></span>
<time datetime="<?php echo JHtml::_('date', $displayData['item']->publish_up, 'c'); ?>" itemprop="datePublished">
<?php echo JText::sprintf(JHtml::_('date', $displayData['item']->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</time>
</dd>
В результате (если применить необходимые стили - изменить цвет и выравнивание) внешний вид даты публикации материала у меня получился следующим:
Результат конечно далек от совершенства, но применив определенные стили оформления легко получить желаемый результат.
На этом вторая и заключительная статья на тему «Переопределение макета блога категории в Joomla 3» подошла к концу. В заключение хочется отметить, что данный вид переопределения распространяется только на макет блога категории, за избранные материалы отвечает другой шаблон, расположенный в папке /components/com_content/views/featured/tmpl/, но об этом позднее.
