Настройка пользовательского интерфейса в DC CMS

В этой статье вы узнаете об алгоритме настройки отображения различных элементов пользовательского интерфейса DC CMS.

Общая информация

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

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

Ниже представлен снимок экрана CMS Studio, на котором красной рамкой выделены виджеты, настраиваемые в файле конфигурации пользовательского интерфейса.

Вот аннотированная версия некоторых виджетов, показанных на рисунке выше:


      <siteUI>
  <widget id="cms.components.ToolsPanel">...</widget>     Sidebar widget
  <widget id="cms.components.ICEToolsPanel">...</widget>  Experience Builder widget
  <widget id="cms.components.Launcher">...</widget>       Navigation Menu widget
  <widget id="cms.components.PreviewToolbar">...</widget> Toolbar widget
  <widget id="cms.components.Dashboard">...</widget>      Dashboard widget
  <widget id="cms.components.TinyMCE">...</widget>        TinyMCE widget
  <references>
     <reference id="cms.siteTools">...</reference>
     <reference id="cms.freemarkerCodeSnippets">...</reference>
     <reference id="cms.groovyCodeSnippets">...</reference>
  </references>
</siteUI>

Для примера рассмотрим виджет боковой панели в CMS Studio. Боковая панель находится в левой части экрана и включает в себя дашборд, различные навигаторы пути, а также деревья навигаторов пути, такие как “Страницы”, “Компоненты”, “Инструменты сайта” и т.д., которые являются виджетами сами по себе. Конфигурация виджета боковой панели выглядит следующим образом:


      <widget id="cms.components.ToolsPanel">
  <configuration>
    <widgets>
      <widget id="cms.components.ToolsPanelEmbeddedAppViewButton">
        <configuration>
          <title id="words.dashboard" defaultMessage="Dashboard"/>
          <icon id="@mui/icons-material/DashboardRounded"/>
          <widget id="cms.components.SiteDashboard"/>
        </configuration>
      </widget>
      <widget id="cms.components.PathNavigator">
        <configuration>
          <id>Pages</id>
          <label>Pages</label>
          <icon id="@mui/icons-material/DescriptionOutlined"/>
          <rootPath>/site/website</rootPath>
          <locale>en</locale>
        </configuration>
      </widget>
      <widget id="cms.components.PathNavigator">
        <configuration>
          <id>Components</id>
          <label>Components</label>
          <icon id="cms.icons.Component"/>
          <rootPath>/site/components</rootPath>
          <locale>en</locale>
        </configuration>
      </widget>
      <widget id="cms.components.PathNavigator">
        <configuration>
          <id>Taxonomy</id>
          <label>Taxonomy</label>
          <icon id="@mui/icons-material/LocalOfferOutlined"/>
          <rootPath>/site/taxonomy</rootPath>
          <locale>en</locale>
        </configuration>
      </widget>
      ...
      <widget id="cms.components.ToolsPanelEmbeddedAppViewButton">
        <permittedRoles>
          <role>admin</role>
          <role>developer</role>
        </permittedRoles>
        <configuration>
          <title id="siteTools.title" defaultMessage="Site Tools"/>
          <icon id="@mui/icons-material/ConstructionRounded"/>
          <widget id="cms.components.EmbeddedSiteTools"/>
        </configuration>
      </widget>
    </widgets>
  </configuration>
</widget>

Чтобы изменить файл конфигурации пользовательского интерфейса:

1. В рамках вашего проекта в боковой панели нажмите на Инструменты сайта.

2. Далее перейдите в Конфигурация > Конфигурация пользовательского интерфейса.

Разрешения для виджетов

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


      <permittedRoles>
  <role>РАЗРЕШЕННАЯ_РОЛЬ</role>
  ...
</permittedRoles>

где РАЗРЕШЕННАЯ РОЛЬ - это роль, которой разрешен доступ к виджету. Список ролей по умолчанию в CMS Studio можно найти в статье “Роли и разрешения”.

