4-3
修改首頁畫面
一、編輯預設首頁
- 要決定改呈現什麼畫面，目前的決定權在路由（即
/專案/config/app.php）設定中，其中，當連到首頁（/）就傳回view('welcome')，也就是去呼叫 /專案/resources/views/welcome.blade.php 這個檔的意思。
Route::get('/', function () {
return view('welcome');
});
- 所以，請開啟
/專案/resources/views/welcome.blade.php以修改之：
@extends('layouts.app')
@section('content')
<div class="container">
<h1>商品一覽</h1>
</div>
@endsection
-
此檔主要設定content樣板變數，到時後會套入主樣板 layouts/app.blade.php 中。
-
@extends('layouts.app') ，就是說，目前這個樣板是源自於（或是繼承自）layouts/app.blade.php 視圖。
-
@section('樣板變數名稱','值') 用來定義一個樣板變數，及其對應值
-
若是只有@section('樣板變數名稱')，那麼下方可直接填入內容，然後用 @endsection 來做個結束亦可。
-
@yield('xxx') 會顯示定義的樣板變數xxx的內容
- 要手動排版，可按Alt+Shift+F
- 最後看起來像這樣
二、微調版面
- 視圖中，有個
<div class="container"></div>把住要內容包起來，這是BootStrap的用法，讓內容的呈現範圍大約維持在1170左右。由於幾乎每一個視圖都會用到，所以，我們可以之移至主樣板，如此，就無須在每個blade.php中加入該語法。
- 換言之主樣板
/專案/resources/views/layouts/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">
<div class="container">
@yield('content')
</div>
</main>
</div>
</body>
</html>
-
首頁視圖/專案/resources/views/welcome.blade.php變得更簡單了：
@extends('layouts.app')
@section('content')
<h1>商品一覽</h1>
@endsection
4-2 為樣板製作中文語系檔
