[Day 11] Laravel實作 -- 學會了Blade，地獄的門面從今以後我來顧

2023 iThome 鐵人賽

DAY 11

Modern Web

Laravel實作 —系列第 11 篇

15th鐵人賽 laravel laravel10

willie03

2023-09-26 23:17:07

584 瀏覽

分享至

今天我們要來看看blade，不知道你還記不記得，他是我們顯示前端的重要檔案，在我們載的套件中有著一些很方便的小工具，能夠讓你輕鬆地讓網頁變好看。

我們先到resources\views\layouts\app.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">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
    
</html>

這個檔案和他所放的資料夾有很大的關係，layout他掌管著我們之後要寫的前端樣態，他讓我們之後在寫前端時不用每一個都寫上那長長的html，不用每次都打上head還有一些引入的資料，也可以更方便地使得我們每一個balde都有相同的屬性。
我們可以看到在main中有著{{ $slot }}，那之後我們就可以使用component將我們想要的內容放進main中顯示了。

例如：

<x-app-layout>
    <div>{{ __('Hello World') }}</div>
</x-app-layout>

{{ __('Hello World') }}這個的用法我們到後面會詳細介紹他的功用，那一定會有人想說，那這樣我們只能放main？如果我還想放header或是footer怎麼辦？難道只能硬寫？
其實你可以看到在layout中也有著{{ $header }}，又或著你之後想要自己加上：

<footer>
    {{ $footer }}
</footer>

那其實我們只需要在之後的blade中為solt取名就可以了，像是：

    <x-slot name="header">
        <h2>
            {{ __('活動列表') }}
        </h2>
    </x-slot>
    //footer也是一樣
    <x-slot name="footer">
        {{ __('關於我們') }}
    </x-slot>

那這樣他們就會被好好地放進你所期望的slot，而其餘沒被取名的slot也會被放在沒有被取名的部分。

其實除了這個slot，我們的套件中還有許多已經幫你定義好的component可以使用，我們可以到resources\views\components中去看看。

他有許多檔案是我們可以直接使用的，之後我們也會常常用到他所定義的component，當然若是你需要你也可以自己定義component，也可以不使用然後照自己的需求一個個定義所會用到的樣式。
我們可以稍微看看其中的一個檔案，resources\views\components\dropdown-link.blade.php。

<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>

他有些長，但若是你稍微看一下就可以發現他連樣式都幫你寫好了，這樣你在使用時就會基本的css。

不過其實你早就用過layout中的檔案了，只是那時你可能還不知道那是什麼意思，在第七天時我們有判斷那個人是否登錄，用了@auth去判斷，並且更改了resources\views\layouts\navigation.blade.php中的許多程式碼。而他放在layout中也代表著整個網站都適用他的樣式，在經過今天的介紹希望你可以更清楚當時我們所想要傳達的想法。

經過今天不知道你有沒有更期待開始寫網頁了呢？明天我們就要開始寫發表文章的功能了，雖然前方地獄之火炎熱，但希望各位勇者們能夠堅持地走下去啦！那我們明天見，掰掰！