Зона — это специальная область MDN, чьё содержимое представлено с некоторыми дополнительными элементами управления, например, специальным блоком навигации по зоне и визуально улучшенной шапкой страницы. В этом руководстве рассматривается, как создавать и поддерживать зоны.
К примеру, область MDN Проект MDN представлена зоной.
Примечание: реализация зон — а также определение того, как они должны использоваться — всё ещё в активной разработке и может значительно измениться. Пожалуйста, если у вас есть вопросы о том, что здесь написано, задавайте их на канале #mdn в IRC, особенно, если вы планируете создать зону или превратить в неё какой-нибудь существующий материал.
Возможности зон
После того, как вы создадите зону (её создание описывается ниже), вы получаете различные специальные возможности и преимущества, которые можно и нужно использовать:
- Область заголовка, окрашиваемая в цвет, однозначно определяющий вашу зону.
- Представляющий зону баннер в области заголовка.
- Целевая страница зоны, построенная на основе навигационной иерархии зоны и представляющая большую, чем обычно, зону для большого баннера, а также место под краткое описание зоны.
- Специальная боковая панель с навигацией; зоны могут включать в эту навигацию содержимое из любой части MDN, даже если оно не находится в иерархии зоны.
- Дочерние страницы целевой страницы зоны — то есть, страницы, физически расположеные под целевой страницей — наследуют цвет зоны и её баннер, маленькую область сверху страницы.
Добавить схему/диаграмму компоновки
Существует два основных типа зон: зоны внутри вики и зоны мини-сайта.
Зоны внутри вики
Зона внутри вики — это зона, использующая преимущества функциональности зон, в тоже время оставаясь частью основного потока содержимого документации MDN. Например, эта зона, зона «Проекта MDN», является зоной внутри вики. Они являются своего рода полузонами в том смысле, что обычно они не включают содержимое извне своей собственной иерархи.
Зоны внутри вики позволяют сегментировать MDN для добавления дополнительных визуальных украшательств и, что более важно, боковых панелей навигации без выдёргивания пользователя из основного потока содержимого MDN.
Примечание: зоны внутри вики обычно не появляются в списке «Зоны» на домашней странице MDN, поскольку они рассматриваются как часть основного тела содержимого документации MDN.
Зоны мини-сайта
Зона мини-сайта — это зона, которая, хотя и редактируется и управляется при помощи того же самого интерфейса, что и любая другая вики-страница на MDN, представлена вне основного потока содержимого документации. Во всех функциональных отношениях она поддерживает всю стандартную функциональность вики, предоставляемую платформой Kuma, на которой построен MDN. Хорошим примером зоны может служить Центр приложений.
При создании зоны мини-сайта она получает новый URL за пределами дерева "/docs/" на MDN, обычно он выглядит как https://developer.mozilla.org/<локаль>/zone/<название_вашей_зоны>.
Примечание: в общем случае только очень значительное, специализированное содержимое должно быть перемещено за пределы иерархии вики; эти зоны предназначены в первую очередь для настройки специализарованных рекламных компаний и/или связанного с программой содержимого.
Что должно быть зоной?
Это интересный вопрос, и, честно говоря, ответ на него будет меняться с течением времени. Зоны являются новой концепцией для MDN и мы всё ещё изучаем, как именно мы будем их использовать.
Существует две основные причины создания зон:
- Вам нужно настроить мини-сайт для рекламной кампании или конкретного продукта.
- Вы хотите создать, так сказать, единое окно доступа к теме, охватывающей несколько областей технологии.
Создание зоны
Первым шагом является создание содержимого. Как минимум, вы должны создать начальную целевую страницу, которая станет корневой страницей вашей зоны. Если у вас есть хотя бы корневая страница и, возможно, даже несколько дочерних страниц, вы можете превратить их в зону.
Для превращения раздела MDN в зону требуются привилегии администратора MDN, так что вам нужно попросить администратора MDN сделать это за вас. В запросе на превращение раздела в зону вы должны предоставить администратору несколько вещей:
- Какая страница MDN должна быть превращена в корневую страницу новой зоны. Имейте ввиду, что все страницы, ниже её по иерархии, станут частью зоны.
- Является ли ваша зона зоной внутри вики или зоной мини-сайта?
- Так же вы должны предоставить информацию о стилях и картинки для настройки области шапки будущей зоны. Для подробностей смотрите раздел Изменение внешнего вида.
Примечание: поскольку зоны являются конструкциями специального назначения, вам, вероятно, будет предложено обосновать, почему содержимое должно быть выделено в отдельную зону. Для понимания вопроса обратитесь к разделу Что должно быть зоной?
Изменение политики доступа к зоне
В настоящий момент нет никакой поддержки разграничения прав доступа к зонам. Эту функциональность планируется добавить в будущем. Если вам нужно разграничение прав, пожалуйста, дайте нам знать, чтобы мы могли скорректировать приоритеты для этой работы.
Настройка внешнего вида
Частью того, что делает зону зоной, является возможность настройки её внешнего вида. Как минимум, она подразумевает настройку особого цвета и фонового изображения в шапке страниц зоны, помогающие пользователю понять, что он находится в определённой зоне. Также можно сделать и другие изменения внешнего вида страницы, однако они не должны выбиваться из общего стиля MDN.
Примечание: важно иметь в виду, что инструкции, изложенные ниже, являются всего лишь подсказками. Вы можете попытаться более тонко настроить CSS для своей зоны. Просто имейте в виду, что ваши изменения могут быть пересмотрены нашими командами по UX и/или дизайну и они должны вписываться в общий стиль MDN.
Базовая настройка
Базовая требуемая настройка для каждой зоны — это настройка цвета фона и изображения в шапке страниц зоны. Во время запроса создания зоны вас попросят предоставить эти данные. Далее изложены основные рекомендации по тому, что вы должны предоставить.
- Фоновый цвет должен явно отличаться от фонового цвета остальных зон и в тоже время иметь отношение к освещаемой зоной теме. Вы должны определить его как
<color>, чтобы администратор MDN мог настроить вашу зону. - По умолчанию, фоновое изображение появляется с правой стороны шапки (или с левой стороны в локалях с написанием текста справа-налево). Это изображение может быть в любом совместимом с веб формате, хотя обычно предпочтителен формат PNG. Оно должно либо смешиваться с вашим фоновым цветом, либо (что предпочтительнее) иметь прозрачный фон. Как правило, фоновое изображение должно быть около 468 пикселей в ширину и 400 пикселей в высоту, хотя в CSS на странице может быть проставлено значение
overflowдля его обрезки при необходимости. Тем не менее, создание слишком большого изображения увеличивает размер страницы, чего следует избегать. - Изображение может быть отправлено администратору MDN во время вашего запроса на создание зоны, или оно может быть одним из уже загруженных на MDN с соответствующей страницей вложений.
Имея эту информацию, команда администраторов MDN сможет установить для вас базовый CSS вашей зоны. Однако, если вы хотите, вы можете пойти дальше и предоставить свой собственный CSS. Следуя инструкциям в разделе Дополнительные изменения, вы можете поэкспериментировать с другими изменениями визуального стиля вашей зоны.
Дополнительные изменения
Если вы хотите исследовать дополнительные возможности настройки, взгляните на шаблоны CSS/stylus, расположенные на github. Это список всех CSS Stylus для стилей, которые вам позволено менять при помощи вашего CSS для зоны.
Если вы хотите сделать дополнительные настройки, вы можете это сделать, но с одной важной оговоркой: ваши изменения не должны настолько значительными, что страницы зоны перестают выглядеть как часть MDN.
При изменении таблицы стилей зоны вашими задачами становятся выделить те стили из шаблона, которые вы хотите изменить и поместить их в результирующий CSS. Как только вы сделаете это, предоставьте получившийся CSS команде администраторов MDN и они установят его для вас.
Всё содержимое, относящееся к зонам, имеет класс zone.
Примечание: пожалуйста, обратите внимание, что поскольку сайт находится в стадии активной разработки, любые обсуждаемые здесь классы и стили могут быть изменены без предварительного уведомления.
Фоновые цвета
Как ранее упоминалось, первым делом вы, вероятно, захотите настроить фоновый цвет шапки вашей зоны. CSS может выглядеть подобным образом:
.zone #main-header, .zone .zone-article-header, .zone .zone-landing-header {
background-color: цвет-зоны;
}
Идентификатор main-header ссылается на область навигации по сайту в самом верху страницу. Она включает вкладку «Mozilla» для междусайтовой навигации, поле поиска и другую глобальную функциональность по навигации.
Класс zone-article-header представляет внешний вид шапки на страницах со статьями внутри зоны. То есть, все страницы, кроме целевой страницы зоны, будут в своей шапке иметь этот класс.
Класс zone-landing-header используется в шапке целевой страницы зоны. Это более высокая шапка на целевой странице с большим изображением внутри неё.
Как правило, вы захотите, чтобы эти области имели одинаковый цвет; и в самом деле, шапки статьи и целевой страницы должны быть одинаковыми. Единственной причиной, по которой вы могли бы настроить их по разному, является наличие градиентов и необходимость подогнать их цвет к некоторому «общему знаменателю», несмотря на различие по высоте.
Короче говоря: замените цвет-зоны в кусочке CSS, предоставленном выше, на <color>, который вы выбрали для вашей зоны.
Изображение в шапке целевой страницы
Также вы можете захотеть изменить изображение, представляющее вашу зону на целевой странице зоны. Эта страница имеет большую шапку для большого изображения, представляющего вашу зону. CSS выглядит так:
.zone .zone-landing-header .zone-image {
background-image: url(url-изображения-зоны);
}
Класс zone-image используется для определения и стилизации изображения в шапке целевой страницы вашей зоны. Изображение должно быть не более 468 пикселей в ширину, хотя вы и можете изменить это здесь же с помощью дополнительного CSS. Просто замените url-изображения-зоны на URL используемого вами изображения.
Примечание: простейшим способом предоставить изображение является прикрепление его к соответствующей странице на MDN и использования получившегося URL.
Изображение в шапке страницы статьи
Кроме того, вы должны установить изображение, представляющее вашу зону на дочерних страницах. По умолчанию, это изображение ограничено 200 пикселями в ширину и 400 пикселям ив высоту, но, опять же, это может быть изменено.
.zone .zone-article-header .zone-image {
background-image: url(url-изображения-зоны);
}
Просто замените url-изображения-зоны на URL используемого вами изображения.
Примечание: простейшим способом предоставить изображение является прикрепление его к соответствующей странице на MDN и использования получившегося URL. Вы можете использовать тоже самое изображение что и в шапке целевой страницы, просто отмасштабировав и обрезав его, либо использовать другое изображение.
Нижняя граница кнопки в шапке
Последнее, что мы рекомендуем вам поменять, — это внешний вид нижней границы кнопок в шапке зоны. Вот CSS:
.zone .zone-landing-header a.button {
box-shadow: inset 0 -1px цвет;
}
Здесь замените цвет на <color> того же оттенка, что и фоновый, но чуточку темнее.
Навигация по зоне
Боковая панель навигации по зоне
Боковая панель, появляющаяся на каждой странице зоны, определяется в содержимом целевой страницы зоны, в разделе с названием «Subnav» (виден только при редактировании страницы). Этот раздел может содержать вручную составленный куратором список страниц, либо использовать макрос, например ListSubpages. В последнем случае вам нужно будет принудительно перезагрузить (обновление с шифтом) целевую страницу зоны, чтобы увидеть изменения в боковой панели.
Примечание переводчика: Раздел «Subnav» не обязательно должен так называться, достаточно проставить атрибут id="Subnav" у заголовка. Однако, редактор MDN принудительно сбрасывает идентификатор в название раздела при сохранении страницы. Чтобы он этого не делал, достаточно добавить к заголовку атрибут name="Subnav", в этом случае в качестве идентификатора будет использоваться значение этого атрибута.
Быстрые ссылки
Как и любая другая страница на MDN, страницы внутри зоны могут использовать возможность быстрых ссылок. Быстрые ссылки — это навигационный блок, расположенный в левой боковой панели, предлагающий пользователю ссылки на сопутствующие материалы. Эти ссылки могут вести внутрь MDN или на внешние сайты и могут иметь до двух уровней вложенности.
Чтобы облегчить создание наиболее распространённых типов быстрых ссылок для зон, мы написали несколько макросов, которые вы также можете использовать.
Макрос QuickLinksWithSubpages
Макрос QuickLinksWithSubpages создаёт весь требуемый HTML для блока быстрых ссылок на странице со ссылками на страницы в указанной иерархии. Вы также можете использовать его без параметров для генерирования быстрых ссылок на дочерние страницы текущей страницы, хотя это не так полезно в зоне, поскольку навигация по зоне, как правило, уже предоставляет эти ссылки.
Руководство по оформлению зон
Примечания
В этом разделе содержатся примечания, которые следует иметь в виду при создании зон и работе с ними.
- Каждая страница в зоне автоматически наследует боковую панель навигации, предоставляемую корневой страницей зоны.
- Если страница в зоне имеет раздел быстрых ссылок, быстрые ссылки отображаются под навигацией по зоне в боковой панели. Отключение быстрых ссылок отключает как быстрые ссылки, так и панель навигации, оставляя больше пространства под содержимое страницы.