Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>[PHP+HTML] - DEDECMS模板制作教程

[PHP+HTML] - DEDECMS模板制作教程

时间：2010-10-09 来源：炎峰森林影

来源：http://wenku.baidu.com/view/6550e49951e79b8968022623.html

本教程来自站长网：http://www.zzc1.com/cms/dede/512-3.html

http://bbs.dedecms.com/241273.html 我(是原文作者)只是做了整理拿过来分享！我只是初学者，今天刚开始学习dede模板制作，希望能和大家交流，请大家支持我QQ群100179517 107085560

DEDECMS模板制作教程

Arclist 标记的应用，使用率很高，相当实用，所以我们使用都必须熟练掌握。
Field 标记在封面模板、列表模板、文档模板的使用频率很高，实用。主要用来获得到系统变量的值或者路径，用法很灵活。可以直接展示数据，如调用position，得到栏目一 > 栏目二” 这样形式的链接；或者，调用templeturl得到/templets这样路径。
Channel 标记主要用于获取栏目列表，用法非常简单，主要是区分“type=top,sun/son,self ”的所调用的对象就行了。
Type 标记表示指定的单个栏目的链接，用法非常简单。
Autochannel 标记使用实例
Mytag 标记使用实例板中多次出现的相同元素用一个自定义标记表示出来，从而达到，一次更改，全局更换的效果。辅助插件的广告管理也有相似的效果。
Type 标记用于获取一组投票表单。其使用范围限于：封面模板。
Flink 标记使用实例用于获取友情链接。调用该标记后可以得到四种友情链接的形式。
Mynew标记使用实例用于获取站内新闻。站内新闻有利于站长及时与会员沟通。
ChannelArtlist标记使用实例用于获取当前频道的下级栏目的内容列表。该标记在封面模板（包括主页）中的经常被用到
List 标记使用实例
Pagelist 标记使用实例
Pagebreak 标记使用实例
Prennext 标记使用实例
Pagetitle 标记使用实例

模板教程【Arclist 标记使用实例】（一）
Arclist 标记的使用思路、步骤：
一、明确使用范围
我们在使用任何标记的过程中，都必须明确其使用的范围，否则可能无法正常调用该标签，【Arclist 标记】的使用范围是：
封面模板、列表模板、文档模板。
即对应templets\default\文件夹下的
index_识别ID.htm模板、list_识别ID.htm模板、article_识别ID.htm模板）

二、通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Arclist 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
注意：其它文件保持不变，我不懂PHP，只能用这种方式调试，相信朋友们很容易上手的。
我调试【Arclist 标记】的具体代码如下：

{dede:arclist typeid='' row='1'  titlelen='20' infolen='' imgwidth='100' imgheight='80'}
<font color="red">文章ID:</font>[field:ID/] <br />
<font color="red">文章标题:</font>[field:title/] <br />
<font color="red">文章短标题:</font>[field:shorttitle/] <br />
<font color="red">文章标题的文字链接:</font>[field:textlink/] <br />
<font color="red">文章作者:</font>[field:writer/] <br />
<font color="red">文章发表日期:</font>[field:stime/] <br />
<font color="red">文章所属栏目的目录:</font>[field:typedir/] <br />
<font color="red">文章所属栏目的名称:</font>[field:typename/] <br />
<font color="red">文章所属栏目的文字链接:</font>[field:typelink/] <br />
<font color="red">文章的图片链接:</font>[field:imglink/] <br />
<font color="red">文章的缩略图:</font>[field:image/] <br />
{/dede:arclist}

得到如下返回数据：

文章篇幅所限，未能列出所有的属性和字段调用的方法。请朋友们举一反三，增删属性和写入代码进行调试，加深印象。最好是对照官方的Dedecms文档进行调试，我这样做收获很大的。

