Мирчар на полочке
    Вход через социальные сети
    E-mail:
    Пароль:
    Воспользуйтесь формой, если у вас не получается войти через uID.
    Администрация Каталога: Tinory (Профиль в Мирчар).
     
    Главная » Статьи » Web-чар

    Такая разная шапка

    В ходе обсуждения вопроса замены шапки на сайте возник вопрос, а можно ли сделать свою особенную шапку для разных страниц и разделов сайта. Ну и, конечно, если можно, то как. Базовое знание HTML, CSS и $юкоз-переменных$ необходимо для лучшего понимания данного урока.

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

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

    Так как запрос пришёл от сайта "Сказания эфира", не будем говорить в общем, пойдём прямо к ним. На момент написания статьи его структура выглядит так:

    • Главная
      • О сайте
      • О Миречар
      • Новости
        • Новость 1
        • Новость 2
        • ...
      • Статьи
        • Статья 1
        • Статья 2
        • ...
      • Блог
        • Запись 1
        • Запись 2
        • ...

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

    • Главная (страницы сайта)
      • О сайте (страницы сайта)
      • О Миречар (страницы сайта)
      • Новости (модуль news, страница архива материалов)
        • Новость 1 (модуль news, страница материала и комментариев к нему)
        • Новость 2
        • ...
      • Статьи (модуль publ, главная страница модуля)
        • Статья 1 (модуль publ, страница материала и комментариев к нему)
        • Статья 2
        • ...
      • Блог (модуль blog, главная страница модуля)
        • Запись 1 (модуль blog, страница материала и комментариев к нему)
        • Запись 2
        • ...

    Для начала давайте вообще посмотрим, как сделана шапка и с какой стороны к ней можно подкопаться. Откроем исходный код или инструменты разработчика и посмотрим, где зарыта "голова сайта" и фоновая картинка - именно её мы будем менять на разных разделах.

    <!--IMG2_ALT-->Исходный код страницы в Firebug<!--IMG2_ALT-->

    В коде за неё отвечает строчка

    <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$ у нее одинаковый).

    Чтобы узнать, какое значение принимает переменная страницы, администратору нужно на этой странице в админ-баре нажать иконку Конструктор.

    <!--IMG3_ALT-->Переменные страницы в админ-баре<!--IMG3_ALT-->

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

    <?if($URI_ID$=='page1')?>
      код 1
    <?else?>
      код 2
    <?endif?>
    

    Означает:

    Если переменная $URI_ID$ принимает значение (равна) page1,
      выполнить фрагмент кода 1,
    иначе (если не равна/отлична)
      выполнить фрагмент кода 2,
    конец условия.

    Такая разная шапка
    Web-чар | | 1055 | 2 | 0.0/0 | кодинг, уроки, uCoz
    Еще по теме:
    Всего комментариев: 2
    avatar
    0
    1 Мирчаровец Klis • 10:11, 03.11.2016
    В заголовке опечатка
    В который раз убеждаюсь, что оформление сайта не такое уж простое дело. Для меня, человека, незнакомого с кодами и структурами сайтов, всё это выглядит древним орнаментом (Что видит непосвященный чар...)
    avatar
    0
    2 Мирчаровец Tinory • 11:08, 03.11.2016
    Sleiter тоже сказал, что он не понял, так что я сейчас напишу "Введение в переменные".
    В принципе, Мирчар не обязует полную уникализацию дизайна, достаточно поменять картинку шапки, а юкоз сейчас позволяет делать это из конструктора, вообще не залезая в код.
    Я же всегда в этом плане говорила: хочешь сделать по-своему - учись и делай (или плати); не хочешь учится или платить - довольствуйся стандартным.
    avatar