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

Posted

技术标签:

【中文标题】如何限制与存储的数据库条目相关的@foreach 循环？【英文标题】：How do I limit a @foreach loop in relation to stored database entries? 【发布时间】：2020-09-28 02:49:19 【问题描述】：

我正在使用 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"  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"  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"  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"  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"  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"  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"  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

【问题讨论】：

【参考方案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"  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"  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

【讨论】：

嗨，几乎是这样。我想从第一张博客卡片开始迭代，然后在我发布内容时继续到其他 6 张卡片。我在主帖中添加了屏幕截图。一个单独的问题，所有卡片的图像都是相同的，但是一旦我写博客就不会这样了。那么，您将如何让每篇文章中的图片发生变化？ 留胡子：&lt;img src="path/to/images/ $image_name_here "> 太棒了。如果它是图片的链接，它会是 “链接到图片”是什么意思？ 对不起，我的意思是复制一个图片地址而不是下载到我的图片文件夹。例如，unsplash.com/photos/yWwob8kwOCk

以上是关于如何限制与存储的数据库条目相关的@foreach 循环？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 mySql 中获取所有具有值的条目，然后遍历 foreach

如何在 R 中将“foreach”和“%dopar%”与“R6”类一起使用？

SwiftUI - 如何限制 ForEach 中显示的对象数量

可以存储在 HashMap 中的键（对象）数量的理论限制？

在 AngularJS 中使用 angular.forEach 实现异步等待

了解LDAP协议数据结构与条目组件