:::
4. 了解路由的運作
4-1 製作系統主樣板
一、製作主樣板
- 我們可以自己做個主要樣板來用，但從頭做麻煩，拿現成的來改簡單一點。
/專案/resources/views/layouts/app.blade.php實際上是我們上個單元加入使用者認證下的產物，預設其實是沒有的。- 但由於其結構挺不錯的，又支援BootStrap4，所以我們可以直接修改
/專案/resources/views/layouts/app.blade.php並直接將app.blade.php作為系統的主樣板來使用。<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> @include('layouts.nav') <main class="py-4"> @yield('content') </main> </div> </body> </html> - 其中
{{ }}裡面可以放PHP變數、函數...等內容，詳情可見：https://laravel-china.org/docs/laravel/5.6/blade/1375#6a96da - 預設情況下，
{{ }}語句會自動調用 PHP的htmlspecialchars函數防止 XSS 攻擊。不想轉義的話，可以使用{!! !!}語法。 - 有時候，若是真的要在視圖上顯示
{{ }}，或者有其他前端套件也是使用{{ }}來進行渲染，那麼，只要寫成@{{ }}即可。 - 將原本25～68行左右的<nav>標籤全部移出成另一個檔案（
/專案/resources/views/layouts/nav.blade.php），並於此處用@include('layouts.nav')引入該檔案。
二、引入選單子樣板
- 我們將其中的選單部份獨立出來，另存為
layouts/nav.blade.php，並在主樣板中用@include()引入子樣板即可，以保持樣板容易理解的狀態。 - 引入時，只要寫
nav即可，不須寫完整的nav.blade.php，若該樣板放在views的子目錄下，如layouts/nav.blade.php，則寫成layouts.nav即可。<nav class="navbar navbar-expand-md navbar-light navbar-laravel"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> - 到這裡為止，雖然已經做好主樣板，但畫面還沒有太大的改變，也不太有感覺，稍後單元，我們就來改變入口處的畫面。
