完善模板 · laravel (laravel9) 新手入門實戰官網實現

# 完善模板 ## 增加模板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')  <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` 這樣可以節省很多代碼