Laravel Basic - 3 - 加入式样和模板

1. 加入样式bootstrap
   到bootstrap site上 download bootstrap 的css 和 js, 下载：Compiled CSS and JS
   下载后展开zip, copy bootstrap.min.css 和 bootstrap.min.js 分别到
   public/css 和 public/js 两个folder下。

2.用extends, includes, yield, section 来分割和组合view的页面展示
在resources/views/ 下创建 layouts， 此处注意目录名都用复数
创建三个文件：
header.blade.php

<h1>Header</h1>

footer.blade.php

<h1>Footer</h1>

index.blade.php

@include('layouts.header')

@yield('center')

@include('layouts.footer')

index中，用include把footer和header组装进来，用yield 标记今后要加入customization 的位置，'center'是一个tag.
这里要留意layouts.header和layouts.footer的写法，因为laravel默认的起点是resources/views,因此一定要加上layouts,且用.做分割

在/resources/views/下创建allproducts.blade.php:

@extends('layouts.index')

@section('center')
<h2>This is the center of the page.</h2>
@endsection

extends将index的内容拷贝进来，section是呼应yield的内容，center是标记呼应的tag，section之间放入要新加入的内容。

组合后的allproducts.blade.php页面

3. 使用template
   从网上下载一些网站用的html， 把header, footer 分别拷贝到header.blade.php和footer.blade.php， 把中间（通常是section)部分拷贝到view 下面组件的页面，例如此例中是allproducts.blade.php

如果原来的template中自带css.js,image,font，也都一起拷贝到public 下。

配合代码，动态嵌入，例如：

<h2 class="title text-center">Features Items</h2>
                        @foreach ($products as $product)
                        <div class="col-sm-4">
                            <div class="product-image-wrapper">
                                <div class="single-products">
                                        <div class="productinfo text-center">
                                            <img src="{{asset('images/home/product1.jpg')}}" alt="" />
                                            <h2>{{$product->price}}</h2>
                                            <p>{{$product->name}}</p>
                                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                                        </div>
                                        <div class="product-overlay">
                                            <div class="overlay-content">
                                                <h2>{{$product->price}}</h2>
                                                <p>{{$product->name}}</p>
                                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                                            </div>
                                        </div>
                                </div>
                                <div class="choose">
                                    <ul class="nav nav-pills nav-justified">
                                        <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
                                        <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endforeach 

4.代入自己的图片文件
自己的图片放入storage/app/public 下（可以自建folder分类）
采用artisan 建立link

php artisan storage:link

再打开public/ 可以看到多了storage/ folder, 图片source被link 过来
同时把image的路径如下修改：

<img src="{{Storage::disk('local')->url('product_images/'.$product->image)}}" alt="{{$product->name}}" />

此时DB中要保证有对应的image名字正确更新，Imagefile的名字从DB读取。product_images/ 是自己加入的subfolder，也可以与image name 合并写入DB中。

加入模板后的页面样子