php - 有什么方法可以更改此代码，以免我重复相同的 html 代码 4 次？

Question

如您所见，在col-home-1tocol-home-4 元素中，我使用了相同的 html 代码，但我不喜欢这样，但是，我不确定如何避免重复 4 次。任何提示将不胜感激。

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

@if (!empty($images1))
    <div class="col-home-1">
    @foreach($images1 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

@if (!empty($images2))
    <div class="col-home-2">
    @foreach($images2 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

@if (!empty($images3))
    <div class="col-home-3">
        @foreach($images3 as $image)
            <div class='imageContainer'>
                <div class="stickyContainer blackGradient">
                    <h1 class='imageTitle'>{{$image->name}}</h1>
                    <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                    <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                    @auth
                    <div class='votingContainer'>
                        <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                        <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                        <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                    </div>
                    @endauth
                </div>
            </div>
        @endforeach
    </div>
@endif

    @if (!empty($images4))
        <div class="col-home-4">
            @foreach($images4 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
        </div>
@endif
</div>

标签： phplaravel

Answer 1

您可以在视图文件夹中创建一个部分：

图像组件：

@if (!empty($images))
    <div class="{{$class}}">
    @foreach($images as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

然后在您看来，您将这样做：

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

@include('imagesComponent', ['images' => $images1, 'class' => "col-home-1"])
@include('imagesComponent', ['images' => $images2, 'class' => "col-home-2"])
@include('imagesComponent', ['images' => $images3, 'class' => "col-home-3"])
@include('imagesComponent', ['images' => $images4, 'class' => "col-home-4"])

</div>