DEDE头部head.htm解析

xieaotian

我喜欢研究CMS类网站的模板，最近针对DEDE（织梦）开始了研究。

跟大多说CMS一样DEDECMS的模板的头部、中部、尾部也是分离的，我们先说说头部：

DEDE头部默认模板位置在：后台-模板-默认模板管理-head.htm列表头部模板

DEDE的首页CSS的位置在：后台-核心-附件管理-文件式管理-[根目录]/templets/style/dedecms.css

DEDE源模板的头部有这几项构成的：

网站标题title  广告banner 向导rlink 导航条navMenu 搜索search




以下逐个讲解：



网站标题title

像大多CMS一样，网站标签是一定不能少的东西，DEDE也不列外，他的网站名字就是一个网站变量标签形式出现的：

{dede:global.cfg_webname/}
这就是网站的名字。（系统-系统设置-系统基本参数-网站名称这一项里我们就能够清楚看到这个变量名称。）

他的链接地址是{dede:global.cfg_basehost/}同样是一个变量标签也是主页的位置

但他的标题图片是CSS在这个区域所设定的背景图片，

.header .title h1 a{
width:200px;
height:56px;
display:block;
font-size:0px;
text-indent:-200px;
overflow:hidden;
background:url(../images/top-logo.gif) center center no-repeat;
}

我对他的这一做法非常不理解，如果拿这个标题图片作为logo的话，最好是贴在表层的图片，不应该以区域背景图片的形式出现的（个人意见）

-------------------------------------------------------------------------------

广告banner

源默认模板是以一个js形式调用出现的：

<script src='{dede:global.cfg_cmsurl/}/plus/ad_js.php?aid=1' language='javascript'></script>

他的形成形式我们可以从广告调用这一部分去理解，只要我们做一遍广告调用就会明白了！

关于广告的调用与应用在这里我有比较详细的解析介绍/dede/cxde/200912/107.html。我们可以去查阅。

我们可以{dede:myad name='广告位标识'/}这样的代码调用，也可以用js如

<script src='/plus/ad_js.php?aid=1' language='javascript'></script>

这样的形式出现... ...

但在前台htm中源码的展现是不一样的，后者显示的是原样的代码，而前者会被转换

成htm代码出现如：<a href="http://www.zdp2008.net/"><img src="/templets/images/banner-header.png" /></a>

挺有意思，两者都可以选用的，我喜欢用前者的形式，谁都知道，一个htm页面太多的js代码会很糟糕，是SEO的一大忌！

-----------------------------------------------------------------
向导rlink

这部分是指：会员中心、TAG标签、网站地图、等。。。

这一部分也比较简单，我们只要知道几个链接的地址变量标签就可以了。

{dede:global.cfg_memberurl/} 会员中心地址

{dede:global.cfg_cmsurl/} 站点实际url

{dede:global.cfg_dataurl/}站点data目录地址

其实在DEDE里这种地址标签会有很多，以后习惯就好了~！！！！！！

----------------------------------------------------------------------

导航条navMenu


<div id="navMenu">
     <ul>
       <li><a href='{dede:global.cfg_cmsurl/}/'>主页</a></li>
       {dede:channel type='top' row='10' currentstyle="<li class='hover'><a href='~typelink~' ~rel~>~typename~</a></li>"}
       <li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
       {/dede:channel}
     </ul>
    </div>



说起DEDE的导航条，我们就要接触{dede：channel ... ...}......{/dede：channel}这个标签，

以下是DEDE官方Channel标签的参数：

标签名称：channel
标记简介：织梦常用标记，通常用于网站顶部以获取站点栏目信息，方便网站会员分类浏览整站信息
功能说明：用于获取栏目列表
适用范围：全局使用

基本语法：
{dede:channel type='top' row='8' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a> </li>"}
<li><a href='[field:typelink/]'>[field:typename/]</a> </li>
{/dede:channel}
参数说明：
typeid = '0' 栏目ID
reid = '0' 上级栏目ID
row = '100' 调用栏目数
col = '1' 分多少列显示（默认为单列）
type = 'son | sun' son表示下级栏目,self表示同级栏目,top顶级栏目
currentstyle = '' 应用样式
底层模板字段：
ID(同 id),typeid, typelink, typename, typeurl,typedir(仅表示栏目的网址)
例：
{dede:channel type='top'}
<a href='[field:typelink /]'>[field:typename/]</a>
{/dede:channel}

注：在没有指定typeid的情况下，type标记与模板的环境有关，如，模板生成到栏目一，那么type='son'就表示栏目一的所有子类。


仔细看了上述channel标签使用我们归纳一下：

导航条中每一个栏目（或频道）的调用最简单的也要这样写：

{dede：channel  栏目参数属性type=''或者栏目id typeid='' }

栏目连接地址<a href='[field:typelink/]'>栏目名称[field:typename/]</a>

channel标签成对结束{/dede：channel}

这几项是不能少掉的，至于导航条最终形成前台样式取决于currentstyle = '' 应用样式以及CSS的设置。

源模板导航条html导航条框架：

<div>
<ul>
<li class='hover'><a href="">栏目名</a></li>
</ul>
</div>



二级下拉栏目菜单


V5.5版的源默认模板的导航条中带有下拉二级栏目菜单模式，但在DEDE头部head.htm中我翻了几遍却没找到它的模板结构，遇到鬼了？？？？

在首页CSS设置中（DEDE的首页CSS的位置在：后台-核心-附件管理-文件式管理-[根目录]/templets/style /dedecms.css）却找到了二级下拉子菜单的CSS设置奇怪了，我展开了思路：既然有下拉菜单的出现就一定有模板结构，于是我翻遍了所有模板，弄的我头晕眼花，老泪横流，但终于叫我给找到了,他的模板（二级下拉栏目菜单模板）在footer.htm中：


<!-- //二级子类下拉菜单，考虑SEO原因放置于底部  -->
<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlist typeid='top' cacheid='channelsonlist'}<ul id="dropmenu{dede:field.typeid/}" class="dropMenu">
  {dede:channel type='son' noself='yes'}  <li><a href="[field:typelink/]">[field:typename/]</a></li>
  {/dede:channel}
</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>



这个二级下拉导航条是被JS调用到大导航条下面的，本身下拉导航条就是JS做的~~所以想真正的弄清二级导航条html的结构还真得琢磨一下！

其实他的html框架基本上也是如下：


<ul class="dropMenu">
<li><a href="">栏目名</a></li>
</ul>


大概就是这个意思了~~~其实我们还可以以通过CSS设定去分析它的构架，毕竟DEDE的模板中有标签有函数有js代码，太乱了，真正的 html代码真的需要去多尝试多比较多琢磨。

------------------------
搜索search

DEDE的搜索部分还算是清晰，一般的表单模式，我想大家都会一目了然了，

如果对表单还不大熟悉的朋友可以去这里http://www.zdp2008.net/yy/JSS/200812/67.html
看看~~或许有些帮助，

由于是新学DEDE（织梦）菜鸟一个~或许大侠们看了会笑话我，我的QQ：76258956希望跟我一样起步的朋友我们联系一起学习~！！
转自:http://www.zdp2008.net/dede/cxde/200912/108.html