三、【Arclist 标记】延伸出来的别名标记（实用又个性化，建议关注使用）
为了使网页内容更具个性化，人性化，官方在【Arclist 标记】的基础上延伸出来一些别外标签，如：hotart、coolart、likeart、artlist、imglist、imginfolist、specart、autolist 。非常好！
我调试【imglist标记】的具体代码如下：

{dede:imglist typeid='' row='2' col='1'  titlelen='20' infolen='' imgwidth='100' imgheight='80'}
[field:imglink/]  [field:textlink/]<br />
{/dede:imglist}

得到如下返回数据：

如上例，其它的别名标记，朋友们可以举一反三，融会贯通！

模板教程【Field 标记】（二）
Field 标记使用思路、步骤：
一、明确使用范围
我们在使用【Field 标记】的过程中，必须明确其使用的范围，否则可能无法正常调用该标签，其使用范围是：
封面模板（如index_article.htm）、列表模板（如list_article.htm）、文档模板（如article_article.htm）。
index_article.htm、list_article.htm、article_article.htm等类似的模板文档都在templets\default\文件夹中。
注意：
1、封面模板与列表模板是有区别的，但调用【Field 标记】可以相同；
2、封面模板有不同的类型，我们最常用的是文章模板（index_article.htm），其它的还有图片模板（index_image.htm），简介模板（index_info.htm），软件模板（index_soft.htm）等等，这些模板调用【Field 标记】的道理都是一样的。

二、通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的list_default.htm和htmlist_article.htm文件中的代码，全部掏空。放入调用【Field 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新栏目HTML-->开始生成HTML。再在IE中访问网站的各栏封面和列表，就可以得到返回的数据。

用法一：
这种用法，主要是从数据库获取相关的数据，特别是系统变量的数据。
我调试【Arclist 标记】的具体代码如下：

<font color="red">调用position标记,得到:栏目一 > 栏目二” 这样形式的链接：</font>{dede:field name='position'/}<br/>
<font color="red">插件路径：</font>{dede:field name='phpurl'/}<br/>
<font color="red">模板路径：</font>{dede:field name='templeturl'/}<br/>
<font color="red">版权信息：</font>{dede:field name='powerby'/}<br/>
<font color="red">主页路径：</font>{dede:field name='indexurl'/}<br/>
<font color="red">主页名称：</font>{dede:field name='indexname'/}<br/>

得到如下返回数据：

请朋友们举一反三，增删属性和写入代码进行调试，加深印象。最好是对照官方的Dedecms文档进行调试，我这样做收获很大的。

用法二：
这一种用法比较灵活，作用也非常大，但必须有HTML知识才能运用的比较好，
我调试【Arclist 标记】的具体代码如下：

<link href="{dede:field name='templeturl'/}/style/dede.css" rel="stylesheet" type="text/css" />
注意：本页面的文字和链接都是经过dede.css处理的<br />
<a href="http://bbs.dedecms.com/">织梦论坛</a> <br />

得到如下返回数据：

模板教程【Channel 标记】（三）
Channel 标记使用思路、步骤：
一、明确使用范围
我们在使用任何标记的过程中，都必须明确其使用的范围，否则可能无法正常调用该标签，【Channel 标记】的使用范围是：
封面模板、列表模板、文档模板。
为了便于下面内容的理解，我将数据库中网站频道的截图如下：

二、通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Channel 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
调用方法一：
我调试【Channel 标记】的具体代码如下：

{dede:channel row='3' type='top'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}

得到如下返回数据：

模板教程【Type 标记使用实例】（四）
Type标记使用思路、步骤：
一、明确使用范围
我们在使用任何标记的过程中，都必须明确其使用的范围，否则可能无法正常调用该标签，【Type 标记】的使用范围是：
封面模板、列表模板、文档模板。
说明：为了便于下面内容的理解，我将数据库中网站频道的截图如下：

通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Type 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。

我调试【Channel 标记】的具体代码如下：

{dede:type typeid='96'}{/dede:type}
<br /><br />
{dede:channel  typeid='96'}
<a href='[field:typelink /]'>[field:typename/]</a>
{/dede:channel}

