19.04.2020     731

TwigVisual - инструмент для визуального создания шаблонов с использованием шаблонизатора Twig. Все основные настройки, которые специфичны для системы управления (CMS), находятся в одном файле. Теперь не нужно изучать документацию, чтобы сделать HTML-шаблон динамичным. По сути YAML-файл это и есть документация.

Сейчас разрабатывается бандл (расширение) для фреймворка Symfony. Но исходный код не сложно адаптировать под любой другой шаблонизатор и CMS.

Пример конфигурации для создания меню:

twig_visual:
    cache_location:
        - var/cache/filecache
    templates_extension: html.twig
    ui:
        menu:
            title: Основное меню
            configuration:
                saveBackupCopy: true
            components:
                root:
                    title: Корневой элемент
                    type: elementSelect
                    required: true
                    output: "{{ categoriesTree(0, 'menu_dropdown', null, activeCategoriesIds, false) }}"
                    template: '<root/>'
                    templatePath: nav/menu_dropdown
                    caching: true
    
                itemFirst:
                    title: Пункт меню первого уровня
                    type: elementSelect
                    isChildItem: true
                    required: true
                    output: '<itemFirst/>'
                    template: |
                        {% for category in children %}
                        <itemFirst class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
                            <a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
                        </itemFirst>
                        {%  endfor %}
    
                containerSecond:
                    title: Контейнер второго уровня
                    type: elementSelect
                    output: "{{ categoriesTree(category.id, 'menu_dropdown_child', category, activeCategoriesIds, false) }}"
                    template: '<containerSecond/>'
                    templatePath: nav/menu_dropdown_child
    
                itemSecond:
                    title: Пункт меню второго уровня
                    type: elementSelect
                    isChildItem: true
                    output: '<itemSecond/>'
                    template: |
                        {% for category in children %}
                        <itemSecond class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
                            <a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
                        </itemSecond>
                        {%  endfor %}
    
                containerThird:
                    title: Контейнер третьего уровня
                    type: elementSelect
                    output: "{{ categoriesTree(category.id, 'menu_dropdown_child', category, activeCategoriesIds, false) }}"
                    template: '<containerThird/>'
                    templatePath: nav/menu_dropdown_child_child
    
                itemThird:
                    title: Пункт меню третьего уровня
                    type: elementSelect
                    isChildItem: true
                    output: '<itemThird/>'
                    template: |
                        {% for category in children %}
                        <itemThird class="{%% if category.id in activeCategoriesIds %%}{{ activeClassName }}{%% endif %%}">
                            <a href="{{ catalogPath(category.uri, '', category) }}">{{ category.title }}</a>
                        </itemThird>
                        {%  endfor %}

                activeClassName:
                    title: CSS класс активности
                    type: text
                    value: active
                    
                deleteLeftSiblings:
                    title: Удалить дочерние предыдущие
                    type: checkbox
                    
                deleteRightSiblings:
                    title: Удалить дочерние следующие
                    type: checkbox

Более подробная информация будет позже. Текущая версия - Alpha.

Видео с демонстрацией работы:



Исходный код: https://github.com/andchir/twig-visual