Sonata Page 5: Ẩn các khối bên trong khối chia sẻ.

samedi 30 septembre 2023

Nếu bạn đang sử dụng gói SonataPage, có thể bạn đã nhận thấy rằng một số khối được cung cấp là không cần thiết hoặc không hoạt động.

Chúng ta sẽ thảo luận về cách ẩn những khối này khỏi danh sách một cách gọn gàng, với một tệp cấu hình, và bằng cách ghi đè các mẫu quản trị của SonataPage.

1 – Cấu Hình

Chúng ta cần tạo một danh sách các dịch vụ mà chúng ta không muốn hiển thị. Danh sách này sẽ tự nhiên đi vào các tham số của tệp dịch vụ của chúng ta:

#config/services.yaml
parameters:

    sonata_page_excluded_blocks:
        - 'sonata.media.block.gallery_list'
        - 'sonata.media.block.feature_media'
        - 'sonata.media.block.gallery'

Để tìm ra tên của dịch vụ cần loại trừ, rất đơn giản, nó nằm trong URL khi bạn nhấp vào nó trong chế độ xem tạo khối chia sẻ.

2 – Hàm Twig để Truy xuất Tham số Của Chúng Ta

Để ẩn các khối, chúng ta sẽ ghi đè các mẫu của SonataPage. Vì vậy, chúng ta cần truy xuất cấu hình trực tiếp trong mẫu của chúng ta. Do đó, chúng ta sẽ tạo một phần mở rộng Twig cho dự án của mình. Điều này khá phổ biến, có lẽ bạn đã có một cái.

#src/Twig/Extension/AppExtension.php
<?php
namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class AppExtension extends AbstractExtension
{
    private $sonata_page_excluded_blocks;

    public function __construct(array $sonata_page_excluded_blocks)
    {
        $this->sonata_page_excluded_blocks = $sonata_page_excluded_blocks;
    }

    public function getFunctions(): array
    {
        return [
            new TwigFunction('sonata_page_excluded_blocks', [$this, 'getSonataPageExcludedBlocks']),
        ];
    }

    public function getSonataPageExcludedBlocks(): array
    {
        return $this->sonata_page_excluded_blocks;
    }
}

Sau đó chúng ta cần tham chiếu nó trong các dịch vụ.

services:
    App\Twig\AppExtension:
        arguments:
            $sonata_page_excluded_blocks: '%sonata_page_excluded_blocks%'

3 – Ghi Đè Mẫu

Như bạn biết, tất cả các mẫu đều có thể được ghi đè. Chỉ cần xác định mẫu trong gói của bạn. Nói chung, bạn chỉ cần kiểm tra danh sách các mẫu Twig trong trình phân tích. Thường thì nó là cái đầu tiên.

Chúng ta thấy rằng mẫu của chúng ta được lưu trữ trong:
vendor/sonata-project/page-bundle/src/Resources/views/BlockAdmin/select_type.html.twig

Để ghi đè nó, chỉ cần đặt nó trong thư mục mẫu của chúng ta với đường dẫn:
templates/bundles/NomDuBundle/FolderAfterViews/…/YourFile.html.twig

Điều này cho chúng ta:
templates/bundles/SonataPageBundle/BlockAdmin/select_type.html.twig

Một khi tệp được sao chép, nếu chúng ta tải lại trang, chúng ta sẽ tìm thấy tệp đúng trong danh sách các mẫu trên tab Twig của trình phân tích.

4 – Ghi Đè Danh Sách Khối Trong Mẫu Của Chúng Ta

Chúng ta chỉ cần truy xuất danh sách các khối được cấu hình của chúng ta từ các tham số và tạo lại biến được sử dụng để tạo mảng, không có các khối cần loại trừ.

        {% set excluded_blocks = sonata_page_excluded_blocks() %}
        {% set filteredBlockServices = [] %}
        {% for key, service in blockServices %}
            {% if key not in excluded_blocks %}
                {% set filteredBlockServices = filteredBlockServices|merge({(key): service}) %}
            {% endif %}
        {% endfor %}
        {% set blockServices = filteredBlockServices %}

Điều này cho chúng ta:

