静态首页 · 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 简明开发手册 https://www.kancloud.cn/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> ~~~ ### （二）更新数据为了测试前端内容调用，对模型数据、内容数据进行重新更新，具体内容这里不详述。