Ниже расположен пример конфигурации, где доступ к виджету “Инструменты сайта” доступен только пользователям с ролями "admin" и "developer":


      <widget id="cms.components.ToolsPanelPageButton">
  <permittedRoles>
    <role>admin</role>
    <role>developer</role>
  </permittedRoles>
  <configuration>
    <title id="siteTools.title" defaultMessage="Site Tools"/>
    <icon id="@mui/icons-material/TuneRounded"/>
    <widgets>
      <widget id="cms.components.SiteToolsPanel"/>
    </widgets>
  </configuration>
</widget>

Исключение элементов из боковой панели

Чтобы скрыть (исключить) элементы из боковой панели, такие как NavigatorTree и PathNavigatorTree, используйте код:


      <excludes>
  <exclude ПАТТЕРН_ДЛЯ_ИСКЛЮЧЕНИЯ/>
  ...
</excludes>

где ПАТТЕРН_ДЛЯ_ИСКЛЮЧЕНИЯ - это префикс элементов, которые нужно скрыть из боковой панели.

Оформление виджетов навигации

Различные варианты стилизации доступны для виджетов навигации. Как элемент контейнера виджета, так и элемент иконки могут получать классы CSS и целевые базовые стили, стили для свернутого или развернутого варианта отображения. Пользовательские таблицы стилей CSS могут быть загружены в CMS Studio через плагины.

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

Например, для виджета “Шаблоны” можно установить красный цвет текста при раскрытии и синий при сворачивании.

Вот, например, конфигурация для установки красной рамки при развертывании виджета "Таксономия", а для виджета "Шаблоны" - красного цвета шрифта при развертывании и синего цвета шрифта при сворачивании:


      <widget id="cms.components.PathNavigator">
  <configuration>
    <id>Taxonomy</id>
    <label>Taxonomy</label>
    <icon id="@mui/icons-material/LocalOfferOutlined"/>
    <container>
      <expandedStyle>
        <border>solid</border>
        <borderColor>red</borderColor>
      </expandedStyle>
    </container>
    <rootPath>/site/taxonomy</rootPath>
    <locale>en</locale>
  </configuration>
</widget>
<widget id="cms.components.PathNavigatorTree">
  <configuration>
    <label>Templates</label>
    <icon id="@mui/icons-material/InsertDriveFileOutlined">
      <expandedStyle>
        <color>red</color>
      </expandedStyle>
      <collapsedStyle>
        <color>blue</color>
      </collapsedStyle>
    </icon>
    <rootPath>/templates</rootPath>
    <locale>en</locale>
  </configuration>
</widget>
...

Помните, что дочерние элементы expandedStyle и collapsedStyle должны использовать стандартные CSS-свойства в формате camelCase.

Варианты оформления контейнеров

baseClass: имя класса (string), которое всегда применяется к контейнеру, независимо от его состояния
expandedClass: имя класса (string), которое применяется к контейнеру в раскрытом состоянии
collapsedClass: имя класса (string), которое применяется к контейнеру в свернутом состоянии.
baseStyle: правила CSS, применяемые к контейнеру независимо от его состояния. Например, <baseStyles><backgroundColor>red</backgroundColor></baseStyles> может указывать красный цвет фона для контейнера.
expandedStyle: правила CSS, применяемые к контейнеру в раскрытом состоянии
collapsedStyle: правила CSS, применяемые к контейнеру в свернутом состоянии

Варианты оформления иконок

class: имя класса (string), которое всегда применяется к иконке, независимо от ее состояния
style: CSS-правила, которые применяются к иконке независимо от её состояния. Например, <baseStyles><backgroundColor>red</backgroundColor></baseStyles>.
content: внутренний контент иконки, который будет использоваться, если вы используете библиотеку иконок, которая использует контент для отображения значка
expandedStyle: CSS-правила, применяемые к иконке в раскрытом состоянии
collapsedStyle: CSS-правила, применяемые к иконке в свернутом состоянии

Папка для исходных данных SPA в боковой панели