得到如下返回数据：

模板教程【Type 标记使用实例】（五）

{dede:autochannel partsort='1'/}
{dede:channel typeid='1'} [field:typename/] {/dede:channel}
{dede:autolist row=12 titlelen=38 orderby=pubdate partsort='1'}
[field:textlink/] {/dede:autolist}

autochannel，autolist 是专门给懒人用的，partsort 的属性是表示排列顺序为某位置，它是栏目排列的位置，不是ID，这样的好处是，没有某个ID，只要有足够的栏目，也会显示内容，这个标记如果加了 typeid，则变成获取特定栏目的子栏目的这个排序位置的内容了

模板教程【Mytag 标记使用实例】（六）
自定义宏标记【Mytag 标记】的作用：
可以将模板中多次出现的相同元素用一个自定义标记表示出来，从而达到，一次更改，全局更换的效果。辅助插件的广告管理也有相似的效果。
【Mytag 标记】的实例教程
[教程]自定义宏标记的应用
今天天涯来介绍下自定义宏标记的应用，大家可以进入后台，在“模板管理”-》“自定义宏标记”中查看到该选项。
自定义宏标记的作用：
可以将模板中多次出现的相同元素用一个自定义标记表示出来，从而达到，一次更改，全局更换的效果。辅助插件的广告管理也有相似的效果。
适用范围：
网页模板中多次出现的相同元素，例如：网站的导航条、网站的站点公告、网站的底部信息等，在我之前发布的几套模板中都运用到了自定义宏标记。
自定义宏标记的调用办法：
{dede:mytag name='标记名称' ismake='是否含板块代码（yes 或 no）' typeid='栏目ID'/}
1、name 标记名称，该项是必须的属性，以下 2、3是可选属性；
2、ismake 默认是 no 表示设定的纯HTML代码， yes 表示含板块标记的代码；
3、typeid 表示所属栏目的ID，默认为 0 ，表示所有栏目通用的显示内容，在列表和文档模板中，typeid默认是这个列表或文档本身的栏目ＩＤ。
下面来通过一个实例进行说明：
我有一个网站模板底部信息，其长度已经超出了系统可以设置的网站版权（cfg_powerby）的长度，但是我想实现一段代码，可以在不同模板（页面）中显示相同内容的效果。
我们就可以使用自定义宏标记来实现这个效果
如图进行设置：

然后我们回到模板制作的界面，将模板中的{dede:global name='cfg_powerby'/}，替换为我们设置的自定义宏标记：
{dede:mytag name='footer'/},更新下，是不是已经变为我们设置的标记内容了啊。
当然，自定义宏标记里面也可以加入dedecms的标记内容，适合当前栏目的显示内容，不过需要在调用代码中将ismake设为yes才可以，也可以通过设置typeid使自定义宏标记在特定栏目中显示。
有人会问，我已经生成了很多页面了，现在想更改了一下自定义宏标记的内容，那岂不是要更改后重新再生成一遍，那样就不方便了。
其实柏拉图早就考虑到这点，在自定义宏标记中可以使用javascript调用，这样以来，只要改变一次就可以实现全局改变的效果。
具体操作：进入自定义标记管理，在相对应的标记管理项目中有JS调用这个选项，单击，dedecms自动生成调用该ID标记的js代码，例如<script src='/plus/mytag_js.php?aid=1' language='javascript'></script>
我们将刚才的{dede:mytag name='footer'/}用js替换掉，更新下，是不是还是原来的效果，我们再修改下标记的内容，怎么样？全局发生了变化。
怎么样，自定义宏标记内容强大吧，相信他的引入会给你的模板制作带来更好的效果。

模板教程【Vote 标记使用实例】（七）
【Type 标记】用于获取一组投票表单。
其使用范围限于：封面模板。
可先进入后台，按下面操作方法填写好调查内容：
辅助插件-->投票模块-->增加一组投票
通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Vote 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
我调试【Channel 标记】的具体代码如下：

