[ Laravel ] 初心者之路#07 – Blade 實作

標籤: , , , , , ,

前言

在上一次我們介紹完Larave 的 Views, Blade Templates後,今天要來帶各位實作看看Blade Teamplates,讓大家可以對於這部分更加熟悉!

準備

templates_download_page

https://startbootstrap.com/template-overviews/business-casual/

麻煩各位先到上面的網址,點選Download,將我們要用到的樣板下載下來

extract_to

下載完後將壓縮檔解壓縮至專案目錄底下的/public下

讓我們看看資料夾內有什麼東西~

templates_intro

現在先進行一下整理,把我們需要用到的檔案放到它該去的地方

為了方便起見,我將startbootstrap-business-casual-gh-pages 簡稱成template

將/public/template/css底下的2個css 全部移到 /public/css

將/public/template/img 這個資料夾移到 /public

將/public/template/vendor/bootstrap 這個資料夾移到 /public

將/public/template/vendor/jquery 這個資料夾移到 /public

將/public/template 底下的4個html 全部移到/resources/views/frontend/

完成後會像下圖一樣

sort out

到這邊我們已經完成事前準備囉!

 

規劃

還記得上次我們將這個網站進行切割,分成了header, navbar, content, footer對吧?

現在我們要來實際建立這些layout

讓我們在/resources/views/frontend底下建立一個資料夾,叫做layouts

然後在/layouts底下建立4個檔案

master.blade.php

header.blade.php

navbar.blade.php

footer.blade.php

好了會像下圖一樣

#07_create_layouts.jpg

 

分類Layouts的內容

接著,我們依序填入這4個layout的內容

先從header.blade.php開始

從index.html中,抓出header的區塊,剪下貼上至header.blade.php

#07_header_01

#07_header_02

再來是navbar.blade.php開始

從index.html中,抓出navbar的區塊,剪下貼上至navbar.blade.php

#07_navbar_01r

#07_navbar_02

再來是footer.blade.php開始

從index.html中,抓出footer的區塊,剪下貼上至footer.blade.php

#07_footer_01

#07_footer_02

最後是master.blade.php開始

從index.html中,抓出content “之外” 的區塊,剪下貼上至master.blade.php

#07_master_01

(我把content的2個section摺疊起來方便各位觀看)

#07_master_02

連結各個Layouts,完成master.blade.php

打開master.blade.php

我們要讓它連結到各個區塊,並且預留content等位置,讓之後不同分頁可以去實作它

現在要將master.blade.php修改成如下圖

#07_finish_master

  • 將 lang 修改為 zh-TW
<html lang="zh-TW">
  • 將 title 內容預留給各分頁實作
@yield('title')
  • 將各個css, js的路徑修改為正確的路徑
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/business-casual.min.css') }}" rel="stylesheet">
<script src="{{ asset('jquery/jquery.min.js') }}"></script>
<script src="{{ asset('bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  • include對應區塊到對的位置,並預留content給各分頁實作
@include('frontend.layouts.header')
@include('frontend.layouts.navbar')
@yield('content')
@include('frontend.layouts.footer')

 

到這邊,Layouts的部分就結束囉!

 

建立各個分頁的View

讓我們把4個html去重新命名

將 .html 改為 .blade.php

#07_html_to_bladephp.jpg

然後先開啟index.blade.php

  • 繼承master.blade.php
@extends('frontend.layouts.master')
  • 填入預留的title
@section('title', 'Home')
  • 填入預留的content
@section('content')
<!-- Content 略... --!>
@endsection

修改完後應該長得像這樣:

#07_index_view.jpg

讓我們先到/routes/web.php來更改一下route來測試一下吧!

Route::get('/', function () {
    return view('frontend.index');
})->name('home');

此時用瀏覽器開啟看看~

#07_done

完成!

 

接下來另外3個分頁就讓各位自己練習看看

保留content的部分

然後繼承master.blade.php

並且填入預留的title, content

 

最後的修正

navbar的鏈結還需要去更新

讓我們先把web.php再加上其他的頁面route

Route::get('about', function () {
    return view('frontend.about');
})->name('about');
 
Route::get('products', function () {
    return view('frontend.products');
})->name('products');

Route::get('store', function () {
    return view('frontend.store');
})->name('store');
web.php會長得像這樣

#07_routes.jpg

然後更新navbar.blade.php

#07_update_navbar

如此一來,你就完成了一個網站前端的部分啦~

 

加入版本控制

最後,讓我們把到目前完成的,加入到版本控制當中

ctrl + ` 叫出命令列

輸入

git add .
git commit -m "Add front-end layouts, view"

 

總結

讓我們複習一下今天做了些什麼

  • 下載現有template
  • 規劃template各區塊並拆分
  • 建立layouts
  • 繼承layouts,並填入內容
  • 使用git將專案加入版本控制

 

這次的教學就在這邊告一個段落

如果各位有任何問題,歡迎在下面留言

See you!



相關文章

初心者之路#04 – 工具準備 (VS Code, Git) 所謂工欲善其事,必先利其器,初心者要練等打怪,也要先有武器裝備。今天要跟各位介紹的,是我們在開發專案時會使用到的工具,包含了文字編輯器- Visual Studio Code,以及版本控制系統- Gi...
初心者之路#03 – Laravel專案結構 當大家使用VS Code, Sublime或是Atom開啟Laravel的專案時,會看到Laravel的文件夾、檔案好多好複雜,可能開始覺得頭昏眼花、噁心想吐。別擔心,今天就要來帶大家認識Larave...
初心者之路#06 – Views, Blade Templates 前言 之前在Laravel專案結構中跟各位介紹過MVC的概念,View就是在MVC中的V,負責的是網站界面的呈現,也是我們所熟知的前端。今天要來跟各位介紹的就是在Laravel中怎麼管理View,以...
初心者之路#05 – Laravel Routing 路由控制... 前言 在還沒有接觸Laravel或其他框架之前,你寫出來的php網站,網址是不是像這樣: https://mywebsite/index.php https://mywebsite/logi...