pixeldev / sulu-block-bundle

一个用于Sulu内容管理平台的Symfony扩展包，包含模板块

维护者

详情

github.com/Pixel-Developpement/sulu-block-bundle

源码

问题

安装: 318

依赖: 1

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 1

开放问题: 0

语言:Twig

2.5.6 2022-12-11 09:07 UTC

Requires

MIT ea7a80d94ec9e0ea2c5493a4e2b7050ef57918af

This package is not auto-updated.

Last update: 2024-09-15 17:29:09 UTC

README

这是一个用于管理SULU CMS内容的块扩展包。

这是基于https://github.com/Harborn-digital/sulu-block-bundle的项目。

1. 安装

Composer

composer require pixeldev/sulu-block-bundle

2. 使用

模板

修改页面模板（请记得包含此元素 xmlns:xi="http://www.w3.org/2001/XInclude"）

<!-- app/Resources/templates/pages/default.xml -->
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:xi="http://www.w3.org/2001/XInclude"
          xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

    <key>default</key>

    <view>templates/default</view>
    <controller>SuluWebsiteBundle:Default:index</controller>
    <cacheLifetime>2400</cacheLifetime>

    <meta>
        <title lang="en">Default</title>
        <title lang="nl">Standaard</title>
    </meta>

    <properties>
        <!--
        <section name="highlight">
            <properties>
                <property name="title" type="text_line" mandatory="true">
                    <meta>
                        <title lang="en">Title</title>
                        <title lang="nl">Titel</title>
                    </meta>
                    <params>
                        <param name="headline" value="true"/>
                    </params>

                    <tag name="sulu.rlp.part"/>
                </property>

                <property name="url" type="resource_locator" mandatory="true">
                    <meta>
                        <title lang="en">Resourcelocator</title>
                        <title lang="nl">Adres</title>
                    </meta>

                    <tag name="sulu.rlp"/>
                </property>
            </properties>
        </section>

        <property name="article" type="text_editor">
            <meta>
                <title lang="en">Article</title>
                <title lang="de">Artikel</title>
            </meta>
        </property>-->

        <!-- Choose the same name as using in twig (see next paragraph) -->
        <block name="blocks" default-type="text" minOccurs="0">
            <meta>
                <title lang="en">Content</title>
                <title lang="nl">Inhoud</title>
            </meta>
            <types>
                <xi:include href="sulu-block-bundle://blocks/text.xml"/>
                <xi:include href="sulu-block-bundle://blocks/youtube.xml"/>
            </types>
        </block>

        <!-- Choose the same name as using in twig (see next paragraph) -->
        <block name="banners" default-type="text" minOccurs="0">
            <meta>
                <title lang="en">Banners</title>
            </meta>
            <types>
                <xi:include href="sulu-block-bundle://blocks/text.xml"/>
                <xi:include href="sulu-block-bundle://blocks/youtube.xml"/>
            </types>
        </block>
    </properties>
</template>

Twig

在Twig级别添加块

{% block content %}
    <div vocab='http://schema.org/' typeof='Content'>
        <h1 property='title'>{{ content.title }}</h1>

        <div property='article'>
            {{ content.article|raw }}
        </div>

        {% include '@Block/html5-blocks.html.twig' %}
        {% include '@Block/html5-blocks.html.twig' with {element: 'aside', collection: 'banners'} %}
    </div>
{% endblock %}

覆盖Twig模板

为了通过Twig覆盖块，请创建以下结构 templates/bundles/PixelBlockBundle。如果您想覆盖 Resources/views/html5/parts/images.html.twig，您必须创建以下文件 templates/bundles/PixelBlockBundle/html5/parts/images.html.twig。

如果您只想替换此扩展包中的某些模板的块，您可以使用 @!Block 命名空间扩展基本模板。

例如

{# templates/bundles/PixelBlockBundle/html5/parts/images.html.twig #}
{% extends "@!Block/html5/parts/images.html.twig" %}

{% block image_source %}{{ image.thumbnails['50x50'] }}{% endblock %}

3. 可用块

  • 带标题的富文本（text）
  • 带标题的图片（images）
  • 带标题和富文本的图片（image_text）
  • 图片、标题、副标题和引用（image_title_subtitle_quote）
  • YouTube 视频（youtube）
  • 链接（link）
  • 引用（quote）
  • 前后对比（image_before_after）
  • 两列（two_columns）
  • 三列（three_columns）

4. 添加属性

当您使用块并想添加额外的属性时，您可以在 config/templates/PixelSuluBlockBundle/properties/{blockname}.xml 中单独配置它们。

例如，如果您想给图片块添加图注。您应在您的客户端应用程序中创建以下文件

<!-- config/templates/PixelSuluBlockBundle/properties/images.xml -->
<?xml version='1.0' ?>
<properties xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <property name='caption' type='text_line'>
        <meta>
            <title lang='en'>Caption</title>
        </meta>
    </property>
</properties>

5. 覆盖属性参数

5.1 完全替换所有参数

当您使用块并想自己选择所有属性参数时，您可以在 config/templates/PixelSuluBlockBundle/params/{blockname}.xml 中单独配置它们。例如，如果您想定义文本编辑器的所有属性参数。您应在您的客户端应用程序中创建以下文件

<!-- config/templates/PixelSuluBlockBundle/params/text_editor.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="link" value="true"/>
    <param name="paste_from_word" value="true"/>
    <param name="height" value="100"/>
    <param name="max_height" value="200"/>
</params>

5.2 调整参数

当您使用块并想修改块属性参数时，您可以在 config/templates/PixelSuluBlockBundle/params/{blockname}_adjustments.xml 中单独配置它们。例如，如果您想调整文本编辑器属性的高度并禁用表格功能。您应在您的客户端应用程序中创建以下文件

5.3 添加参数

<!-- config/templates/PixelSuluBlockBundle/params/text_editor_adjustments.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="height" value="200"/>
    <param name="table" value="false"/>
</params>

当您使用块并想向块属性添加参数时，您可以在 config/templates/PixelSuluBlockBundle/params/{blockname}_additions.xml 中单独配置它们。例如，如果您想向文本编辑器属性添加 ui_color 参数。您应在您的客户端应用程序中创建以下文件

5.4 添加参数

例如，如果您想向文本编辑器属性添加 ui_color 参数。您应在您的客户端应用程序中创建以下文件

<!-- config/templates/PixelSuluBlockBundle/params/text_editor_additions.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="ui_color" value="#ffcc00"/>
</params>