Найти в Дзене
Сам Себе Веб-Мастер

Адаптация html-шаблона под MyEngine. Часть 7.

Здравствуйте, читатели канала Сам Себе Веб-Мастер.

Источник: Яндекс Картинки. Фото адаптировано автором.
Источник: Яндекс Картинки. Фото адаптировано автором.

Продолжаем адаптировать шаблон ZeroFour под движок MyEngine. В этой статье мы будем корректировать штатный модуль Новостная лента. Если открыть страницу Новости, на которую выводятся превью всех созданных новостей, то она выглядит так

Не адаптированная страница превью новостей.
Не адаптированная страница превью новостей.

Страница самой новости выглядит так

Не адаптированная страница новости
Не адаптированная страница новости

На этой странице выведен блок комментариев.

Не адаптированный блок комментариев.
Не адаптированный блок комментариев.

Все это необходимо привести к общему виду с шаблоном. В движке заложена возможность изменить вид страницы превью новостей и страницы самой новости. Для этого необходимо создать шаблоны вывода превью и контента новости. Шаблон для превью новости прописывается в файле news.prev.template.php. Этот файл можно создать самостоятельно или скопировать его из папки deftpl с дефолтным шаблоном. Открываем файл, удаляем его содержание и прописываем новый код шаблона превью, который имеет вот такой вид.

Файл news.prev.template.php. Код шаблона превью новости.
Файл news.prev.template.php. Код шаблона превью новости.

Шаблон контента новости прописывается в файле news.content.template.php. Этот файл берем так же в дефолтном шаблоне и прописываем в нем такой код.

Файл news.content.template.php. Код шаблона контента новости.
Файл news.content.template.php. Код шаблона контента новости.

Загружаем эти файлы на сервер в папку с шаблоном zerofour. Теперь страница превью новостей обрела вот такой вид

Адаптированная страница превью новостей.
Адаптированная страница превью новостей.

Страница самой новости так же изменилась.

Адаптированная страница новости.
Адаптированная страница новости.

А вот блок комментариев не изменился.

Блок комментариев.
Блок комментариев.

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

Стили css для блока комментариев в дефолтном шаблоне.
Стили css для блока комментариев в дефолтном шаблоне.

Прописываем эти стили в файле main.css нашего шаблона и загружаем на сервер. Смотрим, что получилось.

Блок комментариев со стилями  css дефолтного шаблона.
Блок комментариев со стилями css дефолтного шаблона.

Как вам? Мне лично не очень. Поэтому, немного по колдовав над этими стилями, я получил вот такой результат.

Блок комментариев с новыми стилями  css.
Блок комментариев с новыми стилями css.

Вот эти стили css.

Стили css для блока комментариев.
Стили css для блока комментариев.

По моему, получился отличный блок комментариев, абсолютно гармоничный с общим стилем шаблона.

Идем дальше. На странице превью у нас может выводится меню листинга страниц, если количество превью новостей превышает число, установленное в настройках модуля новостной ленты. Сейчас это меню имеет такой вид.

Меню листига страниц.
Меню листига страниц.

Оно выглядит так все по той же причине, в шаблоне нет стилей css для этого меню. Берем эти стили в дефолтном шаблоне.

Стили css для меню листинга в дефолтном шаблоне.
Стили css для меню листинга в дефолтном шаблоне.

Нам класс .news в нашем шаблоне не нужен. Поэтому, мы его убираем и к эти стилям добавляем еще одно правило.

span.date-page {
display: block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.065em;
font-size: 1.1em;
color: # 696969;
margin: 0 0 0.25em 0;
}

Это правило отвечает за вывод даты на странице новости. В целом эти стили css будут выглядеть так.

Стили css для меню листинга.
Стили css для меню листинга.

Вставляем эти стили в файл main.css и загружаем на сервер, смотрим результат.

Меню листинга страниц.
Меню листинга страниц.

Вроде все у нас получилось. Но, чего не хватает. Мне лично, не хватает меню категорий в боковом блоке, т.к. это меню не выводится на страницах новостей. Нужно сделать, чтобы выводилось.

Код этого меню у нас уже есть в шаблоне, правда в другом блоке.

Код вывода меню категорий новостей.
Код вывода меню категорий новостей.

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

<?php if($URI[1] == 'news'){?>
// Здесь код меню
<?php }?>

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

Код меню категорий новостей.
Код меню категорий новостей.

Вставляем в файл шаблона, загружаем его на сервер и смотрим результат.

Вид страницы с меню категорий новостей.
Вид страницы с меню категорий новостей.

Замечательно. Теперь меню категорий новостей будет присутствовать на всех страницах.

На этом все. Надеюсь, что вы проделали все действия вместе со мной и получили такой же результат. Если нет, то скачайте готовый шаблон с Яндекс Диск и установите на свой тестовый сайт.

До свидания. Не забывайте подписываться на канал Сам Себе Веб-Мастер.

Другие публикации на эту тему:

Адаптация html-шаблона под MyEngine. Часть 1

Адаптация html-шаблона под MyEngine. Часть 2

Адаптация html-шаблона под MyEngine. Часть 3

Адаптация шаблона под MyEngine. Часть 4

Адаптация html-шаблона под MyEngine. Часть 5

Адаптация html-шаблона под MyEngine. Часть 6

Адаптация html-шаблона под MyEngine. Часть 8