README

点击预览块 -> 滚动到编辑块

🟦 左侧是编辑块 - 🟨 右侧是预览块

要求

此插件支持 Craft CMS 4 和 5。

安装

要安装此插件，请按照以下说明操作。

1. 打开您的终端并转到您的 Craft 项目

    cd /path/to/project
   

2. 然后让 Composer 加载插件

    composer require nicholashamilton/craft-preview-mate
   

3. 在控制面板中，转到设置 → 插件，然后点击 PreviewMate 的“安装”按钮。

配置

config/preview-mate.php

<?php

return [
    "matrixFields" => [
        [
            "handle" => "pageBuilder",
            "excludedBlocks" => [
                "rowContainer",
            ],
        ],
        [
            "handle" => "ctaBlocks",
        ],
    ],
];

模板配置

从矩阵字段渲染的每个块/元素都需要这两个标签之一才能与实时预览点击和滚动一起工作。

excludedBlocks 将被忽略，不需要 preview-block 标签。

{# option 1 #}
{{ craft.previewMate.previewBlock("replaceWithMatrixFieldHandleHere") }}

{# option 2 #}
preview-block="replaceWithMatrixFieldHandleHere"

带有矩阵字段的 Twig 示例

{% set matrixHandle = "pageBuilder" %}
{% set blocks = entry[matrixHandle].all() %}

{% for block in blocks %}
    <div {{ craft.previewMate.previewBlock(matrixHandle) }}>
        {{ include("_blocks/" ~ block.type.handle|kebab) }}
    </div>
{% endfor %}

可选：当悬停在预览块上时为虚线边框添加 CSS

[preview-block] {
    position: relative;
}
[preview-block]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(0, 0, 0, .333);
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
}
[preview-block].is-hovering::after {
    opacity: 1;
}

示例

注意事项

- PreviewMate 只在服务器端渲染的矩阵块上进行了测试

- 目前不支持嵌套 preview-blocks，请使用 excludedBlocks 来禁用块