Плагин боковой панели в CMS Studio
Создание плагина
Давайте рассмотрим, как создать плагин боковой панели в CMS Studio с использованием проекта под названием “My Editorial”, созданного с использованием шаблона “Web Blog”.
1. Прежде всего, нам нужно создать структуру папок для размещения файлов JavaScript нашего плагина боковой панели. Эта структура должна соответствовать указаниям, которые вы можете найти по этой ссылке. В нашем примере CATEGORY - sidebar, а NAME - react-sample.
Для начала в локальном папке создайте файл дескриптора cms-plugin.yaml для вашего плагина. Убедитесь, что plugin.id настроен как ru.dc.cms.plugin.examplesidebar, а затем создайте следующую структуру папок:
<plugin-folder>/
cms-plugin.yaml
authoring/
static-assets/
plugins/
ru/
dc/
cms/
plugin/
examplesidebar/
sidebar/
react-sample/
Мы разместим файл JS, реализующий плагин панели инструментов, в папке react-sample. В нашем примере <plugin-folder> расположен здесь: /users/myuser/myplugins/sidebar-plugin.
2. Создайте файл index.js. В папке react-sample создайте два новых пустых файла с именами index.css и script.js, затем переместите файл index.js в эту папку.
3. Чтобы настроить наш плагин для автоматической интеграции в соответствующий конфигурационный файл в CMS Studio (в частности, в файл конфигурации пользовательского интерфейса для боковых панелей) при установке, добавьте следующую информацию в cms-plugin.yaml:
installation:
- type: preview-app
parentXpath: //widget[@id='cms.components.ToolsPanel']
elementXpath: //plugin[@id='ru.dc.cms.sampleSidebarPlugin.components.reactComponent']
element:
name: configuration
children:
- name: widgets
children:
- name: widget
attributes:
- name: id
value: ru.dc.cms.sampleSidebarPlugin.components.reactComponent
children:
- name: plugin
attributes:
- name: id
value: ru.dc.cms.plugin.examplesidebar
- name: type
value: sidebar
- name: name
value: react-sample
- name: file
value: index.js
Не забудьте использовать то же значение, что и в plugin.id (находится в верхней части файла описания) для раздела установки plugin.id, который в нашем примере называется ru.dc.cms.plugin.
4. После того как вы разместили файлы вашего плагина и настроили автоматическое связывание (auto-wiring), вы можете приступить к установке плагина для тестирования или отладки. Это можно сделать с помощью команды cms-cli copy-plugin. Для того чтобы убедиться, что команды cms-cli работают правильно, необходимо установить соединение с DC CMS с помощью команды add-environment. После установки соединения вы сможете установить плагин в проект с именем my-editorial, запустив следующее
./cms-cli copy-plugin -e local -s my-editorial --path /users/myuser/myplugins/sidebar-plugin
5. Теперь посмотрим на наш плагин в действии, нажав на логотип DC CMS в левом верхнем углу браузера, чтобы открыть боковую панель.
Вот раздел автоматического связывания в конфигурации после установки плагина:
<siteUi>
<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.Dashboard"/>
</configuration>
</widget>
<widget id="cms.components.ToolsPanelPageButton">
<configuration>
<title id="previewSiteExplorerPanel.title" defaultMessage="Site Explorer"/>
<icon id="cms.icons.SiteExplorer"/>
...
</widget>
<widget id="cms.components.ToolsPanelPageButton">
<permittedRoles>
<role>admin</role>
<role>developer</role>
</permittedRoles>
<configuration>
<title id="siteTools.title" defaultMessage="Project Tools"/>
<icon id="@mui/icons-material/TuneRounded"/>
<widgets>
<widget id="cms.components.SiteToolsPanel"/>
</widgets>
</configuration>
</widget>
<widget id="ru.dc.cms.sampleSidebarPlugin.components.reactComponent">
<plugin id="ru.dc.cms.plugin"
type="sidebar"
name="react-sample"
file="index.js"/>
</widget>
</widgets>
</configuration>
</widget>
...
