Плагин полноэкранного режима для CMS Studio
Создание плагина
В этой статье мы рассмотрим, как разработать плагин полноэкранного режима для страницы хоста плагинов, используя пример с Vanilla App.
Для получения дополнительной информации о хосте плагинов перейдите по этой ссылке.
В данном случае, следуя упомянутому примеру с Vanilla App, мы начнем с проекта на основе шаблона “Web Blog” с именем "Editorial".
1. Сначала нужно настроить структуру папок, где будет находиться файл JS нашего плагина. Мы будем придерживаться структуры, описанной здесь. В нашем случае, CATEGORY будет apps
, а NAME - example-vanilla
.
Начните с создания файла описания с именем cms-plugin.yaml
для вашего плагина в локальной папке и plugin.id
присвойте значение ru.dc.cms.plugin.vanilla
. Затем настройте следующую структуру папок:
<plugin-folder>/
cms-plugin.yaml
authoring/
static-assets/
plugins/
ru/
dc/
cms/
plugin/
vanilla/
apps/
example-vanilla/
Мы разместим JS-файл, реализующий плагин полноэкранного режима, в папке vanilla-plugin
. В нашем примере <plugin-folder>
расположен по пути /users/myuser/myplugins/vanilla-plugin.
Ниже расположен файл описания, который мы будем использовать:
type: site
id: ru.dc.cms.plugin.vanilla
name: Vanilla Plugin Host Example
tags:
- test
version:
major: 4
minor: 0
patch: 0
description: A simple plugin host example
website:
name: Plugin Host Vanilla Example
url: https://github.com/dccms/authoring-ui-plugin-examples/tree/master/examples/app-vanilla
media:
screenshots:
- title: DC CMS
description: DC CMS Example Plugin
url: "https://raw.githubusercontent.com/dccms/site-plugin-example/master/.dc/logo.svg"
developer:
company:
name: DC CMS
email: info@dccms.com
url: https://dccms.com
license:
name: MIT
url: https://opensource.org/licenses/MIT
dcCmsVersions:
- major: 4
minor: 0
patch: 1
dcCmsEditions:
- community
- enterprise
2. Скопируем JS-файл index.js
, который можно найти здесь.
3. После того как вы разместили файл вашего плагина, вы можете приступить к установке плагина для тестирования или отладки. Это можно сделать с помощью команды cms-cli
copy-plugin
. Для того чтобы убедиться, что команды cms-cli
работают правильно, необходимо установить соединение с DC CMS с помощью команды add-environment
. После установки соединения вы сможете установить плагин в проект с именем editorial
, запустив следующее:
./cms-cli copy-plugin -e local -s editorial --path /users/myuser/myplugins/vanilla-plugin
4. Чтобы посомтреть на наш плагин в действии, введите в браузере следующее: http://localhost:8080/studio/plugin?site=editorial&type=apps&name=example-vanilla&pluginId=ru.dc.cms.plugin.vanilla
Vanilla App
Этот пример демонстрирует базовое приложение, которое запускается на странице хоста плагинов.
Данный пример предполагает, что ваш проект назван "Editorial". Если ваш проект имеет другое имя, откорректируйте путь и URL соответствующим образом.
Вы можете установить плагин из локальных источников с помощью DC CMS CLI или используя API /studio/api/2/marketplace/copy в инструментах типа Postman. В обоих методах используйте следующее тело JSON:
{
"siteId": "ВАШ_ИДЕНТИФИКАТОР_САЙТА",
"path": "/Users/your/path/to/this/repo"
}
Чтобы просмотреть приложение после развертывания на DC CMS, перейдите по адресу: http://localhost:8080/studio/plugin?site=editorial&pluginId=ru.dc.cms&type=examples&name=vanilla. Замените PLUGIN_ID
на идентификатор плагина, указанный в файле описания вашего плагина.