В ходе обсуждения вопроса замены шапки на сайте возник вопрос, а можно ли сделать свою особенную шапку для разных страниц и разделов сайта. Ну и, конечно, если можно, то как. Базовое знание HTML, CSS и $юкоз-переменных$ необходимо для лучшего понимания данного урока.
Вообще, в чём состоит основная техническая заковырка этого вопроса, ведь раньше, когда каждая страница версталась вручную, такого вопроса не возникало? Дело в том, что современные конструкторы генерируют страницы на основе шаблона, общего для всего сайта, вот и возникает резонный вопрос: а как подкопаться к конкретной страничке или, что иногда сложнее, группе страниц, являющих раздел сайта.
Для большей наглядности, чтобы понять, о чём идет речь, давайте заглянем в каталог предметов. Да, шапка тут постоянна и не меняется, но вот вступительные заметки к каждой категории предметов - разные. Аналогичным образом можно поступить и с шапкой, но первое, что вам нужно сделать - составить смысловую структуру сайта. Я знаю, что многие не занимаются этим вообще. Порой, такой необходимости действительно нет, поскольку организация сайто-конструкторов такова, что упорядоченная структура возникает сама собой.
Так как запрос пришёл от сайта "Сказания эфира", не будем говорить в общем, пойдём прямо к ним. На момент написания статьи его структура выглядит так:
- Главная
- О сайте
- О Миречар
- Новости
- Новость 1
- Новость 2
- ...
- Статьи
- Статья 1
- Статья 2
- ...
- Блог
- Запись 1
- Запись 2
- ...
Ucoz - модульная система, все его модули независимы и основываются на разных шаблонах, несмотря на то, что в момент создания дизайна они генерируются по одному каркасу, поэтому ниже я указала, на основании какого шаблона формируется та или иная страница.
- Главная (страницы сайта)
- О сайте (страницы сайта)
- О Миречар (страницы сайта)
- Новости (модуль news, страница архива материалов)
- Новость 1 (модуль news, страница материала и комментариев к нему)
- Новость 2
- ...
- Статьи (модуль publ, главная страница модуля)
- Статья 1 (модуль publ, страница материала и комментариев к нему)
- Статья 2
- ...
- Блог (модуль blog, главная страница модуля)
- Запись 1 (модуль blog, страница материала и комментариев к нему)
- Запись 2
- ...
Для начала давайте вообще посмотрим, как сделана шапка и с какой стороны к ней можно подкопаться. Откроем исходный код или инструменты разработчика и посмотрим, где зарыта "голова сайта" и фоновая картинка - именно её мы будем менять на разных разделах.
В коде за неё отвечает строчка
<div id="header">
Таблица стилей задает оформление, в том числе и фоновую картинку (строка 291)
#header {
background: #571209 url("../images/2.png") no-repeat scroll 0 0 / cover ;
position: relative;
}
Самый очевидный способ - в разных шаблонах прописать разные шапки. Это можно организовать даже не смотря на то, что шапка хранится в некоем глобальном блоке и общая для всех-всех шаблонов. Достаточно заменить кодовое слово $GLOBAL_AHEADER$ на собственно код шапки из соответствующего шаблона, но мы так поступать не будем - это крайне неумно и абсолютно непроизводительно. Обычно я люблю рассказать, откуда ноги (или в нашем случае, головы) растут, но ног оказалось неожиданно много... почти как у октопая, поэтому перейдём сразу к самому оптимальному способу - использованию переменных.
Откроем шаблон шапки и поменяем строку
<div id="header">
на
<div class="header $MODULE_ID$">
и одновременно в таблице стилей заменим #header на .header. Замена идентификатора на класс позволит нам использовать оформление "по умолчанию", при этом перекрывая его специализированным оформлением там, где мы это зададим. В частности код $MODULE_ID$ будет меняться в зависимости от модуля, к которому относится открытая в текущий момент страница. Например, в исходном коде браузера на страницах Статьи или Статья 1 или даже Страница добавления новой статьи эта строка шапки будет выглядеть так:
<div class="header publ">
Правила в таблице стилей следует записать так:
.header {
background: #571209 url("../images/2.png") no-repeat scroll 0 0 / cover ;
position: relative;
} /*правило по дефолту */
.header.news {
background: url("../images/bg-header-news.png") no-repeat scroll 0 0 / cover ;
} /* селектор сдвоенного класса .header и .news одновременно */
.header.publ {
background: url("../images/bg-header-publ.png") no-repeat scroll 0 0 / cover ;
}
.header.blog {
background: url("../images/bg-header-blog.png") no-repeat scroll 0 0 / cover ;
}
В данном примере мы использовали переменную $MODULE_ID$ и, соответственно, идентификацию по модулю, однако, может возникнуть необходимость уникальности внутри модуля. Скажем, на Полочке статьи из разных категорий имеют папки различных цветов, и я использовала переменную $CID$ (идентификатор категории), сделав такие же составные классы для контейнера каждого материала. Только $CID$ принимает цифровые значения, что неприемлемо для классов, поэтому лучше писать class="view_default view$CID$", а в таблице стилей все правила, которые вы собираетесь менять:
view1 {...}
view2 {...}
view4 {...}
Если правила оформления для какого-то класса неопределены, то элемент будет в соответствии с классом по умолчанию .view_default.
Но Сказания эфира не используют категории, зато им нужно уникализировать страницы "О сайте" и "О Миречар", которые в ucoz создаются с помощью Редактора страниц, а $MODULE_ID$ для них принимает одинаковое значение index.
Для такого индивидуального, а не группового подхода система ucoz имеет переменную $URI_ID$, уникальный для каждой страницы (кроме страниц пагинаций, то есть если список материалов велик и приходится перелистывать: первая страница, вторая, пятая, то формально для системы это одна страница и $URI_ID$ у нее одинаковый).
Чтобы узнать, какое значение принимает переменная страницы, администратору нужно на этой странице в админ-баре нажать иконку Конструктор.
И последняя плюшка на сегодня. До сих пор всё оформление мы прописывали в таблице стилей (и это правильно), но порой в шаблоне нужно прописать не просто класс, а целый фрагмент кода, уникальный для страницы или группы страниц. Так, например, в каталоге предметов выведены ключевые статьи, свои для каждой категории. Тут приходится использовать операторы условий:
<?if($URI_ID$=='page1')?> код 1 <?else?> код 2 <?endif?>
Означает:
Если переменная $URI_ID$ принимает значение (равна) page1, выполнить фрагмент кода 1, иначе (если не равна/отлична) выполнить фрагмент кода 2, конец условия.
0
