:::

4-1 製作系統主樣板

一、製作主樣板

  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 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>
    
  4. 其中{{ }}裡面可以放PHP變數、函數...等內容,詳情可見:https://laravel-china.org/docs/laravel/5.6/blade/1375#6a96da
  5. 預設情況下,{{ }} 語句會自動調用 PHP的 htmlspecialchars 函數防止 XSS 攻擊。不想轉義的話,可以使用{!! !!}語法。
  6. 有時候,若是真的要在視圖上顯示{{ }},或者有其他前端套件也是使用{{ }}來進行渲染,那麼,只要寫成@{{ }}即可。
  7. 將原本25~68行左右的<nav>標籤全部移出成另一個檔案(/專案/resources/views/layouts/nav.blade.php),並於此處用@include('layouts.nav') 引入該檔案。

二、引入選單子樣板

  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 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>
  3. 到這裡為止,雖然已經做好主樣板,但畫面還沒有太大的改變,也不太有感覺,稍後單元,我們就來改變入口處的畫面。

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1479147914791479
昨天: 1416141614161416
總計: 7340126734012673401267340126734012673401267340126