如何限制与存储的数据库条目相关的@foreach 循环？

Question

我正在使用 Laravel/PHP/Tailwindcss 创建博客。我使用 tailwind 将博客页面设计为有 6 张博客卡片。使用 @foreach $posts as $post 时，结果重复 6 次。我只希望博客卡片填充数据库中有多少篇文章而不是重复自己。就我而言，现在是 6。

希望这张图片可以帮助我提供更多背景信息。

https://ibb.co/PYMMf3Z

https://ibb.co/NLyFRCG (#2)

Index.blade.php

@extends('layout')
@section('title', 'Blog')

@section('content')

@foreach ($posts as $post)

<body class="text-cw-grey-700 ">
  <main class="container mx-auto max-w-6xl px-5">
    <article class="border-t border-cw-grey-100 flex justify-between py-10">
      <a href="#" class="w-1/2 mr-12">
        <img src="images/T-Sky.jpg" alt="" class="border-sm">
      </a>
      <div class="w-1/2 mt-4">
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Link</a>
        <h1 class="mb-3"><a href="#"
            class="font-bold font-work-sans text-3xl text-cw-gray-800 leading-tight hover:text-cw-blue-600 hover:underline">{{ $post->title }}</a>
        </h1>
        <p class="leading-relaxed">{{ $post->excerpt }}</p>
      </div>
    </article>
    <div class="mt-4 grid grid-cols-3 gap-8 row-gap-6">
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
    </div>
  </main>
</body>
@endforeach
@endsection

Answer 1

您正在复制 body 标签。这是您要找的吗？

@extends('layout')
@section('title', 'Blog')

@section('content')

<body class="text-cw-grey-700 ">
  <main class="container mx-auto max-w-6xl px-5">
    <article class="border-t border-cw-grey-100 flex justify-between py-10">
      <a href="#" class="w-1/2 mr-12">
        <img src="images/T-Sky.jpg" alt="" class="border-sm">
      </a>
      <div class="w-1/2 mt-4">
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Link</a>
        <h1 class="mb-3"><a href="#"
            class="font-bold font-work-sans text-3xl text-cw-gray-800 leading-tight hover:text-cw-blue-600 hover:underline">{{ $post->title }}</a>
        </h1>
        <p class="leading-relaxed">{{ $post->excerpt }}</p>
      </div>
    </article>

    <!--- begin posts container -->
    <div class="mt-4 grid grid-cols-3 gap-8 row-gap-6">

    <!-- iterate posts --->
@foreach ($posts as $post)
      <article>
        <a href="#">
          <img src="images/T-Sky.jpg" alt="" class="mb-2">
        </a>
        <a href="#" class="text-cw-blue-300 hover:text-cw-blue-600 hover:underline text-sm mb-1 block">Text here</a>
        <h2><a href="#"
            class="font-bold font-work-sans text-xl text-cw-gray-900 hover:text-cw-blue-600 hover:underline ">{{ $post->title }}</a>
        </h2>
        <p class="text-sm leading-loose">{{ $post->excerpt }}</p>
      </article>
@endforeach

    </div>
   </main>
</body>
@endsection

如何限制与存储的数据库条目相关的@foreach 循环？

How do I limit a @foreach loop in relation to stored database entries?

php

laravel

tailwind-css