Как создать динамический макет в Laravel с помощью Blade?
Итак, я создаю свой первый блог и хочу динамически показывать сообщения на моей целевой странице. Я хочу, чтобы макет стал таким (может быть немного странным):
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% в сети :).
Если есть лучший способ сделать это, просто дайте мне знать! Очень ценю, ребята!
Решение
Да, вы можете сделать это, проверив, является ли текущий пост или итерация цикла нечетным или четным. (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
Другие решения
Хорошо, я думаю, я получил твой вопрос. так что прямого решения нет, но вы можете измерить внутри цикла 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
Или вы можете использовать для цикла вместо foreach цикла, а внутри цикла вы можете проверить переменную, то есть я нечетное или четное.