Пользователи могут захотеть управлять (редактировать/просматривать) исходными файлами SPA в своих проектах через CMS Studio. Для просмотра/редактирования исходных файлов для SPA приложений достаточно добавить другой виджет PathNavigatorTree или PathNavigator с именем sources в виджет боковой панели, как показано ниже:


      <siteUI>
  <widget id="cms.components.ToolsPanel">
    <configuration>
      <widgets>
        ...
        <widget id="cms.components.PathNavigatorTree">
          <configuration>
            <id>Sources</id>
            <label>Sources</label>
            <icon id="@mui/icons-material/InsertDriveFileOutlined"/>
            <rootPath>/sources/</rootPath>
            <locale>en</locale>
          </configuration>
        </widget>
        ...

Добавление исходных файлов SPA в папки более высокого уровня, отличные от /sources, не поддерживается. Также обратите внимание, что элементы в разделе /sources исключаются из поиска.

Виджет PathNavigatorTree

PathNavigatorTree — это удобный виджет для отображения иерархических структур. Он позволяет раскрывать и сворачивать контейнеры, предоставляя пользователям эффективный способ просмотра элементов на определённом уровне.

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

Установка лимита

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


      <widget id="cms.components.PathNavigatorTree">
  <configuration>
    <id>StaticAssets</id>
    <label>Static Assets</label>
    <icon id="@mui/icons-material/ImageOutlined"/>
    <rootPath>/static-assets</rootPath>
    <locale>en</locale>
    <limit>МАКСИМАЛЬНОЕ_КОЛИЧЕСТВО_ДОЧЕРНИХ_ЭЛЕМЕНТОВ</limit>
  </configuration>
</widget>

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

Сортировка

Порядок отображения дочерних элементов может быть отсортирован с помощью свойств sortStrategy и order, как показано ниже:


      <widget id="cms.components.PathNavigatorTree">
  <configuration>
    <id>Pages</id>
    <label>Pages</label>
    <icon id="@mui/icons-material/DescriptionOutlined"/>
    <rootPath>/site/website/index.xml</rootPath>
    <locale>en</locale>
    <sortStrategy>lastUpdate</sortStrategy>
    <order>DESC</order>
  </configuration>
</widget>

Ниже приведены доступные варианты для свойства sortStrategy:

alphabetical: упорядочивает элементы в алфавитном порядке
foldersFirst: упорядочивает элементы в алфавитном порядке (папки отображаются в начале списка)
lastUpdate: упорядочивает элементы на основе даты последнего изменения

А для свойства order:

ASC: отображает элементы в порядке возрастания
DESC: отображает элементы в порядке убывания

В конфигурации из примера выше дочерние элементы в папке Pages будут отсортированы на основе даты последнего изменения в порядке убывания.

Таргетинг контента

При помощи таргетинга авторы контента могут посмотреть, как тот или иной контент будет отображаться пользователям, которые принадлежат к разным сегментам.

Ниже расположен пример "коробочной" конфигурации таргетинга контента для проекта, созданного на основе шаблона "Web Blog":


      <widget id="cms.components.ICEToolsPanel">
  <configuration>
    <widgets>
      <widget id="cms.components.ToolsPanelPageButton">
      ...
      <widget id="cms.components.ToolsPanelPageButton">
        <configuration>
          <target id="icePanel"/>
          <title id="previewAudiencesPanel.title" defaultMessage="Audience Targeting"/>
          <icon id="@mui/icons-material/EmojiPeopleRounded"/>
          <widgets>
            <widget id="cms.components.PreviewAudiencesPanel">
              <configuration>
                <fields>
                  <segment>
                    <id>segment</id>
                    <name>Segment</name>
                    <description>User segment.</description>
                    <type>dropdown</type>
                    <defaultValue>anonymous</defaultValue>
                    <values>
                      <value>
                        <label>Guy</label>
                        <value>guy</value>
                      </value>
                      <value>
                        <label>Gal</label>
                        <value>gal</value>
                      </value>
                      <value>
                        <label>Anonymous</label>
                        <value>anonymous</value>
                      </value>
                    </values>
                    <helpText>Setting the segment will change content targeting to the audience selected.</helpText>
                  </segment>
                  <name>
                    <id>name</id>
                    <name>Name</name>
                    <description>User's first and last name.</description>
                    <type>input</type>
                    <helpText>Enter user's first and last name.</helpText>
                  </name>
                </fields>
              </configuration>
            </widget>
            ...

