XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.8 入門講義 
=================

### 一、編輯預設首頁

1. 要決定改呈現什麼畫面，目前的決定權在路由（即`/專案/config/app.php`）設定中，其中，當連到首頁（`/`）就傳回`view('welcome')`，也就是去呼叫 `/專案/resources/views/welcome.blade.php` 這個檔的意思。 
    ```php
    Route::get('/', function () {
        return view('welcome');
    });
    ```
2. 所以，請開啟`/專案/resources/views/welcome.blade.php`以修改之： 
    ```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. 要手動排版，可按<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>
5. 最後看起來像這樣![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic028.png)
 
### 二、微調版面

1. 視圖中，有個`<div class="container"></div>`把住要內容包起來，這是BootStrap的用法，讓內容的呈現範圍大約維持在1170左右。由於幾乎每一個視圖都會用到，所以，我們可以之移至主樣板，如此，就無須在每個blade.php中加入該語法。
2. 換言之主樣板`/專案/resources/views/layouts/app.blade.php`變這樣： 
    ```markup
    
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        
        <meta name="csrf-token" content="{{ csrf_token() }}">
    
        <title>{{ config('app.name', 'Laravel') }}</title>
    
        
        <script src="{{ asset('js/app.js') }}" defer></script>
    
        
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
    
        
        <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`變得更簡單了：
    
     
    ```markup
    @extends('layouts.app')
    @section('content')
        <h1>商品一覽</h1>
    @endsection
    
    ```
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/exam56/commit/576104b0ee40b7acc13de6a887bfa96ee447308e)

</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1393

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器