得推企业网站模板开发教程之公共页面制作
公共页面包括head.html header.html footer.html footjs.html 四个文件
一、模板页面正常结构
<!DOCTYPE html> <html> {include file="head.html"} <body> {include file="header.html"} <div class="main-body"> </div> {include file="footer.html"} {include file="footjs.html"} </body> </html>
二、head.html head部分
<head> <meta charset="utf-8"> {if !$site} {get data=site model=site fun=get()} {/if} <title>{if $seo}{$seo.title}{else}{$site.title}{/if}</title> <link href="/plugin/dt-ui/dt-ui-pc.css" rel="stylesheet" /> <link href="/plugin/dt-ui/dt-ui-pc-header.css" rel="stylesheet" /> <link href="//at.alicdn.com/t/font_811242_0zhbr243mw7c.css" rel="stylesheet" /> <link href="{$skins}css/app.css" rel="stylesheet" /> <script src="/plugin/jquery/jquery.js"></script> </head>
三、header.html 头部导航部分
页面导航对应的数据:导航管理PC导航
<div class="header"> <div class="header-box"> <img src="{$site.logo|images_site}" class="header-logo" alt="deituiCMS"> {get data=navList model=navbar fun=navlist(3)} <div class="header-navbar"> <a href="/" class="header-navbar-item {if $headerNav eq 'index'}header-navbar-active{/if}">首页</a> {foreach item=c from=$navList} <div class="header-navbar-item {if $headerNav eq 'down'}header-navbar-active{/if}"> <a class="cl-white" href="{$c.link_url}">{$c.title}</a> {if $c.child} <div class="header-navbar-childBox"> {foreach item=cc from=$c.child} <a href="{$cc.link_url}" class="header-navbar-childBox-item">{$cc.title}</a> {/foreach} </div> {/if} </div> {/foreach} </div> </div> <div class="header-navbar-action"></div> </div> <div class="header-row"></div> <script> $(function(){ if($(".header-navbar-active").length>0){ var left=$(".header-navbar-active").offset().left+$(".header-navbar-active").width()/2; }else{ var left=$(".header-navbar-item:eq(0)").offset().left+$(".header-navbar-item:eq(0)").width()/2; } $(".header-navbar-action").css({left:left}); $(document).on("mouseenter",".header-navbar-item",function(){ var w=$(this).width(); $(this).addClass("header-navbar-active").siblings().removeClass("header-navbar-active"); var left=$(".header-navbar-active").offset().left+w/2; $(".header-navbar-action").animate({left:left},"fast"); $(this).find(".header-navbar-childBox").addClass("active") }) $(document).on("mouseleave",".header-navbar-item",function(){ $(this).find(".header-navbar-childBox").removeClass("active") }) $(document).on("click","[gourl]",function(){ window.location=$(this).attr("gourl"); }) }) </script>
三、页面底部
<div style="padding: 40px;background-color: #fff; margin-top: 20px;"> {get data=com model=table_data fun=getData("aboutus")} <div class="main-body"> <div class="flex mgb-10"> <div class="flex-1"> <div class="mgb-10"> {get data=links model=ad fun=listbyno("pc-friendlink")} {foreach item=c from=$links} <a class="cl2 mgr-10" href="{$c.link1}">{$c.title}</a> {/foreach} </div> <div class="mgb-10"> <span class="cl2 mgr-10"> 2021 © </span> <a class="cl2 mgr-10" href="/" target="_blank">{$site.sitename}</a> <a class=" cl2" href="https://beian.miit.gov.cn">{$site.icp}</a> </div> <div class="cl2">技术支持:<a class="cl2" href="https://www.deituicms.com">deituiCMS</a></div> </div> <div class="mgr-10"> <img src="{$com.ewm}.100x100.jpg" class="w100" /> </div> <div> <a href="http://wpa.qq.com/msgrd?v=3&uin={$com.qq}&site=qq&menu=yes" class="btn-small mgb-10 btn-outline-primary">在线客服</a> <div class="cl2 f16 mgb-5">电话:{$com.telephone}</div> <div class="mgb-5 cl2">联系人:{$com.nickname}</div> <div class="mgb-5 cl2">地址:{$com.address}</div> </div> </div> </div> </div>
相关数据调用说明
{get data=com model=table_data fun=getData("aboutus")} 调用扩展表中的关于我们数据 {get data=links model=ad fun=listbyno("pc-friendlink")} 调用广告管理中的友情链接数据
四、footjs.html 底部引入js
<script src="{$skins}js/app.js"></script>