BulmaCSSを使用してLaravelアプリケーションのカスタムテンプレートを作成する方法

これまで、移行を使用してアプリケーションのMySQLデータベーステーブルを設定する方法、リンクテーブルと対話するためのEloquentモデルを作成する方法、およびデータベース内のリンクを管理するArtisanコマンドを作成する方法を見てきました。ここで、アプリケーションのフロントエンドにリンクを表示するカスタムブレードテンプレートを作成する方法を説明します。このページを最小限に抑えながらスタイリングを容易にするために、このシリーズでは、単一ファイルのCSSフレームワークであるBullmaを使用します。

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ボイラープレートコードとは別に、テンプレートデータとして渡されたリンクのリストを表示する必要があります。 Linkオブジェクトのコレクション。

Bladeのforeachloop を使用して、コレクション内のリンクをループし、それらをページに出力できます。

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

index.blade.phpファイルに次のコンテンツを含めます。必要に応じて、ページのタイトルやその他の情報を自由にカスタマイズしてください。

resources / views / 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/[email protected]/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またはリモートサーバーのIPアドレスのいずれかのポート8000でアプリケーションにアクセスできるはずです。

http://localhost:8000

次のようなページが表示され、データベースに存在するすべてのリンクが最新のものから最初のものまで表示されます。

これでアプリケーションは完全に機能しますが、このスターターページの外観を改善して、視聴者にとってより魅力的なものにすることができます。

テンプレートのスタイリングとカスタマイズ（オプション）

基本テンプレートの準備ができたので、カスタムスタイルに加えて、Bulmaで利用可能な機能のいくつかを使用してページのスタイルを設定するために、いくつかのオプションのCSSカスタマイズを含めることができます。

このページの外観を新しくするには、ページ全体の背景を設定することから始めます。このガイドでは、 DigitalOcean Wallpaper を使用しますが、代わりに、個人の画像またはunsplashなどの無料のストックフォトWebサイトの画像を使用することもできます。画像のURLを取得し、それを使用してhtml要素のbackgroundCSSプロパティを設定する必要があります。他のいくつかのプロパティを調整して、画像が一元化されていることを確認できます。

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ファイルの内容を次のように置き換えます。

resources / views / 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/[email protected]/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>

完了したらファイルを保存します。

ブラウザをリロードすると、更新されたページが表示されます。