:::

4-3 修改首頁畫面

一、編輯預設首頁

  1. 要決定改呈現什麼畫面,目前的決定權在路由設定中,其中,當連到首頁(/)就傳回view('welcome'),也就是去呼叫 /專案/resources/views/welcome.blade.php 這個檔的意思。
    Route::get('/', function () {
        return view('welcome');
    });
  2. 所以,請開啟/專案/resources/views/welcome.blade.php以修改之:
    @extends('layouts.app')
    @section('content')
        <div class="container">
            <h1>隨機題庫系統</h1>
        </div>
    @endsection
    
  3. 此檔主要設定content樣板變數,到時後會套入主樣板 layouts/app.blade.php 中。

    • @extends('layouts.app') ,就是說,目前這個樣板是源自於(或是繼承自)layouts/app.blade.php 視圖。

    • @section('樣板變數名稱','值') 用來定義一個樣板變數,及其對應值

    • 若是只有@section('樣板變數名稱'),那麼下方可直接填入內容,然後用 @endsection 來做個結束亦可。

    • @yield('xxx') 會顯示定義的樣板變數xxx的內容

  4. 要手動排版,可按Alt+Shift+F
  5. 最後看起來像這樣

二、微調版面

  1. 視圖中,有個<div class="container"></div>把住要內容包起來,這是BootStrap的用法,讓內容的呈現範圍大約維持在1170左右。由於幾乎每一個視圖都會用到,所以,我們可以之移至主樣板,如此,就無須在每個blade.php中加入該語法。
  2. 換言之主樣板/專案/resources/views/layouts/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">
                <div class="container">
                    @yield('content')
                </div>
            </main>
        </div>
    </body>
    
    </html>
  3. 首頁視圖/專案/resources/views/welcome.blade.php變得更簡單了:

    @extends('layouts.app') 
    @section('content')
        <h1>隨機題庫系統</h1>
    @endsection

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 2130213021302130
昨天: 2596259625962596
總計: 7593578759357875935787593578759357875935787593578