🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
模版是MVC中比较简单的一块,零云模版默认采用ThinkPHP的模版继承来实现。也就是通过block区块来控制页面的局部内容显示。 关于模版继承的详细讲解请访问http://document.thinkphp.cn/manual_3_2.html#template_extend 注意零云在TP的基础上二次开发支持了PC端和手机端分别使用两套模块,规范是,比如新闻列表PC端模板路径是Application/Cms/View/Pc/Index/list.html,那么对应的手机端模板路径是Application/Cms/View/`Wap`/Index/list.html 一个标准的PC端Bootstrap模板如下: ```html <extend name="$_home_public_layout"> <block name="style"> <style> <!-- 这里写当前页面的CSS--> .example-css { width: 20px; } </style> </block> <block name="main"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="alert alert-danger" role="alert"> <h4>您现在访问的是零云模块:</h4> <p>该页面是为演示页面!</p> </div> </div> </div> </div> </block> <block name="script"> <script type="text/javascript"> // 这里写当前页面的JS </script> </block> ``` 一个标准的手机网端F7模板如下 ```html <extend name="$_home_public_layout"> <block name="style"> <style> <!-- 这里写当前页面的CSS--> .example-css { width: 20px; } </style> </block> <block name="main"> <!-- 这是页面顶部导航条--> <div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="{:U('Home/Index/index', '', true, true)}" class="link back icon-only"> <i class="icon icon-back"></i> </a> </div> <div class="center">{$meta_title}</div> <div class="right"></div> </div> </div> <div data-page="index" class="page page-on-center"> <div class="page-content"> <!-- 这里写页面主体内容 --> </div> </div> </block> <block name="script"> <script type="text/javascript"> // 这里写当前页面的JS </script> </block> ```</extend></extend>