Настройка пользовательского интерфейса в 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>

Copy-icon

Для примера рассмотрим виджет боковой панели в 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>

Copy-icon

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

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

Изображение статьи

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

Изображение статьи

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

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

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

Copy-icon

где РАЗРЕШЕННАЯ РОЛЬ - это роль, которой разрешен доступ к виджету. Список ролей по умолчанию в 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>

Copy-icon

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

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

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

Copy-icon

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

Виджет 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>

Copy-icon

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

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

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

Ниже расположен пример "коробочной" конфигурации таргетинга контента для проекта, созданного на основе шаблона "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>
            ...

Copy-icon

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

Конфигурация 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>

Copy-icon

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

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

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

<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>

Copy-icon

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

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

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

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

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

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

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

Ниже находится конфигурационный файл навигационного меню по умолчанию. Чтобы получить доступ к файлу, используйте редактор и перейдите по пути 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>

Copy-icon

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

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

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

Copy-icon