Question

我正在使用一个片段。现在我需要使用数据库value.how循环此片段来实现此目的吗？以下是我的片段

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
/* image thumbnail */
.thumb {
    display: block;
    width: 100%;
    margin: 0;
}

/* Style to article Author */
.by-author {
    font-style: italic;
    line-height: 1.3;
    color: #aab6aa;
}

/* Main Article [Module]
-------------------------------------
* Featured Article Thumbnail
* have a image and a text title.
*/
.featured-article {
    width: 482px;
    height: 350px;
    position: relative;
    margin-bottom: 1em;
}

.featured-article .block-title {
    /* Position & Box Model */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* background */
    background: rgba(0,0,0,0.7);
    /* Width/Height */
    padding: .5em;
    width: 100%;
    /* Text color */
    color: #fff;
}

.featured-article .block-title h2 {
    margin: 0;
}

/* Featured Articles List [BS3]
--------------------------------------------
* show the last 3 articles post
*/

.main-list {
    padding-left: .5em;
}

.main-list .media {
    padding-bottom: 1.1em;
    border-bottom: 1px solid #e8e8e8;
}
</style>

<script>

</script>
</head>
<body>
<div class="container">
<div class="row">
Articale post
</div>
    <div class="row">
        <div class="col-md-5 col-lg-5">
            <!-- artigo em destaque -->
            <div class="featured-article">
                <a href="#">
                    <img src="http://placehold.it/482x350" alt="" class="thumb">
                </a>
                <div class="block-title">
                    <h2>Lorem ipsum dolor asit amet</h2>
                    <p class="by-author"><small>By Jhon Doe</small></p>
                </div>
            </div>
            <!-- /.featured-article -->
        </div>
        <div class="col-md-7 col-lg-7">
            <ul class="media-list main-list">
              <li class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" src="http://placehold.it/150x90" alt="...">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
                  <p class="by-author">By Jhon Doe</p>
                </div>
              </li>
              <li class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" src="http://placehold.it/150x90" alt="...">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
                  <p class="by-author">By Jhon Doe</p>
                </div>
              </li>
              <li class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" src="http://placehold.it/150x90" alt="...">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
                  <p class="by-author">By Jhon Doe</p>
                </div>
              </li>
            </ul>
        </div>
    </div>
</body>
</html>

现在我需要从数据库循环最新帖子，第一个帖子必须显示大图像为482 * 350，下一个帖子必须在旁边（150 * 150）。任何帮助表示赞赏。

更新::

发布表

id|post_title|post_description|featured_image|author_id|created_at|updated_at

Answer 1

在您的控制器中，您需要获取第一篇文章和其他3篇文章：

$posts = Posts::orderBy('created_at')->take(4)->get();
$firstPost = $posts->pop();
return view('home', compact('firstPost', 'posts');

在模板文件中，您可以遍历它们：

<div class="row">
    <div class="col-md-5 col-lg-5">
        <!-- artigo em destaque -->
        <div class="featured-article">
            <a href="#">
                <img src="{{ $firstPost->featured_image }}" alt="" class="thumb">
            </a>
            <div class="block-title">
                <h2>{{ $firstPost->post_title }}</h2>
                <p class="by-author"><small>By {{ $firstPost->author->name }}</small></p>
            </div>
        </div>
        <!-- /.featured-article -->
    </div>
    <div class="col-md-7 col-lg-7">
        <ul class="media-list main-list">
          @foreach($posts as $post) {
          <li class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="{{ $post->featured_image" alt="...">
            </a>
            <div class="media-body">
              <h4 class="media-heading">{{ $post->post_title }}</h4>
              <p class="by-author">By {{ $post->author->names }}</p>
            </div>
          </li>
          @endforeach             
        </ul>
    </div>
</div>

在您的帖子模型中，您需要与作者建立关系，例如

Class Posts extends Model {
  public function author {
    return $this->hasOne('App\Author');
  }

}

如何在laravel 5.1中循环帖子？

1 个答案: