:::

4-1 製作系統主樣板

一、製作主樣板(並將<nav>選單部份移出)

  1. 我們可以自己做個主要樣板來用,但從頭做麻煩,拿現成的來改簡單一點。
  2. /專案/resources/views/layouts/app.blade.php實際上是我們上個單元加入使用者認證下的產物,預設其實是沒有的。
  3. 但由於其結構挺不錯的,又支援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>
    
  4. 將原本24~73行左右的<nav>標籤全部移出成另一個檔案(/專案/resources/views/layouts/nav.blade.php),並於此處用@include('layouts.nav') 引入該檔案。
  5. 若想替導覽列做一點顏色變化可以參考:https://bootstrap.hexschool.com/docs/4.0/components/navbar/#color-schemes
  6. 其中{{ }}裡面可以放PHP變數、函數...等內容,詳情可見:https://learnku.com/docs/laravel/5.8/blade/3902
  7. 預設情況下,{{ }} 語句會自動調用 PHP的 htmlspecialchars 函數防止 XSS 攻擊。不想轉義的話,可以使用{!! !!}語法。
  8. 有時候,若是真的要在視圖上顯示{{ }},或者有其他前端套件也是使用{{ }}來進行渲染,那麼,只要寫成@{{ }}即可。

二、引入選單子樣板

  1. 我們將其中的選單部份獨立出來,另存為 layouts/nav.blade.php,並在主樣板中用@include() 引入子樣板即可,以保持樣板容易理解的狀態。(換言之,沒有一定要分開,只是分開後,會比較清楚,日後好修改)
  2. 引入時,只要寫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>
    
  3. 到這裡為止,雖然已經做好主樣板,但畫面還沒有太大的改變,也不太有感覺,只要重整畫面,沒有出現錯誤訊息,那就表示您做對了。稍後單元,我們就來改變入口處的畫面。

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D43%26tbdsn%3D1391

計數器

今天: 1526152615261526
昨天: 1416141614161416
總計: 7340173734017373401737340173734017373401737340173