帝国cms模板开发教程（四）：帝国cms页面头部模板开发

编辑：覃师宁来源：qinshining.com时间：2020-11-25 14:57:08阅读量：229

帝国cms模板页面的开发和其他建站程序一样，比如wordpress程序，也是对页面进行拆分调用，然后使用函数在独立的页面进行调用，这样就避免了在各个模板开发过程，重复写入头部、尾部、侧边栏等公共部分内容

比如首页，也是页面头部、页面尾部、首页主体（列表页+侧边栏形式）构成，所以我们先进行页面头部的开发。下面一起来学习帝国cms页面头部的开发学习吧！

如之前课程介绍，本套帝国模板制作开发过程，使用的是蒙爱明博客提供的《博客人生》2.0静态网页模板

覃师宁博客提供《博客人生》模板制作演示站链接：http://ecms.qinshining.com/

目前这套帝国程序演示站有的新闻系统模型模板、图片系统模型模板、站长系统模型、淘客系统模型四个系统

后续还会增加小说站、故事大全站、软件站、企业站、诗词歌曲站、问答站等系统模型模板

感兴趣的朋友可以先打开查看模板样式，再进行学习

1.先了解网页头部常见元素

网页头部常见元素包括：站点名称（logo）、导航、注册/登录、搜索按钮

如图登录前的页头

会员登录后的页头

同时、页头部分隐含源代码书写一些关键内容调用与写法：TDE标签调用（title、keywords、description代码调用）、结构化数据、引入css、js文件的写法，这些在下文详细介绍

2.提取页头代码复制粘贴到公共变量

帝国cms页头官方模板提供的存放位置在公共变量--页面头部中，我们也延续这个写法

路径：后台--模板--公共模板变量--管理模板变量--页面头部

提取页头代码，复制到上述路径

3、页面头部调用代码：

然后在提取代码的位置，粘贴上公共变量的页面头部变量，代码如下

[!--temp.header--]

4.页面头部代码修改

4-1.网站ico图标

4-2、网页三大标签：标题、关键词、描述

以下是常规调用方法：也就是[!--pagetitle--]：网站名称、[!--pagekey--]：页面关键字、[!--pagedes--]：页面描述

<title>[!--pagetitle--]</title><meta name="keywords" content="[!--pagekey--]" /><meta name="description" content="[!--pagedes--]" />

写法可以参照：百度官方标题规范：https://ziyuan.baidu.com/college/articleinfo?id=2728

当然，为了SEO的需要，我们需要对首页、列表页、内容页三大核心页面TDK的代码做不同的调用

4-3、网站名称

由于《博客人生》静态网页模板，采用的是站点名称，所以这里以此为例，设置方法如下图

代码调用：<?=$public_r[sitename]?>

4-4、网站导航菜单

官方公共模板页头的调用方式：带模板的栏目导航标签showclasstemp

查看路径：后台--模板--自动生成标签--栏目调用标签--带模板的栏目导航标签showclasstemp

官方默认一级导航调用方式：

[showclasstemp]父栏目ID,标签模板ID,是否显示栏目信息数,显示栏目数[/showclasstemp]

[showclasstemp]0,12,0,0[/showclasstemp]

一级栏目导航：

这是首页模板支持的变量说明提供的一级栏目导航调用代码：

[!--class.menu--]

二级栏目导航（推荐）

这也是演示站所用到的导航方式，这种是使用灵动标签配合php调用

目前博客人生全部栏目都是一级导航，没有子栏目，所以没有二级导航显示，如果后期开发需要添加二级栏目，则该导航会匹配到二级栏目显示到二级导航中，同时这种调用方式也方便设置菜单栏选中栏目高亮

<nav><ul id="starlist"> <li><a href="[!--news.url--]" title="首页">网站首页</a></li> [e:loop={"select classid,classname,islast,sonclass from {$dbtbpre}enewsclass where bclassid=0 and showclass=0 order by myorder,classid ASC",0,24,0}]<?php $classurl=sys_ReturnBqClassname($bqr,0);//取得栏目地址 ?> <?phpif($bqr[sonclass]== or $bqr[sonclass]==|) //判断是否存在子栏目另外加一句判断。坑爹的帝国cms，有时候会莫名其妙的把终极栏目记录了一个值“|”{ ?><li><a href="<?=$bqsr[classurl]?>" ><?=$bqr[classname]?></a></li><?php }else {?> <li class="menu"><a href="<?=$bqsr[classurl]?>" ><?=$bqr[classname]?></a> <ul class="sub"> <?php $newsclass=$empire->query("select classid,classname from ".$dbtbpre."enewsclass where bclassid=".$bqr[classid]." order by myorder,classid asc");while($classr=$empire->fetch($newsclass)) { $classrurl=sys_ReturnBqClassname($classr,9); //取得子栏目地址 ?><li><a href="<?=$classrurl?>"><?=$classr[classname]?></a></li><?php}?> </ul><span></span></li> <?php}?>[/e:loop]</ul></nav>

4-5、搜索登录按钮

登录与注册按钮，沿用帝国cms默认模板的操作方式，也就是先进行JS调用登录模板代码写法修改，然后在页头代码引入：JS调用登录模板，具体代码，请看延伸阅读文章

延伸阅读：帝国cms首页页头实现注册登录功能

4-6、网站搜索

博客人生演示站，搜索按钮是以弹出形式展现，也就是如图效果

目前提供的是常规的搜索功能，当然，也可以根据条件进行按数据表搜索、或者根据栏目id搜索的方式

show 搜索字段变量(多个字段用","格开。搜索字段必须是后台模型开启搜索的字段)

value值除了title,newstext,ftitle

还可以

id : 按信息ID搜索

keyboard : 按关键字搜索(可实现按tags列出信息)

userid : 按发布者用户ID搜索

username : 按发布者用户名搜索

-->

</form>

到这一步，帝国cms页头提取和修改工作就已经全部完成

很赞哦！（29）

标签：