fbpx

今天要製作藍色虛線的積木,藍色積木會牢牢地固定在凹槽中,

所以我們的模板必須用include來表示。

Step1.

製作header、navigation、footer

在resources/views底下新增一個include的資料夾,

並在資料下新增header、navigation、footer的php黨。

先製作我們的header積木,因為我的header有logo,

所以需要放圖檔在我們的資料夾,我們在public底下新增一個images的資料夾,

把圖放進去,那header裡面要怎麼寫呢?

<header class=”bd-header”>

<div class=”bd-header-titles”>

<a class=”navbar-item” href=”{{ route(‘home’) }}”>

<img src=”{{ asset(‘images/LOGO.png’) }}” alt=”我是圖”

width=”81.6″ height=”72″>

</a>

</div>

</header>

再來就是我們的nav,可是我們原本不是就有nav了,為什麼還要再做呢 ?

我們其實沒有要做,只是幫它移出來,原本的nav它是直接寫在我們的模板上,

這樣內容看起來會很長,所以我們把它做成積木,

將中間的…..剪下,貼到我們新增的nav.blade.php,然後把下面那句刪掉。

<a class=”navbar-brand” href=”{{ url(‘/’) }}”>

{{ config(‘app.name’, ‘Laravel’) }}

</a>

在原地加入

<div class=”navbar-start”>

<a class=”navbar-item” href=””>

Portfolio

</a>

<a class=”navbar-item” href=””>

About Me

</a>

</div>

footer的部分因為我沒有圖跟字,所以這邊家的字跟顏色只是為了顯示位置

<footer class=”footer” style=”background:GOLD” >

<div class=”container”>

<P class=”slogon”>.com 2019</p>

</div>

</footer>

Step2.

填入剛剛製作的積木

我們回到dashboard.php,在body裡寫@include(‘include.header’)、

@include(‘include.nav’)、@include(‘include.footer’),

因為我們剛剛的檔案是放在include的資料夾下,所以要寫成include.黨名。

Step3.

測試

打開views/home.blade.php,將上頭的@extends(‘layouts.app’)

改成@extends(‘layouts.dashboard’),然後重整網頁畫面。

會看到剛剛所調整的東西,但因為還沒有進行美化,所以看起醜醜的。

以上是include的操作,下一篇會進行extands的說明喔~

Leave a Reply