如何使用BulmaCSS为您的Laravel应用程序创建自定义模板

到目前为止，您已经了解了如何使用迁移设置应用程序的 MySQL 数据库表，如何创建 Eloquent 模型以与链接表交互，以及如何创建 Artisan 命令来管理数据库中的链接。您现在将看到如何创建自定义 Blade 模板以在应用程序的前端显示您的链接。为了便于设置此页面的样式，同时保持其最小化，在本系列中，我们将使用 Bulma，一个单文件 CSS 框架。

Laravel web 路由文件中设置的默认路由指向一个示例模板，您可以在 resources/views/welcome.blade.php 找到该模板。您将在同一目录中创建一个新的 index.blade.php 文件，并编辑主路由文件，以便 / 路由指向此模板。在路由定义中，您还需要获取要在新索引模板中显示的所有链接的列表。

首先更新 Laravel 应用程序的路由文件。使用您选择的文本或代码编辑器打开 routes/web.php 文件：

nano routes/web.php

你当前的 / 路由默认指向 Laravel 自带的示例页面：

Route::get('/', function () {
    return view('welcome');
});

要进行建议的更改，首先您将使用 Link Eloquent 模型从数据库中获取所有链接，并按降序对它们进行排序，以确保您创建的任何新链接首先列出，因此将是显示在页面顶部。

$links = Link::all()->sortDesc();

view 辅助函数将在 resources/views 目录的根目录中查找名为 welcome.blade.php 的模板文件，并将渲染结果返回给浏览器。您将其更改为指向新的 index.blade.php 模板。此外，您将传递 $links 变量作为模板数据。

    return view('index', [
        'links' => $links
    ]);

以下代码实现了 / 路由的讨论更改。将 routes/web.php 文件中的内容替换为：

路线/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Models\Link;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('index', [
        'links' => Link::all()->sortDesc()
    ]);
});

完成后保存并关闭文件。

路由文件已全部设置，但如果您现在尝试访问主应用程序的页面，您将收到一条错误消息，因为 index.blade.php 模板还不存在。您现在将创建它。

您可以将您的模板基于 Bulma 入门模板，它提供了一个带有标题、副标题和主要内容区域的最小 HTML 页面结构。稍后，您将包含一些 CSS 样式来自定义此页面的外观。

首先，使用您选择的文本或代码编辑器创建一个新的 index.blade.php 模板：

nano resources/views/index.blade.php

除了创建页面结构和您可能想要使用的静态元素（例如标题和其他信息）的 HTML 样板代码之外，您还需要显示作为模板数据传递的链接列表 -a Link 对象的集合。

您可以使用 Blade 的 foreach loop 循环遍历集合中的链接，并将它们输出到页面：

            @foreach ($links as $link)
                <li>
                    <a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>
                </li>
            @endforeach

在您的 index.blade.php 文件中包含以下内容。随意自定义页面中的标题和其他信息：

资源/视图/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sammy's Awesome Links</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<section class="section">
    <div class="container">
        <h1 class="title">
            Check out my awesome links
        </h1>
        <p class="subtitle">
            You can include a little description here.
        </p>

        <ul>
            @foreach ($links as $link)
                <li>
                    <a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>
                </li>
            @endforeach
        </ul>
    </div>
</section>
</body>
</html>

完成后保存文件。

现在转到您的浏览器检查结果。如果您使用远程服务器作为开发平台，您应该能够通过 localhost 的端口 8000 或远程服务器的 IP 地址访问您的应用程序。

http://localhost:8000

您将看到这样的页面，显示数据库中从最新到第一的所有链接：

您的应用程序现在功能齐全，但您仍然可以改进此起始页的外观，使其对您的观众更具吸引力。

样式化和自定义模板（可选）

现在基本模板已经准备好了，除了自定义样式之外，您还可以包含一些可选的 CSS 自定义项，以使用 Bulma 中提供的一些功能来设置页面样式。

要让这个页面焕然一新，您可以从设置一个完整的页面背景开始。在本指南中，我们将使用 a DigitalOcean 壁纸，但作为替代方案，您也可以使用个人图像或来自免费图片网站的图像，例如 unsplash。您需要获取图像 URL 并使用它为 html 元素设置 background CSS 属性。可以调整一些其他属性以确保图像集中。

html {
            background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

要设置链接列表的样式，您可能希望将每个链接的 <li> 元素替换为框组件，并将链接 URL 作为段落包含在链接描述下方。

            @foreach ($links as $link)
                <div class="box link">
                    <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
                    <p>{{$link->url}}</p>
                </div>
            @endforeach

最后，您可以创建几个额外的 CSS 样式来自定义链接文本的外观。

        div.link h3 {
            font-size: large;
        }

        div.link p {
            font-size: small;
            color: #718096;
        }

以下 Blade 模板包含所有建议的实现。将您当前的 index.blade.php 文件内容替换为：

资源/视图/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sammy's Awesome Links</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

    <style>
        html {
            background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        div.link h3 {
            font-size: large;
        }

        div.link p {
            font-size: small;
            color: #718096;
        }
    </style>
</head>
<body>
<section class="section">
    <div class="container">
        <h1 class="title">
            Check out my awesome links
        </h1>
        <p class="subtitle">
            You can include a little description here.
        </p>

        <section class="links">
            @foreach ($links as $link)
                <div class="box link">
                    <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
                    <p>{{$link->url}}</p>
                </div>
            @endforeach
        </section>
    </div>
</section>
</body>
</html>

完成后保存文件。

现在重新加载您的浏览器，您将看到更新后的页面：