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

来源：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模板制作教程

目录：

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

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

<div style="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="300px;border:red solid 1px;float:left;margin:5px;">

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

<div style="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 标记】的前提条件是，文章存在分页，而且要手动在需分的地方加上