如何使用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

是的，你可以通过检查当前的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

Answer 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和循环内部你可以检查变量，即我是奇数或偶数。