# 完善模板
## 增加模板html
### 复制对应的html到公共模板文件中
`_footer.blade.php` ：
~~~php
<div class="footer" style=" margin-top:0; clear: left;">
<div class="footermid">
<div class="foitem">
<dl>
<div class="titlesaml">关于我们</div>
<div class="class">
<ul>
<li><a href="">公司介绍</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">市场合作</a></li>
<li><a href="">企业文化 </a></li>
</ul>
</div>
</dl>
...
</div>
<div style="text-align:center;margin-bottom:10px;" class="footermid"> 版权所有 浙江点达国际物流有限公司 Copyright © 2006- 2020
All Right Reserved.备案号： <a href="https://beian.miit.gov.cn" target="_blank">浙ICP备2021008200号
</a></div>
</div>
</div>
~~~
`_header.blade.php` ：
~~~php
<div class="top_on">
<div class="top">
<div class="topblock">
<div class="logo">
<img src="{{ asset('static/image/201709211445333222.jpg') }}" width="373" height="60"/>
</div>
<div class="menu">
<ul>
<li style="font-size: 16px; font-weight: bold;" onmouseover="myex_mopen(this,'menu_li_div1')"
onmouseout="myex_mclosetime(this)">
<a href="">帮助中心</a>
<div class="xiala" id="menu_li_div1" style="display:none;z-index:999">
<dd class='xiiem'><a href="" title="">新手指南</a></dd>
<dd class='xiiem'><a href="" title="">行业新闻</a></dd>
<dd class='xiiem'><a href="" title="">禁运物品</a></dd>
<dd class='xiiem'><a href="" title="">物流知识</a></dd>
</div>
</li>
<li style="font-size: 16px; font-weight: bold;"><a href="" title="" id="NavNow">首页</a></li>
</ul>
</div>
</div>
</div>
</div>
~~~
`_kefu.blade.php` ：
~~~html
<script src="http://code.54kefu.net/kefu/js/b23/1083023.js" type="text/javascript" charset="utf-8"></script>
~~~
`_slider.blade.php` ：
~~~php
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li style="position: absolute; left: 0; top: 0; display: list-item;">
<a title="" target="_blank" href="#">
<img width="100%" height="360" alt="" style="background: url({{ asset('static/image/20170920074835719.jpg') }}) no-repeat center;" src="{{ asset('static/image/alpha.png') }}">
</a>
</li>
<li style="position: absolute; left: 0; top: 0; display: none;">
<a title="" target="_blank" href="#">
<img width="100%" height="360" alt="" style="background: url({{ asset('static/image/201709200748559643.jpg') }}) no-repeat center;" src="{{ asset('static/image/alpha.png') }}">
</a>
</li>
<li style="position: absolute; left: 0px; top: 0px; display: none;">
<a title="" target="_blank" href="#">
<img width="100%" height="360" alt="" style="background:url({{ asset('static/image/201709200748438911.jpg') }}) no-repeat center;" src="{{ asset('static/image/alpha.png') }}">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:;">Previous</a></li>
<li><a class="flex-next" href="javascript:;">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li class="active"><a>1</a></li>
<li class=""><a>2</a></li>
<li class=""><a>3</a></li>
</ol>
</div>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 3000,
delay: 400,
event: 'hover',
auto: true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});
})
</script>
~~~
`_app.blade.php` ：
~~~php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@yield('title')</title>
<meta name="keywords" content="@yield('keywords')">
<meta name="description" content="@yield('description')"/>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" media="screen" />
{{-- 公共css--}}
<link href="{{ asset('static/css/style.css') }}" rel="stylesheet" type="text/css" />
{{-- 页面自定义css--}}
@yield('css')
<script src="{{ asset('static/javascript/jquery-1.10.2.min.js') }}" type=""></script>
<script src="{{ asset('static/javascript/slider.js') }}" type=""></script>
</head>
<body>
@include('index.layouts._header')
<div class="content_on">
@include('index.layouts._slider')
<div class="content_body">
<div class="content">
@yield('content')
</div>
</div>
</div>
@include('index.layouts._footer')
@include('index.layouts._kefu')
{{-- 页面自定义js--}}
@yield('js')
<!-- dd menu -->
<script type="text/javascript">
var index = {
initPage: function() {
var self = this;
self.initBtn(self);
},
initBtn: function(self) {
var english = ["Hello", "June"];
var chinese = [];
$(".content").children(".yes").each(function(i, item) {
var pag_val = $.trim($(item).text());
chinese.push(pag_val);
});
$("button").click(function() {
if ($.trim($(this).text()) === "中文") {
$(this).text("english")
$(".content").children(".yes").each(function(i, item) {
$(item).text(chinese[i]);
});
} else {
$(this).text("中文");
$(".content").children(".yes").each(function(i, item) {
$(item).text(english[i]);
});
}
})
}
};
$(function() {
index.initPage();
})
var timeout = 100;
var closetimer= 0;
var ddmenu = null;
var ddmenuitem = null;
// open hidden layer
function myex_mopen(obj,id)
{
if(ddmenu != null) {
ddmenu.className = '';
}
ddmenu = obj;
ddmenu.className="curt";
// cancel close timer
myex_mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.display = 'none';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.display = 'block';
}
// close showed layer
function myex_mclose()
{
if(ddmenuitem != null) {
ddmenuitem.style.display = 'none';
}
if(ddmenu != null) {
ddmenu.className = '';
}
}
// go close timer
function myex_mclosetime(obj)
{
closetimer = window.setTimeout(myex_mclose, timeout);
}
// cancel close timer
function myex_mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = myex_mclose;
// -->
</script>
</body>
~~~
`_index.blade.php` ：
~~~php
@extends('/index/layouts.app')
@section('title','')
@section('keywords', '')
@section('description', '')
@section('css')
@stop
@section('content')
<div class="page">
<div class="contblock" style="padding-top:15px;">
<div class="title">为什么选择我们</div>
<div class="produ">
<dl>
<dt class="pic"><img src="{{ asset('static/image/pic1.jpg') }}" width="114" height="117" alt=""/></dt>
<dd class="ptitle">专业电商物流服务商 </dd>
<dd class="ptext">多年来专注于跨国电子商务物流运营，以专业的IT团队和高质量的操作团队为支撑，整合优质承运商资源和外贸电商的销售平台，为电子商务用户提供全方位物流服务。每日数万包裹通过我们发往全球。</dd>
</dl>
<dl style="float:right; padding-right:0;">
<dt class="pic"><img src="{{ asset('static/image/pic2.jpg') }}" width="114" height="117" alt=""/></dt>
<dd class="ptitle">节省费用 </dd>
<dd class="ptext">我们与全球知名国际快递公司拥有良好的合作关系，通过我们寄送包裹物流成本可以节省20-80%。系统价格每日更新，用户可在线预算报价、方便比对、便于选择适合您的服务。</dd>
</dl>
<dl>
<dt class="pic"><img src="{{ asset('static/image/pic3.jpg') }}" width="114" height="117" alt=""/></dt>
<dd class="ptitle">服务多样性 </dd>
<dd class="ptext">网站汇集30多个行业优质稳定速递服务，覆盖全球240多个国家。自主开发多条国际专线，价格和速度都具竞争力，同时我们提供专业的电子商务仓储服务，储存、分拣、包装、配送一站式物流服务。</dd>
</dl>
<dl style="float:right; padding-right:0;">
<dt class="pic"><img src="{{ asset('static/image/pic4.jpg') }}" width="114" height="117" alt=""/></dt>
<dd class="ptitle">系统支持 </dd>
<dd class="ptext">针对用户特点自主研发管理系统，业务流程化操作，人性化系统界面，使用简单，管理高效。与ebay、速卖通、亚马逊多平台订单同步，跨平台物流统一管理，API数据接口自由对接用户系统。</dd>
</dl>
</div>
</div>
<div class="contblock">
<div class="brand">
<dl >
<dt class="bpic"><img src="{{ asset('static/image/logo1.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext">如果你是ebay卖家，系统自动获取ebay订单，自动标记发货，准确、安全、便捷</dd>
</dl>
<dl>
<dt class="bpic"><img src="{{ asset('static/image/logo2.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext">如果你是amazon卖家系统自动获取店铺订单，自动标记发货，准确、安全、便捷</dd>
</dl>
<dl>
<dt class="bpic"><img src="{{ asset('static/image/logo3.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext">如果你是速卖通卖家，系统自动获取店铺订单，自动标记发货，准确、安全、便捷</dd>
</dl>
<dl>
<dt class="bpic"><img src="{{ asset('static/image/logo4.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext">如果你是dhgate卖家，系统自动获取店铺订单，自动标记发货，准确、安全、便捷</dd>
</dl>
<dl>
<dt class="bpic"><img src="{{ asset('static/image/logo5.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext">如果你是wish卖家，系统自动获取店铺订单，自动标记发货，准确、安全、便捷</dd>
</dl>
<dl style="border:0;">
<dt class="bpic"><img src="{{ asset('static/image/logo6.jpg') }}" width="150" height="46" alt=""/></dt>
<dd class="btext" style="padding-right:0;">如果您的团队拥有开发能力，可以使用我们免费的API资源，开发所需功能</dd>
</dl>
</div>
</div>
</div>
@stop
@section('js')
@stop
~~~
> 因为网站写的代码比较乱 可以先把不用的注释删除掉 然后一些简单的前端报错可以借助编辑器改正 去掉a链接的地址 循环的代码可以只留一个即可
> 模板里面的 `img、css、js` 的 路径 可以使用 `laravel` 的 `asset` 方法补全
> 例如 `<script src="./javascript/jquery-1.10.2.min.js" type=""></script>` 可以改为 ` <script src="{{ asset('static/javascript/jquery-1.10.2.min.js') }}" type=""></script>`
> 模板用到的重要方法
> >`@include`是 Blade 提供的视图引用方法，可通过传参一个具体的文件路径名称来引用视图。
> >`@section`指令定义内容的一部分，而`@yield`指令用于显示给定部分的内容。
> >`@extends`Blade 指令指定子视图应「继承」的布局
后面写视图文件的话 都将和 `index.blade.php` 的格式一样 直接继承 `app.blade.php` 这样可以节省很多代码