:::
4. 了解路由 Router 及視圖 View
4-1 製作系統主樣板
一、製作主樣板（並將<nav>選單部份移出）
- 我們可以自己做個主要樣板來用，但從頭做麻煩，拿現成的來改簡單一點。
/專案/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 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="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" 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> - 將原本24～73行左右的<nav>標籤全部移出成另一個檔案（
/專案/resources/views/layouts/nav.blade.php），並於此處用@include('layouts.nav')引入該檔案。 - 若想替導覽列做一點顏色變化可以參考：https://bootstrap.hexschool.com/docs/4.0/components/navbar/#color-schemes
- 其中
{{ }}裡面可以放PHP變數、函數...等內容，詳情可見：https://learnku.com/docs/laravel/5.8/blade/3902 - 預設情況下，
{{ }}語句會自動調用 PHP的htmlspecialchars函數防止 XSS 攻擊。不想轉義的話，可以使用{!! !!}語法。 - 有時候，若是真的要在視圖上顯示
{{ }}，或者有其他前端套件也是使用{{ }}來進行渲染，那麼，只要寫成@{{ }}即可。
二、引入選單子樣板
- 我們將其中的選單部份獨立出來，另存為
layouts/nav.blade.php，並在主樣板中用@include()引入子樣板即可，以保持樣板容易理解的狀態。（換言之，沒有一定要分開，只是分開後，會比較清楚，日後好修改） - 引入時，只要寫
nav即可，不須寫完整的nav.blade.php，若該樣板放在views的子目錄下，如layouts/nav.blade.php，則寫成layouts.nav即可。<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <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> @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @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> - 到這裡為止，雖然已經做好主樣板，但畫面還沒有太大的改變，也不太有感覺，只要重整畫面，沒有出現錯誤訊息，那就表示您做對了。稍後單元，我們就來改變入口處的畫面。