{dede:vote id='2' lineheight='22'
tablewidth='100%' titlebgcolor='#EDEDE2'
titlebackground='' tablebgcolor='#FFFFFF'}
{/dede:vote}

得到如下返回数据：

模板教程【Flink 标记使用实例】（八）
【Flink 标记】用于获取友情链接。
调用该标记后可以得到四种友情链接的形式。

使用思路、步骤：
一、明确使用范围
我们在使用任何标记的过程中，都必须明确其使用的范围，否则可能无法正常调用该标签，【Flink 标记】的使用范围是：
封面模板
二、通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Flink 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
补充：

我调试【Flink 标记】的具体代码如下：

全部用文字显示：{dede:flink type='textall' row='4'  titlelen='20'}{/dede:flink}<br />
文字和图文混合排列：{dede:flink type='textimage' row='4'  titlelen='20'}{/dede:flink}<br />
仅显示不带Logo的链接：{dede:flink type='text' row='4'  titlelen='20'}{/dede:flink}<br />
仅显示带Logo的链接：{dede:flink type='image' row='4'  titlelen='20'}{/dede:flink}<br />

得到如下返回数据：

模板教程【Vote 标记使用实例】（九）
【Mynews 标记】用于获取站内新闻。
站内新闻有利于站长及时与会员沟通。
使用思路、步骤：
一、明确使用范围
我们在使用任何标记的过程中，都必须明确其使用的范围，否则可能无法正常调用该标签，【Mynews 标记】的使用范围是：
封面模板
二、通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Mynews 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
我调试【Mynews 标记】的具体代码如下：

{dede:mynews row='2' titlelen='30'}标题：[field:title/] <br />
作者：[field:writer/] <br />
时间：[field:senddate function="strftime('%y-%m-%d %H:%M',@me)"/] <br />
内容：[field:body/] <br /><br /><br />
{/dede:mynews}

得到如下返回数据：

模板教程【Channelartlist标记使用实例】（十）
【Channelartlist 标记】用于获取当前频道的下级栏目的内容列表。该标记在封面模板（包括主页）中的经常被用到，具体用法见下面实例。
除了宏标记外，channelArtlist 是唯一一个可以直接嵌套其它标记的标记，不过仅限于嵌套 {dede:type}{/dede:type} 和 {dede:arclist}{/dede:arclist} 两个标记。

通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的index.html文件代码，全部掏空。放入调用【Channelartlist 标记】的代码，再在IE中访问网站主页index.php，就可以得到返回的数据。
例1
我调试【Channelartlist 标记】的具体代码如下：

{dede:channelArtlist typeid="94" col="1"}
<div style="width:500px;border:red solid 1px;float:left;">

<div style="width:500px;background:#ccddee;">
{dede:type}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:type}
</div>

<div style="width:500px;float:left;">
<ul>
{dede:arclist row="5"}
<li><a href="[field:arcurl/]">[field:textlink/]</a></li>
{/dede:arclist}
</ul>
</div>
</div>
{/dede:channelArtlist}

得到如下返回数据：

注意：细心的朋友会发现，使用【Channelartlist 标记】时，需要你对div + css或者table的控制能力较强，否则在页面中很难控制它。请大家他细看下面例2，例1与例2代码上相差很小，但得到的布局却相差很大。仔细对比一下吧！

例2
我调试【Channelartlist 标记】的具体代码如下：

{dede:channelArtlist typeid="94" col="1"}
<div style="width:300px;border:red solid 1px;float:left;margin:5px;">

<div style="width:300px;background:#ccddee;">
{dede:type}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:type}
</div>

<div style="width:300px;float:left;">
<ul>
{dede:arclist row="5"}
<li><a href="[field:arcurl/]">[field:textlink/]</a></li>
{/dede:arclist}
</ul>
</div>
</div>
{/dede:channelArtlist}

得到如下返回数据：