Узнать подробнее о настройке таргетинга можно здесь

Конфигурация Rich Text Editor (RTE)

В CMS Studio существуют два основных метода редактирования контента:

редактирование на основе формы
контекстное редактирование (ICE)

Редактирование на основе формы подразумевает нажатие на кнопку Опции (3 точки в верхней части страницы) либо через контекстное меню рядом с названием страницы в боковой панели. После нажатия на кнопку Опции выберите Изменить, чтобы начать редактирование на основе формы.

Контекстное же редактирование (ICE) активируется путем включения режима редактирования. Чтобы включить режим редактирования, щелкните по значку Карандаш в верхней правой части страницы. Затем вы можете щелкнуть по конкретному разделу страницы, который вы хотите отредактировать.

Для настройки RTE вам необходимо добавить или отредактировать виджет с именем cms.components.TinyMCE:


      <widget id="cms.components.TinyMCE">
  <configuration>
    <setups>
      <setup id="generic">
        <!-- Configuration options: https://www.tiny.cloud/docs/configure/ -->
        <!-- Plugins: https://www.tiny.cloud/docs/plugins/opensource/ -->
        <tinymceOptions>{
          "menubar": true,
          "theme": "silver",
          "plugins": "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount textpattern help acecode paste editform",
          "extended_valid_elements": "",
          "valid_children": "",
          "toolbar1": "formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | editform",
          "code_editor_wrap": false,
          "toolbar_sticky": true,
          "image_advtab": true,
          "encoding": "xml",
          "relative_urls": false,
          "remove_script_host": false,
          "convert_urls": false,
          "remove_trailing_brs": false,
          "media_live_embeds": true,
          "autoresize_on_init": false,
          "autoresize_bottom_margin": 0,
          "menu": { "tools": { "title": "Tools", "items": "tinymcespellchecker code acecode wordcount" } },
          "automatic_uploads": true,
          "file_picker_types": "image media file",
          "paste_data_images": true,
          "templates": [],
          "content_css": [],
          "content_style": "body {}",
          "contextmenu": false }
        </tinymceOptions>
      </setup>
    </setups>
  </configuration>
</widget>

