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

投稿日: 2022-04-20 2022-10-25
タグ: css, Laravel, php

これまで、移行を使用してアプリケーションの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();

The view ヘルパー関数は、という名前のテンプレートファイルを探します welcome.blade.php、のルートで resources/views ディレクトリを作成し、レンダリングされた結果をブラウザに返します。これを変更して、新しいものを指すようにします 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>

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

次に、ブラウザに移動して結果を確認します。ポートでアプリケーションにアクセスできるはずです 8000 いずれかの localhost または、リモートサーバーを開発プラットフォームとして使用している場合は、リモートサーバーのIPアドレス。

http://localhost:8000

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

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

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

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

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

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>

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

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

getdocs

13036