我如何在 Laravel 中模板化部分内容?

How can i template a partial in Laravel?

我正在尝试弄清楚如何使用 laravel 的 blade 实现我的想法。我想制作一个可以扩展的可重用 table 模板(例如,不同页面的 header 和 body 不同)。根据我所做的研究,我认为模板仅用于整体页面结构,而不是部分组件。那么我该如何实现呢?下面的例子

假设我已经定义了一个带有一些样式和可拖动事件等的 table,我不想将此 table 复制并粘贴到每个具有不同 [=24] 的页面=] body 和 header.

<table class="table-selectable table table-hover bg-white">
  <thead class="thead-dark">
    <th>Image</th>
    <th>Title</th>
    <th>Tags</th>
    **{{SOME APPENDED HEADERS DEPENDING ON PAGE}}**
  </thead>
  <tbody>
    @if(!empty($objects))
      @foreach($objects as $object)
        <tr onclick="someFunction()">
          <td class="align-middle"><img class="list-image" src="some-image.jpg"></td>
          <td class="align-middle"><h5>Title</h5></td>
          <td class="align-middle">
              Tags
          </td>
          **{{SOME APPENDED BODY FIELDS DEPENDING ON PAGE}}**
        </tr>
      @endforeach
    @endif
  </tbody>
</table>

似乎是一项相当简单的任务,但我找不到解决方案。

Blade 允许开箱即用。


布局 ( Docs )

<!-- Stored in resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

包括 (Docs)

然后您可以使用 includes

将较小的模板添加到布局中
@include('view.name', ['some' => 'data'])

组件 (Docs)

最后,如果您想拥有更多控制权,请尝试使用组件。

注意:组件现在比以前复杂一点,但仍然向后兼容。所以你仍然可以像这样定义组件:

modal.blade(组件)

<!-- Modal -->
<div 
    class="modal fade {{ $class ?? '' }}" 
    id="{{ $id }}" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="{{ $id }}Title" 
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered {{ $size ?? '' }}" role="document">
        <div class="modal-content shadow">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="{{ $id }}Title">
                  {{ $title }}
                </h5>
                <button type="button" class="close close-icon" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @if ($form) {{ $action }} @endif
            <div class="modal-body">
                {{ $body }}
            </div>
            <div class="modal-footer">
                {{ $footer }}
            </div>
            @if ($form) {!! Form::close() !!} @endif
        </div>
    </div>
</div>

用法

@component('components.modal', [
    'id'    => 'myModalID',
    'class' => 'modal-info',
    'form'  => true
])
    @slot('title')
        My Modal
    @endslot

    @slot('action')
        {!! Form::open([]) !!}
    @endslot

    @slot('body')
        Some content
    @endslot

    @slot('footer')
        <button type="submit" class="btn">
            Submit
        </button>
    @endslot
@endcomponent