{#
templates/bundles/_SonataPageBundle/BlockAdmin/select_type.html.twig

#}

{% extends '@SonataAdmin/CRUD/action.html.twig' %}

{% block title %}{{ 'title_select_block_type'|trans({}, 'SonataPageBundle') }}{% endblock %}

{% block content %}
    <div class="box box-success">
        <div class="box-header">
            <h3 class="box-title">
                {{ 'title_select_block_type'|trans({}, 'SonataPageBundle') }}
            </h3>
        </div>

        {# surcharge pour exclude des blocs #}
        {% set excluded_blocks = sonata_page_excluded_blocks() %}
        {% set filteredBlockServices = [] %}
        {% for key, service in blockServices %}
            {% if key not in excluded_blocks %}
                {% set filteredBlockServices = filteredBlockServices|merge({(key): service}) %}
            {% endif %}
        {% endfor %}
        {% set blockServices = filteredBlockServices %}
        {# fin de surcharge pour exclude des blocs #}


        <div class="box-body">
            {% for code, blockService in blockServices %}
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                    <a  href="{{ admin.generateUrl('create', {'type': code}) }}"
                        class="btn btn-app btn-block sonata-block-type"
                        data-toggle="tooltip"
                        data-placement="top"
                        {% if blockService.metadata.description %}
                            title="{{ blockService.metadata.description|trans({}, blockService.metadata.domain|default('SonataBlockBundle')) }}"
                        {% endif %}
                            >
                        {% if not blockService.metadata.image %}
                            <i class="{{ blockService.metadata.option('class') }}" ></i>
                        {% else %}
                            <img src="{{ asset(blockService.metadata.image) }}" style="max-height: 20px; max-width: 100px;"/>
                            <br />
                        {% endif %}
                        <span>{{ blockService.metadata.title|trans({}, blockService.metadata.domain|default('SonataBlockBundle')) }}</span>
                    </a>
                </div>
            {% else %}
                <span class="alert alert-info">{{ 'no_type_available'|trans({}, 'SonataPageBundle') }}</span>
            {% endfor %}

            <div class="clearfix"></div>
        </div>
    </div>
{% endblock %}

Và nếu chúng ta tải lại trang, chúng ta sẽ có danh sách, đã được làm sạch khỏi các khối của chúng ta.

Thay vì

6 – Ghi Đè Danh Sách Khối Trong Trình Soạn Trang

Đối với trình soạn trang, đó chính xác là cùng một thao tác. Tệp cần ghi đè là:
vendor/sonata-project/page-bundle/src/Resources/views/PageAdmin/compose_container_show.html.twig

Điều này cho chúng ta:
/templates/bundles/SonataPageBundle/PageAdmin/compose_container_show.html.twig

Chúng ta đặt chính xác cùng một mã, cho chúng ta một tệp hoàn chỉnh theo sau:

{#
/templates/bundles/SonataPageBundle/PageAdmin/compose_container_show.html.twig
#}
<div class="page-composer__container__view block-view-{{ container.id }}"
     data-block-id="{{ container.id }}"
>
    <h2 class="page-composer__container__view__header">{{ container.name }}</h2>

    <span class="page-composer__container__view__notice">{{ 'notice'|trans({}, 'SonataPageBundle') }}</span>

    {# surcharge pour exclude des blocs #}
    {% set excluded_blocks = sonata_page_excluded_blocks() %}
    {% set filteredBlockServices = [] %}
    {% for key, service in blockServices %}
        {% if key not in excluded_blocks %}
            {% set filteredBlockServices = filteredBlockServices|merge({(key): service}) %}
        {% endif %}
    {% endfor %}
    {% set blockServices = filteredBlockServices %}
    {# fin de surcharge pour exclude des blocs #}

    <div class="page-composer__block-type-selector">
        <label>{{ 'composer.block.add.type'|trans({}, 'SonataPageBundle') }}</label>
        <select class="page-composer__block-type-selector__select" style="width: auto">
            {% for blockServiceId, blockService in blockServices %}
                <option value="{{ blockServiceId }}">{{ blockService.metadata.title|trans({}, blockService.metadata.domain|default('SonataBlockBundle')) }}</option>
            {% endfor %}
        </select>
        <a class="btn btn-action btn-small page-composer__block-type-selector__confirm"
           href="{{ admin.generateObjectUrl('sonata.page.admin.block.create', page, {'composer': true}) }}"
        ><i class="fa fa-plus"></i></a>
        <span class="page-composer__block-type-selector__loader">{{ 'loading'|trans({}, 'SonataPageBundle') }}</span>

        <small class="page-composer__container__child-count pull-right">
            {{ 'blocks'|trans({}, 'SonataPageBundle') }} <span class="badge">{{ container.children|length }}</span>
        </small>
    </div>

    <ul class="page-composer__container__children">
        {% for child in container.children %}
            {% include '@SonataPage/BlockAdmin/compose_preview.html.twig' with {
                'blockService': attribute(blockServices, child.type) ?? null
            } %}
        {% endfor %}
    </ul>
</div>

1 – Cấu Hình

2 – Hàm Twig để Truy xuất Tham số Của Chúng Ta

3 – Ghi Đè Mẫu

4 – Ghi Đè Danh Sách Khối Trong Mẫu Của Chúng Ta

6 – Ghi Đè Danh Sách Khối Trong Trình Soạn Trang

Chia sẻ bài viết này