03-16-2019

[email protected]的使用

 

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

所以我們的模板必須用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的說明喔~