標籤

BAT (38) shell (34) Virtual Machine (33) Xubuntu (29) acfs (25) PHP (24) CentOS (21) Virtul Box (20) 編輯器 (17) 資料庫 (15) lubuntu (13) windows (13) CPP (12) ubuntu (12) chrome (11) laravel (10) Docker (9) Python (9) 5A88 (7) VMware (6) 資料結構 (6) Javascript (5) Node (5) Proxmox VE (5) 公告系統 (5) 程式積木 (5) Android Studio (4) ANN (3) OB2D2016x64 (3) Xoops (3) clonezilla (3) samba (3) 公文 (3) 其他 (3) 硬體 (3) API (2) Android (2) AppInvent2 (2) Html (2) Hyper-V (2) Nas (2) botnet (2) mbot (2) swift (2) wordpress (2) 樣板 (2) 防火牆 (2) AD的應用 (1) Ansible (1) Arduino (1) CSS (1) GitLab (1) HA Proxy (1) LegoEV3 (1) PowerShell (1) Scratch (1) VM (1) XenServer (1) kotlin (1) linuxmint (1) lxc (1)

2016年12月11日 星期日

laravel 5.3 View 、Blade 樣板引擎使用方法 與 樣板製作和抽離

壹、View觀念:
     一、larvel 是以MVC為基底設計的框架,所有的View都放在resources/views資料夾底下
     二、所有View的檔名都以*.php為結尾,檔案內容就是一般的HTML程式碼
     三、當要顯示對應的頁面時,只要透過View()這個helper function 就可以將內容從Router回傳
             至使用者端。特別注意路徑要設定正確,中間資料夾可用[.]區隔,且不需要加副檔名                php
             語法:Route::get('{uri}',function(){ return view('{path.view_file_name}');});
             例子:// routes/web.php
             Route::get('/',function(){ return view('home.index')});
     四、若有分類需求,可任意開子資料夾整理
             例子://resources/views/home/index.php
             <!doctype html>
             <html>
                 <head><!-- 略 --></head>
             <body>
                        <h1>Home</h1>
             </body>
             </html>

貳、Blade樣板引擎
      一、觀念:
        laravel 的樣板引擎名為 Blade,只要將原本放在 resources/views 底下的*.php的檔名改成     
        *.blade.php.畫面輸出時,laravel自動就會使用Blade語法分析器來處理這些檔案的內容.
      二、規劃流程:
           (一).先定義主Layout: 
                  1.在 resources/views 建立一個 layouts/master.blade.php
                  2.主Layout 裡定義全站樣板的結構,以及要讓子Layout繼承填充的區塊位置
                     {{-- resources/views/layouts/master.blade.php --}}
                       <html>
                                <head>
                                     <title>App Name - @yield('title')</title>
                               </head>
                               <body>
@include('layouts.partials.navigation')
<div>
                                      @yield('content')
</div>
                               </body>
                       </html>

         (二).定義共用區塊的內容:
               1.在resources/views/layouts 底下新增資料夾partials,裡面新增navigation.blade.php,並
                  填入導覽列內容
                      {{-- resources/views/layouts/partials/navigation.blade.php --}}
                       <nav>
                                <div>
                                      <ul>
                                           <li>
                                             <a href="{{ route('layouts.master') }}">關於本站</a>
                                           </li>
                                           <li>
                                              <a href="{{ route('layouts.partials.navigation') }}">文章總覽</a>
                                           </li>
                                           <li>
                                              <a href="{{ route('layouts.partials.notification') }}">熱門文章</a>
                                           </li>                
                                      </ul>
                               </div>
                       </nav>

          (三).定義子Layout裡使用主Layout做延伸:
                1.在resources/views裡新增 *.blade.php
                2.子Layout要先宣告繼承的主Layout,並將要填充的區塊內容複寫進去
                    @extends('layouts.master')
                    @section('title','Page Title')
                    @section('content')
                        <p>This is my body content.</p>
                    @endsection
 

      三、寫在routes/web.php的內容為
        Route::get('/', ['as'=>'layouts.master',function () {
                  return view('layouts.master');
         }]);
        Route::get('/partials/navigtion', ['as'=>'layouts.partials.navigation',function () {
                  return view('layouts.partials.navigation');
         }]);
        Route::get('/partials/notification', ['as'=>'layouts.partials.notification',function () {
                  return view('test');
         }]);
      四、顯示內容為


      五、Blade 語法
        (一) @ 開頭:
              1.樣板控制   @yield@extends
                 @yield('{section name}')
                 @include('{view name}')
                 @extends('{view name}')
                 @section('{yield name}','{string}')
                 @section('{yield name}')
                 @endsection

              2.程式邏輯控制 @if@foreach
               (1)邏輯控制
                    @if 、@elseif 、@else、 @endif
               (2)迴圈
                    @for($i=0;$i<10;$i++)、@endfor
                    @foreach(@posts as $post)、@endforeach
                    @forelse(@posts as $post)、@empty、@endforelse

        (二) {   開頭:
              1.輸出內容 {{{!!           
              (1).{{  $string  }}  輸出前會做跳脫,安全預設  {{ $name or 'Default' }}
              (2).{!! $html !!} 輸出不會做跳脫,可用於印出HTML
              (3)萬一真的要顯示 {{ 的時候怎麼辦?用@{{ raw data }}

              2.註解 {{--

       (三) 命名慣例
               慣例僅供參考,Laravel 沒有強制規定要怎麼用,只要符合Laravel原生設定就可以了
                1.主樣板放在 layouts 資料夾內
                2.區塊樣板放在 partials 資料夾內
                3.子樣板放在 {resources} 資料夾內

      六、傳遞資料至View顯示
        把變數傳給View,讓View顯示動態資料
        // routes/web.php
        Route::get('/',function(){
               $data = [ 'name' => 'Simon' ];
               return view('home.index', $data );
         });

        // resources/views/home/index.blade.php
        <!doctype html>
        <html>        
               <head><!-- 略 --></head>
               <body>
                    <h1>My name is {{ $name }} </h1>
               </body>
        </html>
                                         最後結果
參、樣板製作和抽離
       一、調整views結構與命名
參考資料來源:
1.View 與 Blade 樣板引擎

沒有留言:

張貼留言

在 Windows 10 x64 1909版,使用BAT快速安裝公文系統與人事服務網(自然人憑證)版

相關內容移往 https://skjhcreator.blogspot.com/2021/02/windows-10-x64-1909bat.html