Laravel5學生成績管理系統-02-Blade模板

時間 2019-11-12

標籤 laravel5 laravel 學生成績管理系統 blade 模板简体版

原文原文鏈接

Blade 是 Laravel 所提供的一個簡單且強大的模板引擎。相較於其它知名的 PHP 模板引擎，Blade 並不會限制說你必須得在視圖中使用 PHP 代碼。全部 Blade 視圖都會被編譯緩存成普通的 PHP 代碼，一直到它們被更改成止。這表明 Blade 基本不會對你的應用程序生成負擔。Blade 視圖文件使用 .blade.php 作爲擴展名，一般保存於 resources/views 文件夾內。php

# 定義頁面佈局css

使用 Blade 模板的兩個主要優勢爲 模板繼承 與區塊。讓咱們先經過一個簡單的例子來上手。首先，咱們須要確認一下「主要的」頁面佈局。大多數的網頁應用程序在不一樣頁面都保持着相同的佈局方式，這種佈局在這單個 Blade 視圖中能夠很方便的定義：html

咱們先構建一個基礎頁面模版,由於後面的每一個頁面都是須要繼承它的.建立 master.blade.php文件.jquery

      
<!-- 文件保存於 resources/views/master.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> @yield('title') </title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @if(Auth::guest())
 <a class="navbar-brand" href="/">學生成績管理</a>
            @else
                @if (Auth::user()->is_admin)
 <a class="navbar-brand" href="/admin">學生成績管理</a>
                @else
 <a class="navbar-brand" href="/">學生成績管理</a>
                @endif
            @endif

 </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://www.golaravel.com" target="__blank">Power by laravel5</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                @if (Auth::guest())
                @else
 <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}">退出</a></li>
                        </ul>
                    </li>
                @endif
 </ul>
        </div>
    </div>
</nav>

<!-- <div>
{{-- <!-- @include('flash') --}}
  </div> -->



@yield('content')

 <!-- script -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

如你所見，這個文件包含了傳統的 HTML 語法。不過，請注意 @section 與 @yield 命令。正如其名，@section 命令定義一個內容區塊，而 @yield 命令被用來「顯示指定區塊」的內容。laravel

@yield()[能夠簡單地理解爲區域】和 @extends() 一般會結合者使用，實現咱們一般所說的layouts佈局。layouts佈局就是在web開發的過程當中，咱們將一些公用的部分如 header ， footer等直接放在一個視圖文件中，而後在使用的使用直接繼承 (使用@extends) 就能夠了，好比咱們在 resources/views/ 文件夾之下建立一個 master.blade.php ：web

如今，咱們已經定義好了這個應用程序的佈局，讓咱們接着來定義一個繼承此佈局的子頁面。bootstrap

#繼承頁面佈局
瀏覽器

當正在定義子頁面時，你能夠使用 Blade 的 @extends 命令指定子頁面應該「繼承」哪個佈局。當視圖 @extends Blade 的佈局以後，便可使用 @section 命令將內容注入於佈局的區塊中。切記，如上述例子所見，這些區塊的內容都會使用@yield 顯示在佈局中：緩存

‍ welcome歡迎首頁面繼承主頁面‍app

      
<!-- 文件保存於 resources/views/welcome.blade.php -->

@extends('master')    {{-- 繼承master模版，注意：此處米有結束符分號 --}}

@section('title')   {{-- 對應@yield('title') --}}  {{-- 也能夠這樣寫：@section('title', '頁面標題') --}}
    學生成績管理系統-測試-
@stop

@section('content')    {{-- 對應@yield('content') --}}
    <div class="container">
        <div class="jumbotron">
            <h2><div class="quote">{{ Inspiring::quote() }}</div></h2>
            <p>同窗們登陸後先修改相關資料</p>
            <p>查詢分數,有疑問諮詢管理員</p>
            <p><a class="btn btn-primary btn-lg" href="/login" role="button">點擊登陸</a></p>
        </div>
    </div>
@stop

@section 有兩種寫法：

第一種當內容比較短時能夠直接寫，結尾不用@stop結束符

      
@section('title', '頁面標題')

第二種當顯示內容比較多時，能夠分開來寫，即下面這種：

      
@section('content')    // 這部分替換app裏的代碼，有開始就會有結束，因此一個section 對應一個stop
 <h1>生如夏花之絢爛</h1>
 <p>死如秋葉之靜美</p>
@stop

瀏覽器端顯示：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。