RTE, используемый в CMS Studio, основан на TinyMCE (https://www.tiny.cloud/) и может использовать все конфигурации и плагины, разработанные для редактора TinyMCE.

Подробнее о настройке RTE-редактора можно унать здесь.

Конфигурация инструментов сайта

Раздел “Инструменты сайта” определяет, какие модули доступны для использования администратором при нажатии на них в боковой панели.


      <references>
             <reference id="cms.siteTools">
                     <tools>
                             <tool>
                                     <title id="dropTargetsMessages.contentTypes" defaultMessage="Content Types"/>
                                     <icon id="@mui/icons-material/WidgetsOutlined"/>
                                     <url>content-types</url>
                                     <widget id="cms.components.ContentTypeManagement"/>
                             </tool>
                             <tool>
                                     <title id="GlobalMenu.EncryptionToolEntryLabel"
                                            defaultMessage="Encryption Tool"/>
                                     <icon id="@mui/icons-material/LockOutlined"/>
                                     <url>encrypt-tool</url>
                                     <widget id="cms.components.SiteEncryptTool"/>
                             </tool>
                             <tool>
                                     <title id="words.configuration" defaultMessage="Configuration"/>
                                     <icon id="@mui/icons-material/SettingsApplicationsOutlined"/>
                                     <url>configuration</url>
                                     <widget id="cms.components.SiteConfigurationManagement"/>
                             </tool>

Список доступных инструментов

Вот список инструментов, доступных в рамках шаблона Web Blog:

Инструмент	Описание
Типы контента	Позволяет создавать/редактировать типы контента, которые используются в рамках проекта
Шифрование	Позволяет шифровать конфиденциальные данные, такие как ключи доступа и пароли
Конфигурация	Содержит все конфигурационные файлы, управляемые через CMS Studio
Аудит	Позволяет просматривать журнал действий в рамках вашего проекта
Журнал изменений	Содержит список всех файлов в рамках проекта с соответствующим им состоянием
Журнал логирования	Позволяет отслеживать логи в зависимости от того, какие уровни ведения логов установлены
Публикация	Позволяет просматривать статус публикации, выполнять массовую публикацию или публиковать контент, используя Commit ID
GIT	Позволяет выполнять операции Git
GraphQL	Позволяет запускать запросы GraphQL и изучать документацию по схеме для проекта без использования какого-либо другого инструмента
Плагины	Позволяет устанавливать и просматривать установленные в данный момент плагины проекта

Подробнее обо всех возможностях раздела "Инструменты сайта" можно узнать здесь.

Настройка навигационного меню

Конфигурационный файл навигационного меню определяет модули, доступные для административных целей при переходе в меню навигации в верхней части экрана.

Подробнее о навигационном меню и его разделах можно узнать здесь.

Ниже находится конфигурационный файл навигационного меню по умолчанию. Чтобы получить доступ к файлу, используйте редактор и перейдите по пути CMS_HOME/data/repos/global/configuration/. Откройте файл с именем global-menu-config.xml. После внесения изменений не забудьте перезапустить DC CMS, чтобы изменения вступили в силу.


      <globalMenu>
    <items>
        <item>
            <id>home.globalMenu.sites</id>
            <label lang="en">Sites</label>
            <icon>fa-sitemap</icon>
            <permission>*</permission>
        </item>
        <item>
            <id>home.globalMenu.users</id>
            <label lang="en">Users</label>
            <icon>fa-user</icon>
            <permission>create_users</permission>
        </item>
        <item>
            <id>home.globalMenu.groups</id>
            <label lang="en">Groups</label>
            <icon>fa-users</icon>
            <permission>create_groups</permission>
        </item>
        <item>
            <id>home.globalMenu.audit</id>
            <label lang="en">Audit</label>
            <icon>fa-bars</icon>
            <permission>audit_log</permission>
        </item>
        <item>
            <id>home.globalMenu.logging-levels</id>
            <label lang="en">Logging Levels</label>
            <icon>fa-level-down</icon>
            <permission>read_logs</permission>
        </item>
        <item>
            <id>home.globalMenu.log-console</id>
            <label lang="en">Log Console</label>
            <icon>fa-align-left</icon>
            <permission>read_logs</permission>
        </item>
        <item>
            <id>home.globalMenu.globalConfig</id>
            <label lang="en">Global Config</label>
            <icon>fa-globe</icon>
            <permission>write_global_configuration</permission>
        </item>
        <item>
            <id>home.globalMenu.encryptionTool</id>
            <label lang="en">Encryption Tool</label>
            <icon>fa-lock</icon>
            <permission>encryption_tool</permission>
        </item>
        <item>
            <id>home.globalMenu.tokenManagement</id>
            <label lang="en">Token Management</label>
            <icon>fa-key</icon>
            <permission>manage_access_token</permission>
        </item>
    </items>
</globalMenu>

Настройка режима редактирования предварительного просмотра

Чтобы настроить параметры по умолчанию для режима редактирования предварительного просмотра, установите следующие атрибуты для виджета cms.components.Preiew:


      <widget
        id="cms.components.Preview"
        initialEditModeOn="true"
        initialHighlightMode="all"
        xbDetectionTimeoutMs="5000"
/>

Связанные статьи

Роли и разрешения в DC CMS

Документация для разработчика