0

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

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% 的网络，我也不知道如何做到这一点:)。

如果有更好的方法可以让我知道！非常感谢你们！

4

2 回答 2

2

是的，您可以通过检查当前的帖子或循环迭代是奇数还是偶数来做到这一点。( 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
于 2018-01-03T09:53:20.157 回答
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 循环，在 for 循环中您可以检查变量，即 i 是奇数还是偶数。

于 2018-01-03T09:51:21.297 回答