XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.6 入門講義
================

### 一、編輯預設首頁

1. 要決定改呈現什麼畫面，目前的決定權在路由設定中，其中，當連到首頁（`/`）就傳回`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/37/l56_020.png)
 
### 二、微調版面

1. 視圖中，有個<div class="container"></div>把住要內容包起來，這是BootStrap的用法，讓內容的呈現範圍大約維持在1170左右。由於幾乎每一個視圖都會用到，所以，我們可以之移至主樣板，如此，就無須在每個blade.php中加入該語法。
2. 換言之主樣板`/專案/resources/views/layouts/app.blade.php`變這樣： ```
  <pre data-line="29,31">
  ```markup
  
  <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">
  
      
      <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="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" 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%3D1151

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器