得推企业网站模板开发教程之公共页面制作
公共页面包括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>