如何使用 Blade 在 Laravel 中创建动态布局？答案

【问题标题】：How to create dynamic layout in Laravel with Blade?如何使用 Blade 在 Laravel 中创建动态布局？
【发布时间】：2018-06-12 23:08:24
【问题描述】：

所以我正在构建我的第一个博客，我想动态地显示在我的登录页面上的帖子中。我希望布局变成这样（可能有点奇怪）：

post-image   - post-preview
post-preview - post-image
post-image   - post-preview

这是我现在要在博客文章中展示的内容：

@foreach($posts as $post)
        <div class="col-sm-4">
            <a href="/post/{{ $post->slug }}">
                <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
                <span>{{ $post->title }}</span>
            </a>
        </div>
    @endforeach

web.php（路由）：

$posts = App\Post::take(3)->orderBy('created_at')->get();
return view('welcome', compact('posts'));

现在我想动态地制作布局。我想我可以通过检查ID 是偶数还是奇数来做到这一点。但是，即使我已经搜索了 50% 的网络，我也不知道该怎么做：)。

如果有更好的方法，请告诉我！非常感谢你们！

【问题讨论】：

动态布局是什么意思？
这是后期图像和后期预览的部分。我希望图像以一种或另一种方式从左到右移动，但我似乎找不到这样做的方法。
@Sylent 请检查我的答案：stackoverflow.com/a/48074956/5013099
我现在已经有了答案，但我还是会去看看！

标签： php laravel blade voyager

【解决方案1】：

是的，您可以通过检查当前的帖子或循环迭代是奇数还是偶数来做到这一点。 (https://laravel.com/docs/5.5/blade#the-loop-variable) 对于奇数循环迭代，您可以先编写图像代码，在偶数循环迭代中，您可以先编写预览代码以实现您想要的布局。您可以检查以下代码：

@foreach($posts as $post)
    <div class="row">

         @if( $loop->iteration % 2 == 0 )
         <div class="col-md-4">
             <a href="/post/{{ $post->slug }}">
                 <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">

             </a>
         </div>

         <div class="col-md-8">
             <span>{{ $post->title }}</span>
         </div>

         @else
         <div class="col-md-8">
             <span>{{ $post->title }}</span>
         </div>

         <div class="col-md-4">
             <a href="/post/{{ $post->slug }}">
                 <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">

             </a>
         </div>
         @endif
    </div>
@endforeach

【讨论】：

谢谢，我不知道 laravel 有一个 $loop 变量，但它现在可以工作了！谢谢大哥！

【解决方案2】：

好吧，我想我知道你的问题了。所以没有直接的解决方案，但你可以通过添加额外的变量来测量你的 for 循环，例如：

<?php $inc = 0;?>
@foreach($posts as $post)
    <div class="col-sm-4">
        <a href="/post/{{ $post->slug }}">
            @if($inc%2 == 0)
            <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
            <span>{{ $post->title }}</span>
            @else 
            <span>{{ $post->title }}</span> 
            <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
            @endif
            <?php $inc++;?>
        </a>
    </div>
@endforeach

或者您可以使用 for 循环而不是 foreach 循环，在 for 循环中您可以检查变量，即 i 是奇数还是偶数。

【讨论】：