Twill CMS(Laravel)如何让repeater字段按钮在内容编辑器正常显示

问题根因 #

你当前使用的Blade @section/@yield 语法依赖全局的模板栈，而Twill内容编辑器的块预览逻辑是独立渲染每个块的输出，无法识别这种跨块的栈传递关系，因此会出现按钮显示异常、位置错位的问题。

解决方案 #

不需要修改后台配置代码，只调整前端块的渲染逻辑即可：

1. 替换views/site/blocks/mainContent.blade.php中的@yield('buttons')，直接遍历当前MainContent块下的button_repeater字段渲染按钮
2. 移除views/site/blocks/buttons.blade.php中的@section、@append包裹，仅保留按钮本身的HTML结构

修改后的views/site/blocks/mainContent.blade.php代码：

<section class="block block-main-content">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6">
                <h2>{{ $block->input('title') }}</h2>
                <p>{{ $block->input('content') }}</p>
                {{-- 新增遍历repeater的代码 --}}
                @foreach($block->repeater('button_repeater') as $button)
                    @include('site.blocks.buttons', ['block' => $button])
                @endforeach
            </div>
            <div class="col-12 col-lg-6">
                <img class="img-fluid" src="{{ $block->image('image', 'desktop') }}" />
            </div>
        </div>
    </div>
</section>

修改后的views/site/blocks/buttons.blade.php代码：

<a href="{{ $block->input('url') }}" class="{{ $block->input('type') }} btn">
    @if (!empty($block->input('fa_icon')))
        <i class="fa {{$block->input('fa_icon')}}"></i>
    @endif
    <span>
        {{ $block->input('label') }}
    </span>
</a>

修改完成后，前端和Twill编辑器都会在MainContent块的对应位置正常渲染按钮。

内容的提问来源于stack exchange，提问作者Nico Shultz