靜態首頁 · TP5常用代碼

> 知識點 1、配置前端目錄 2、sublime text 3常用技巧 3、Thinkphp5無法設置模板路徑 4、模塊設計 5、后臺修正一些功能 [TOC] ## 一、配置前端目錄和文件 ### 1、配置文件文件位置：application\config.php ~~~ // 視圖輸出字符串內容替換 'view_replace_str' => [ '__INDEX__' => '/static/index', ], ~~~ ### 2、前端樣式圖片 static\index\default\*.* ### 3、build生成前端系統目錄 ~~~ // 定義index模塊的自動生成 'index' => [ '__file__' => ['common.php'], '__dir__' => ['behavior', 'controller', 'model', 'view'], 'controller' => ['Index'], 'model' => [], 'view' => ['index/index'], ], ~~~ ### 4、首頁基礎模板 ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="keywords" content="雪狐CMS內容管理系統"> <meta name="description" content="雪狐CMS內容管理系統"> <title>雪狐CMS內容管理系統</title> <link rel="shortcut icon" href="./favicon.ico"> <link rel="apple-touch-icon" href="__INDEX__/default/images/favicon.png" sizes="114x114">  <link rel="stylesheet" type="text/css" href="__INDEX__/default/css/autoptimize.css" /> <link rel="stylesheet" type="text/css" href="__INDEX__/default/plugins/font-awesome-4.7.0/css/font-awesome.min.css"> <script type='text/javascript' src='__INDEX__/default/js/push.js'></script> <script type='text/javascript' src='__INDEX__/default/js/jquery/jquery.js'></script> <script type='text/javascript' src='__INDEX__/default/js/jquery/jquery-migrate.min.js'></script> <script type='text/javascript' src='__INDEX__/default/plugins/nix-gravatar-cache/js/main.js'></script> <script type='text/javascript' src='__INDEX__/default/js/jquery.min.js'></script> <script type='text/javascript' src='__INDEX__/default/js/scrollmonitor.js'></script> <script type='text/javascript' src='__INDEX__/default/js/slides.js'></script> <script type='text/javascript' src='__INDEX__/default/js/echo.min.js'></script> <script type='text/javascript' src='__INDEX__/default/js/script.js'></script> <script type='text/javascript' src='__INDEX__/default/js/flexisel.js'></script> </head> <body> </body> </html> ~~~ ## 二、sublime text 3常用技巧 ### （一）sublime text 3快速生成html 1、Ctrl + N，新建一個文檔； 2、Ctrl + Shift + P，打開命令模式，再輸入 sshtml 進行模糊匹配，將語法切換到html模式； 3、輸入 !，再按下 Tab鍵或者 Ctrl + E ，就能快速打開HTML5的整體結構。 ### （二）sublime Text 3 emmet自定義HTML模板 1、下載Emmet https://github.com/sergeche/emmet-sublime 2、打開sublime Package程序包目錄。windows一般在C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages\下。在Package目錄中創建Emmet目錄,并將下載的文件解壓復制到此目錄 3、Emmet/emmet/snippets.json中可以配置HTML模板內容. a)找到html.abbreviations.doc即可定義HTML中header和body標簽中存放內容. b)html.abbreviations.doc字符串中可以應用變量,變量定義在variables中,字符串中使用使用${變量名}即可. 4、定義后重啟sublime,創建HTML文件,輸入!或html:5,按下tab鍵即可. ## 三、Thinkphp5無法設置模板路徑 ThinkPHP 5 簡明開發手冊 http://www.hmoore.net/thinkphp/thinkphp5-guide/90117 ThinkPHP模板替換與系統常量及應用實例教程 https://www.jb51.net/article/54217.htm ThinkPHP5的debug配置和視圖輸出字符串內容替換 https://blog.csdn.net/SchopenhauerZhang/article/details/70149088?locationNum=10&fps=1 TP5.0學習筆記---模板變量輸出、替換和賦值篇 https://blog.csdn.net/self_realian/article/details/75214922 tp5新手村：自定義模板替換規則如__PUBLIC__ http://www.thinkphp.cn/topic/40122.html TP5中模板內容的替換和全局配置 https://blog.csdn.net/BearKChan/article/details/80915916 ## 四、模塊設計 ### （一）wap菜單和搜索 ~~~ <span class="nav-search"><i class="fa fa-search"> </i></span> <div id="site-nav-wrap"> <div id="sidr-close"><a href="#sidr-close" class="toggle-sidr-close">×</a></div> <nav id="site-nav" class="main-nav"> <a href="#" id="navigation-toggle" class="bars"><i class="fa fa-bars"> </i></a> <div> <ul class="down-menu nav-menu"> <li class="current-menu-item"><a rel="nofollow" href="/"><i class="fa fa-home"></i> 首頁</a></li> <li> <a href="#"> 菜單一</a> <ul class="sub-menu"> <li><a href="#"> 子菜單1</a></li> <li><a href="#"> 子菜單2</a></li> <li><a href="#"> 子菜單3</a></li> </ul> </li> <li> <a href="#"> 菜單二</a> <ul class="sub-menu"> <li><a href="#"> 子菜單1</a></li> <li><a href="#"> 子菜單2</a></li> <li><a href="#"> 子菜單3</a></li> </ul> </li> </ul> </div> </nav> </div> <script type='text/javascript' src='__INDEX__/default/js/superfish.js'></script> <script type='text/javascript' src='__INDEX__/default/js/infinite-scroll.js'></script> <script type='text/javascript' src='__INDEX__/default/js/3dtag.js'></script> ~~~ ### （二）向左滾動公告欄 ~~~ <nav class="breadcrumb"> <div class="bull"><i class="fa fa-volume-up"> </i></div> <div id="scrolldiv"> <div class="scrolltext"> <ul> <li class="scrolltext-title"><a href="#" rel="bookmark">公告：歡迎來到雪狐網！</a></li> <li class="scrolltext-title"><a href="#" rel="bookmark">公告：歡迎來到www.xx.cn</a></li> </ul> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#scrolldiv").textSlider({line:1, speed:300, timer:5000}); }); </script> </nav> ~~~ ### （三）幻燈片 ~~~ <div id="content" class="site-content"> <div id="primary" class="content-area"> <main id="main" class="site-main">  <div id="slideshow"> <ul class="rslides" id="slider"> <li><a href="#" rel="bookmark"> <img src="__INDEX__/default/del_img/01.jpg" alt="圖片一"></a> <p class="slider-caption">圖片一</p> </li> <li><a href="#" rel="bookmark"> <img src="__INDEX__/default/del_img/02.jpg" alt="圖片二"></a> <p class="slider-caption">圖片二</p> </li> <li><a href="#" rel="bookmark"> <img src="__INDEX__/default/del_img/03.jpg" alt="圖片三"></a> <p class="slider-caption">圖片三</p> </li> <li><a href="#" rel="bookmark"> <img src="__INDEX__/default/del_img/04.jpg" alt="圖片四"></a> <p class="slider-caption">圖片四</p> </li> </ul> </div>  </main> </div> </div> ~~~ ### （四）圖片信息 ~~~ <article class="post type-post status-publish format-standard hentry"> <figure class="thumbnail"> <a href="#"> <img src="__INDEX__/default/del_img/004.jpg" alt=""></a> <span class="cat"> <a href="#">分類</a></span> </figure> <header class="entry-header"> <h2 class="entry-title"><a href="#" rel="bookmark">測試標題111</a></h2> </header> <div class="entry-content"> <div class="archive-content">摘要信息</div> <br/> <span class="title-l"></span> <span class="entry-meta"> <span class="date">2017-05-14 15:41 </span> <span class="views"> 閱讀 123 </span> <span class="comment"><a href="#"> <i class="fa fa-comment-o"></i> 查看評論</a></span> </span> <div class="clear"></div> </div> <span class="entry-more"> <a href="#" rel="bookmark">閱讀全文</a></span> </article> ~~~ ### （五）圖片展示 ~~~ <div class="line-four"> <div class="xl4 xm4"> <div class="picture-h"> <figure class="picture-h-img"><a href="#"><img src="__INDEX__/default/del_img/006.jpg" alt=""></a></figure> <h3 class="picture-h-title"><a href="#" rel="bookmark">測試圖片111234567890000000000000</a></h3> </div> </div> <div class="xl4 xm4"> <div class="picture-h"> <figure class="picture-h-img"><a href="#"><img src="__INDEX__/default/del_img/007.jpg" alt=""></a></figure> <h3 class="picture-h-title"><a href="#" rel="bookmark">測試圖片111</a></h3> </div> </div> <div class="xl4 xm4"> <div class="picture-h"> <figure class="picture-h-img"><a href="#"><img src="__INDEX__/default/del_img/008.jpg" alt=""></a></figure> <h3 class="picture-h-title"><a href="#" rel="bookmark">測試圖片111</a></h3> </div> </div> <div class="xl4 xm4"> <div class="picture-h"> <figure class="picture-h-img"><a href="#"><img src="__INDEX__/default/del_img/009.jpg" alt=""></a></figure> <h3 class="picture-h-title"><a href="#" rel="bookmark">測試圖片111</a></h3> </div> </div> <div class="clear"></div> </div> ~~~ ### （六）邊欄內容 #### 1、本站推薦 ~~~ <div id="sidebar" class="widget-area"> <aside class="widget widget_hot_commend"> <h3 class="widget-title"><i class="fa-bars fa"></i>本站推薦</h3> <div id="hot" class="hot_commend"> <ul> <li> <figure class="thumbnail"><a href="#"><img src="__INDEX__/default/del_img/001.jpg" alt=""></a></figure> <div class="hot-title"><a href="#">測試標題1111</a></div> <div class="views">閱讀 111</div> <i class="fa-thumbs-o-up fa"> 0</i> </li> <li> <figure class="thumbnail"><a href="#"><img src="__INDEX__/default/del_img/002.jpg" alt=""></a></figure> <div class="hot-title"><a href="#">測試標題1111</a></div> <div class="views">閱讀 111</div> <i class="fa-thumbs-o-up fa"> 0</i> </li> <li> <figure class="thumbnail"><a href="#"><img src="__INDEX__/default/del_img/003.jpg" alt=""></a></figure> <div class="hot-title"><a href="#">測試標題1111</a></div> <div class="views">閱讀 111</div> <i class="fa-thumbs-o-up fa"> 0</i> </li> </ul> <div class="clear"></div> </div> </aside> </div> ~~~ #### 2、熱門文章 ~~~ <aside class="widget widget_hot_post"> <h3 class="widget-title"><i class="fa-bars fa"></i>熱門文章</h3> <div id="hot_post_widget"> <ul> <li><span class="li-icon li-icon-1">1</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-2">2</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-3">3</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-4">4</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-5">5</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-6">6</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-7">7</span><a href="#">熱門文章11111111</a></li> <li><span class="li-icon li-icon-8">8</span><a href="#">熱門文章11111111</a></li> </ul> </div> </aside> ~~~ #### 3、分類目錄 ~~~ <aside class="widget widget_categories"> <h3 class="widget-title"><i class="fa-bars fa"></i>分類目錄</h3> <ul> <li class="cat-item"> <a href="#">分類1</a></li> <li class="cat-item"> <a href="#">分類1</a></li> <li class="cat-item"> <a href="#">分類1</a></li> <li class="cat-item"> <a href="#">分類1</a></li> </ul> <div class="clear"></div> </aside> ~~~ ### （七）圖文列表（一行兩列） ~~~ <div class="line-big"> <div class="xl3 xm3"> <div class="cat-box"> <h3 class="cat-title"><i class="fa-bars fa"></i><a href="#">標題</a></h3> <div class="clear"></div> <div class="cat-site"> <h2 class="entry-title"><a href="#" rel="bookmark">文章標題</a></h2> <figure class="thumbnail"><a href="#"><img src="__INDEX__/default/del_img/010.jpg" alt=""></a></figure> <div class="cat-main">摘要內容。。。</div> <div class="clear"></div> <ul class="cat-list"> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> </ul> </div> </div> </div> <div class="xl3 xm3"> <div class="cat-box"> <h3 class="cat-title"><i class="fa-bars fa"></i><a href="#">標題</a></h3> <div class="clear"></div> <div class="cat-site"> <h2 class="entry-title"><a href="#" rel="bookmark">文章標題</a></h2> <figure class="thumbnail"><a href="#"><img src="__INDEX__/default/del_img/011.jpg" alt=""></a></figure> <div class="cat-main">摘要內容。。。</div> <div class="clear"></div> <ul class="cat-list"> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> <span class="list-date">05-16</span> <li class="list-title"><a href="#" rel="bookmark">標題。。。</a></li> </ul> </div> </div> </div> <div class="clear"></div> </div> ~~~ ### （八）底部導航 ~~~  <div id="footer-widget-box"> <div class="footer-widget"> <aside class="widget widget_nav_menu"> <div> <ul class="menu"> <li class="menu-item"><a href="#"><i class="fa-indent fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-wrench fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-file-code-o fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-database fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-leaf fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-desktop fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-star-half-o fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-envelope-o fa"></i><span class="font-text">測試1</span></a></li> <li class="menu-item"><a href="#"><i class="fa-pencil-square-o fa"></i><span class="font-text">測試1</span></a></li> </ul> </div> <div class="clear"></div> </aside> <div class="clear"></div> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info">Copyright <span>©</span> 雪狐網版權所有滬ICP備12345678號</div> </footer> ~~~ ### （九）上下移動快捷按鈕 ~~~ <ul id="scroll"> <li><a class="scroll-t" title="返回頂部"><i class="fa-angle-up fa"></i></a></li> <li><a class="scroll-b" title="返回底部"><i class="fa-angle-down fa"></i></a></li> <li><a class="qr" title="二維碼"><i class="fa-qrcode fa"></i></a></li> </ul> ~~~ ### （十）顯示網站二維碼 ~~~ <span class="qr-img"><img src="__INDEX__/default/images/weixin.png" alt="雪狐網"></span> ~~~ ## 五、后臺修正一些功能 ### （一）模型預覽與內容添加不一致問題描述：添加內容時，可以彈出上傳文件和圖片，單模型預覽時不能實現原因分析：在實現添加內容時，對一些js文件進行了修改解決辦法：將content模塊下的add.html中相應代碼，替換到model_field中的index.html 最后代碼 #### 1、頭部文件 ~~~ <link rel="shortcut icon" href="favicon.ico"> <link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="__ADMIN__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="__ADMIN__/css/plugins/iCheck/custom.css" rel="stylesheet"> <link href="__ADMIN__/css/animate.min.css" rel="stylesheet"> <link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet"> <link href="__ADMIN__/plugins/webuploader-0.1.5/webuploader.css" rel="stylesheet"> <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/ajaxfileupload.js"></script> <link rel="stylesheet" href="__ADMIN__/css/admin.css"> <link href="__ADMIN__/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> ~~~ #### 2、底部文件 ~~~ <script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script> <script src="__ADMIN__/js/content.min.js?v=1.0.0"></script> <script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script> <script src="__ADMIN__/js/plugins/layer/layer.min.js"></script> <script src="__ADMIN__/js/layer_hplus.js"></script> <script src="__ADMIN__/js/plugins/layer/layer.min.js"></script> <script src="__ADMIN__/js/plugins/prettyfile/bootstrap-prettyfile.js"></script> <script src="__ADMIN__/js/plugins/cropper/cropper.min.js"></script> <script src="__ADMIN__/js/demo/form-advanced-demo.min.js"></script> <script src="__ADMIN__/js/plugins/layer/laydate/laydate.js"></script> ~~~ #### 3、JS實現 ~~~ <script> function field_setting(formtype){ $.getJSON("{:url('field_setting')}",{fieldtype:formtype},function(data){ $('#setting').html(data.setting); }); } </script> ~~~ ### （二）更新數據為了測試前端內容調用，對模型數據、內容數據進行重新更新，具體內容這里不詳述。