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

Стилизация Дерева страниц

Дерево страниц — это древовидная структура, которую читатели видят слева от контента страницы. Это механизм навигации для читателей.

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

Иконки элементов Дерева страниц в свойствах страницы

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

Перейдите в Свойства страницы. Просто наведите курсор мыши на элемент и щелкните на элементе, отмеченном на скриншоте. Затем нажмите Свойства...
В разделе Общее в Свойствах найдите настройки Иконок элементов Дерева страниц.
Щелкните на втором элементе рядом с иконкой, которую нужно изменить, чтобы загрузить в Хранилище собственное изображение иконки с ПК или выбрать существующее.
В появившемся диалоговом окне нажмите Найти..., найдите на своем ПК нужную иконку, нажмите OK, а затем Загрузить или просто перетащите файл. Изображение появится в Хранилище.
Выберите ее в диалоговом окне и нажмите OK. Теперь новую иконку можно увидеть в разделе Иконки элементов Дерева страниц.
Сохраните изменения (нажмите кнопку Сохранить изменения внизу страницы) и обратите внимание, что в вашем Дереве страниц изменилась иконка по умолчанию.
Чтобы использовать иконки по умолчанию, щелкните на элементе Удалить пользовательскую иконку и сохраните изменения. Иконки по умолчанию будут восстановлены.

Иконки элементов Дерева страниц в CSS-файл брендинга документации

Как видно на скриншоте выше, мы изменили иконку только для одной страницы, остальные иконки остались по умолчанию.

Когда для иконок страниц установлено значение По умолчанию, их можно также переопределить в файле Branding.css: это файл стилей, который можно использовать для брендирования многих элементов на портале документации. Имя файла можно задать в настройках портала (Инструменты → Настройки портала → Брендинг → Интерфейс читателя).

Раздел «CSS-файл брендинга портала» в настройках интерфейса читателя

В предыдущем разделе страницы мы загрузили иконку в Хранилище. Загрузим еще одну иконку. Она также расположена на корневом уровне хранилища.

Иконка, расположенная на корневом уровне файлового хранилища

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

Перейдите в диспетчер файлов... в верхней части страницы и выберите там вкладку Стили.

Здесь находится файл BrandingSample.css . Щелкните Просмотр файла, чтобы открыть его в редакторе.

Кнопка просмотра файла в диспетчере файлов

Редактор откроется в новом окне. Нажмите кнопку Заблокировать и редактировать в правом верхнем углу.

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

Copy Code

CSS

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  /* background-image: URL('/resources/Storage/info.png') !important */
}

Давайте продолжим и внесем дальнейшие изменения:

Copy Code

CSS

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  background-image: URL('/resources/Storage/info.png') !important
}

Теперь необходимо ввести путь к загруженному изображению и сохранить изменения.

Copy Code

CSS

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  background-image: URL('/resources/Storage/docs.png') !important
}

Мы только что глобально изменили иконки по умолчанию страниц портала. Обратите внимание, что CSS-файл брендинга применяется только для интерфейса читателя — вошедшие в систему авторы не видят изменений интерфейса, внесенных с помощью этого файла. Таким образом, чтобы увидеть изменение иконки, нам необходимо иметь публикацию на портале, чтобы мы могли выйти из системы и открыть публикацию (или открыть ее в другом браузере).

Сделав это и проверив дерево страниц в качестве читателя, мы увидим измененные иконки страниц:

Измененные иконки страниц в Дереве страниц в пользовательском интерфейсе читателя

Подробнее о брендинге и стилизации в системе Документерра:

Верхний и нижний колонтитулы страницы Расширенный брендинг с помощью CSS