Laravel 博客开发｜｜项目详情

在前面实现了项目列表的展示，现在来实现项目详情页面。

修改控制器

在前面已经创建了项目对应的控制器，现在修改它，在里面增加 show方法：

<?php
namespace App\Http\Controllers;
use App\Models\Project;
use Illuminate\Http\Request;
class ProjectsController extends Controller
{
    public function index(){
        $projects = Project::orderBy('created_at', 'desc')->paginate(5);
        return view('projects.index',compact('projects'));
    }
    public function show(Project $project){
        return view('projects.show',compact('project'));
    }
}

添加视图

在 projects目录下添加 show.blade.php文件：

touch resources/views/projects/show.blade.php

打开文件，输入如下内容：
resources/views/projects/show.blade.php。

@extends('layouts.app')
@section('title')
    {{$project->name}}
@stop
@section('content')
    <section class="section">
        <div class="container is-max-widescreen">
            <div class="columns">
                <div class="column is-9">
                    <div class="box is-flex is-justify-content-space-between is-align-items-center">
                        <div class="is-flex">
                            <div class="cover">
                                <figure class="image is-128x128">
                                    <img src="{{asset($project->cover)}}" alt="">
                                </figure>
                            </div>
                            <div class="ml-2">
                                <h2 class="is-size-4"><a href="">{{$project->name}}</a></h2>
                                <p class="is-size-7 has-text-grey">开始时间 {{$project->created_at->toDateString()}}</p>
                                <p class="is-size-6 has-text-grey-dark">{{$project->description}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="tabs is-boxed">
                            <ul>
                                <li class="is-active"><a>里程碑</a></li>
                            </ul>
                        </div>
                        <div class="">
                            <div class="timeline is-centered">
                                @foreach($project->milestones as $value)
                                <header class="timeline-header">
                                    <span class="tag is-medium is-link">{{$value->title}}</span>
                                </header>
                                <div class="timeline-item is-link">
                                    <div class="timeline-marker is-link"></div>
                                    <div class="timeline-content">
                                        <p class="heading">{{$value->created_at->toDateString()}}</p>
                                        <div>{!! $value->content !!}</div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="box">
                        <p class="has-text-centered">站长：<a href="{{url('/contact')}}" target="_blank">SevDot</a></p>
                        <hr>
                        <div class="is-flex is-justify-content-center">
                            <figure class="image is-96x96">
                                <img class="is-rounded" style="" src="{{asset('images/sevdot_avatar.jpg')}}"
                                     alt="SevDot 的头像">
                            </figure>
                        </div>
                        <hr>
                        <div class="has-text-centered">
                            <a href="" class="button is-light"><span class="icon"><i
                                        class="fa fa-github"></i></span></a>
                            <a href="" class="button is-info"><span class="icon"><i class="fa fa-weibo"></i></span></a>
                            <a href="" class="button is-success"><span class="icon"><i class="fa fa-weixin"></i></span></a>
                        </div>
                    </div>
                    <div class="box">
                        <h2 class="title is-5 has-text-centered has-text-success">微信公众号</h2>
                        <hr>
                        <img src="{{asset('images/sevdots.png')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

前面在模型里面定义了 milestones方法，定义一个项目有多个里程碑，使用 $project->milestones可以取出该项目的所有里程碑。

使用 Bulma 扩展

在项目详情中，我希望里程碑成时间轴展示，Bulma CSS 框架没有时间轴样式，但是 Bulma 扩展里面有时间轴的样式。

运行如下命令安装扩展：

npm install -s bulma-timeline

引入扩展：

resources/scss/app.scss

@import "~bulma";
@import "~font-awesome/css/font-awesome.css";
@import "~bulma-timeline";

重新编译 app.scss：

npm run prod

展示

访问 [http://blog.test/projects/1](http://blog.test/projects/1)可以看到如下所示：