Документерра: руководство пользователя

Стилизация и брендинг

Система Документерра предлагает широкие функциональные возможности для настройки как внешнего вида портала, так и стиля контента. В этом разделе справочной документации описывается всё, что связано с настройкой контента, внешнего вида и ощущения портала — от стилизации контента страницы до индивидуальной настройки страницы 404 или доменного имени.

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

Давайте сначала рассмотрим, как выглядят интерфейсы и Автора и Читателя и какие детали можно стилизовать или брендировать.

Интерфейс автора Аннотированный интерфейс автора с отображением области контента

Интерфейс читателя
Аннотированный интерфейс читателя с отображением области контента

Стилизация

Когда речь заходит о стилизации в системе Документерра, подразумевается формирование внешнего вида и ощущения вашего контента — того, что вы создаете как автор. Стиль влияет на составные элементы документации — заголовки, таблицы, изображения, списки и т. д. — и помогает сделать их последовательными, придерживаясь руководства по стилю.

Так как контент страниц в Документерре на внутреннем уровне представлен в виде HTML, вся стилизация осуществляется через CSS-файл. Стилизацию можно выполнить двумя способами:

  • Визуально, в режиме дизайна в Редакторе страниц, выбирая различные параметры, такие как размер шрифта или цвет текста в верхней панели. Эти действия позволят создать встроенные стили и применить их только к определённому элементу, а не ко всем подобным элементам во всей документации.
    Например, применение шрифта большего размера и изменение цвета определенного заголовка второго уровня в верхней панели изменит стиль только одного выбранного заголовка. При этом другие заголовки второго уровня на этой странице или других страницах вашего проекта останутся без изменений.
  • Это возможно с помощью написания правил в отдельном файле CSS, который прилагается к проекту. Файл Style. css по умолчанию можно найти в основных настройках проекта.

Использование CSS-файлов — это предпочтительный способ стилизации контента, с помощью которого можно настраивать стили централизованно. Таким образом можно сэкономить много времени и сил по сравнению с установкой/настройкой стилей вручную для каждого элемента.

При создании или импорте проекта система создает CSS-файл по умолчанию — Style.css. При создании проекта контент Style.css по умолчанию зависит от выбранного шаблона проекта — он заполняется заранее установленными CSS-правилами для таблиц, экспресс-блоков, элементов навигации и т.д.

По умолчанию каждый проект имеет собственный файл Style.css. Хотя использование общего файла Style.css также возможно.

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

Брендинг

В отличие от стиля, брендинг не имеет ничего общего с тем, как выглядит ваш контент, однако он влияет на то, что видят ваши читатели, помимо контента, а именно, элементы Интерфейса читателя (UI), такие как строка поиска, логотип и цвета вашей компании, общие верхний и нижний колонтитулы, раскладку Интерфейса читателя и т.д.

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

Поскольку настройки проектов могут отличаться от настроек портала, включая настройки Интерфейса читателя, каждый проект может иметь свой уникальный Шаблон интерфейса читателя.

Кроме того, для настройки внешнего вида и поведения элементов интерфейса читателя можно использовать файлы Branding.css и Branding.js. Данные стили и скрипты будут определять внешний вид и поведение элементов интерфейса, но не контента.

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

Домашняя страница — единственная страница, стиль которой отличается. Она имеет собственные стили, которые вы можете настроить в редакторе стилей Домашней страницы на странице настроек Домашней страницы на портале.

Читайте далее, чтобы более подробно узнать о настройке внешнего вида портала и стилизации контента: