创建好应用，安装好 Bulma，接下来就是开发页面，现在开始在 Laravel 项目中添加路由和静态页面。

移除无用视图

Laravel 默认会生成一个 welcome.blade.php 视图文件，主要用于对默认页面进行渲染，这个文件对接下来的项目开发没有一点用处，因此可将其移除：

  1. rm resources/views/welcome.blade.php

配置路由

在 Laravel 开发中，我们使用路由来定义 URL 和 URL 的请求方式，再将该 URL 分配到相对应的控制器动作中进行处理。接下来要构建 三个静态页面分别是主页、联系页、关于页。因此需要为路由指定好三个不同的 URL：

_routes/web.php_。

  1. <?php
  3. use App\Http\Controllers\PagesController;
  4. use Illuminate\Support\Facades\Route;
  6. Route::get('/', [PagesController::class, 'root'])->name('root');
  7. Route::get('/about', [PagesController::class, 'about'])->name('about');
  8. Route::get('/contact', [PagesController::class, 'contact'])->name('contact');

在上面的代码中，为get 方法传递了两个参数，第一个参数指明了 URL，第二个参数指明了处理该 URL 的控制器动作，name方法定义路由名称。

静态页面控制器

要让静态页面在网站上进行展示，需要先创建一个 PagesController 控制器，这个控制器将负责整个网站静态页面的处理。

运行下面命令来生成静态页面控制器：

php artisan make:controller PagesController

以上命令会在 app/Http/Controllers目录下创建一个 PagesController.php 文件，默认代码如下：

_app/Http/Controllers/PagesController.php_。 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    //
}

现在的静态页面控制器中还没有指定好三个页面对应的动作，为控制器加上这三个动作来处理从路由发过来的请求：

_app/Http/Controllers/PagesController.php_。 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    public function root()
    {
        return view('pages.root');
    }

    public function about()
    {
        return view('pages.about');
    }

    public function contact()
    {
        return view('pages.contact');
    }
}

要在控制器中指定渲染某个视图，则需要使用到 view 方法，view 方法接收两个参数，第一个参数是视图的路径名称，第二个参数是与视图绑定的数据，第二个参数为可选参数。

return view('pages/root');

上面代码，将会渲染在 resources/views 文件夹下的 pages/root.blade.php 文件。默认情况下，所有的视图文件都存放在 resources/views 文件夹下。

静态页面视图

在控制器中指定渲染的视图之后，接下来便是对视图进行构建了，需要在resources/views中创建一个 pages目录，在 pages目录中新增下面三个视图。

resources/views/pages/root.blade.php。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页｜sd-blog 博客应用</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<section class="hero is-link">
    <div class="hero-body has-text-centered">
        <h1 class="title">首页</h1>
        <p class="subtitle">首页</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>
</body>
</html>

resources/views/pages/contact.blade.php。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>联系｜sd-blog 博客应用</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<section class="hero is-link">
    <div class="hero-body has-text-centered">
        <h1 class="title">联系</h1>
        <p class="subtitle">联系我</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>
</body>
</html>

resources/views/pages/about.blade.php。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>关于｜sd-blog 博客应用</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<section class="hero is-link">
    <div class="hero-body has-text-centered">
        <h1 class="title">关于</h1>
        <p class="subtitle">关于我们</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>
</body>
</html>

访问 http://blog.test/ 显示如下页面：
image.png

访问 http://blog.test/contact 显示如下页面：
image.png

访问 http://blog.test/about 显示如下页面：
image.png