模板教程【List 标记使用实例】（十一）
【List 标记】表示列表模板里的分页内容列表。
注意：它的适用范围仅列表模板 list_*.htm

通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的list_default.htm和htmlist_article.htm文件中的代码，全部掏空。放入调用【List 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新栏目HTML-->开始生成HTML。再在IE中访问网站的各栏封面和列表，就可以得到返回的数据。

我调试【List 标记】的具体代码如下：

<ul>
{dede:list col='1' row='3' titlelen='20'
infolen='100' imgwidth='120' imgheight='80' pagesize='3' typeid='95'}
<li>[field:imglink/] [field:textlink/] <font style="color:gray;">[field:info/]</font></li>
{/dede:list}
</ul>

得到如下返回数据：

模板教程【Pagelist 标记使用实例】（十二）
【Pagelist 标记】表示分页页码列表
适用范围：列表模板

通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的list_default.htm和htmlist_article.htm文件中的代码，全部掏空。放入调用【Pagelist 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新栏目HTML-->开始生成HTML。再在IE中访问网站的各栏封面和列表，就可以得到返回的数据。

我调试【Pagelist 标记】的具体代码如下：

<ul>
{dede:list col='1' row='3' titlelen='20'
infolen='100' imgwidth='120' imgheight='80' pagesize='3' typeid='95'}
<li>[field:imglink/] [field:textlink/] <font style="color:gray;">[field:info/]</font></li>
{/dede:list}
</ul>
{dede:pagelist listsize='3' listitem='index pre pageno next end option'/}

得到如下返回数据：

模板教程【Pagebreak标记使用实例】（十三）
【Pagebreak 标记】表示文档的分页链接列表。
适用范围：仅文档模板。
通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的list_default.htm和htmlist_article.htm文件中的代码，全部掏空。放入调用【Pagelist 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新文档HTML-->开始生成HTML。再在IE中访问网站的各个文档，就可以得到返回的数据。

我调试【Pagelist 标记】的具体代码如下：

<font color="red">文章标标题:</font>{dede:field name="title"/}<br />
<font color="red">文章内容:</font>{dede:field name="body"/}<br />
{dede:pagebreak/}

得到如下返回数据：

注意：想要使用【Pagebreak 标记】的前提条件是，文章存在分页。文章较短，我是手动在需分的地方加上

模板教程【Prennext标记使用实例】（十四）

【Prenext 标记】表示获取文档“上一篇／下一篇”的链接列表。
适用范围：仅文档模板。
通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的article_article.htm文件中的代码，全部掏空。放入调用【Prenext 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新文档HTML-->开始生成HTML。再在IE中访问网站的各个文档，就可以得到返回的数据。
我调试【Pagelist 标记】的具体代码如下：

<font color="red">文章标标题:</font>{dede:field name="title"/}<br />
<font color="red">文章内容:</font>{dede:field name="body"/}<br />
{dede:pagebreak/}<br />
{dede:prenext/} <br />

得到如下返回数据：

模板教程【Pagetitle 标记使用实例】（十五）
【Pagetitle 标记】
功能说明：表示获取文档的分页标题
适用范围：仅文档模板。
通过调试了解其使用方法
我调试的方法是：
将templets\default\文件夹下的article_article.htm文件中的代码，全部掏空。放入调用【Pagetitle 标记】的代码，再在管理后台进行操作，如下：HTML更新-->更新文档HTML-->开始生成HTML。再在IE中访问网站的各个文档，就可以得到返回的数据。
我调试【Pagetitle 标记】的具体代码如下：

<font color="red">文章标标题:</font>{dede:field name="title"/}<br />
<font color="red">文章内容:</font>{dede:field name="body"/}<br />
{dede:pagetitle style='select'/}<br />
{dede:prenext/} <br />

得到如下返回数据：

注意：
想要使用【Pagetitle 标记】的前提条件是，文章存在分页，而且要手动在需分的地方加上