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

Question

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

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% 的网络，我也不知道如何执行此操作:) .

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

Answer 1

好的，我想我明白你的问题了。所以没有直接的解决方案，但你可以通过添加额外的变量来测量你的 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 of 循环，并且在 for 循环内部您可以检查变量，即 i 是奇数还是偶数。

Answer 2

是的，您可以通过检查当前 post 或循环迭代是奇数还是偶数来实现。 (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

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

How to create dynamic layout in Laravel with Blade?

php

laravel

blade

voyager