dede模板制作教程从哪开始学？-建站教程-锦华智联科技

DedeCMS 模板制作全攻略：从零开始打造你的专属网站

DedeCMS 是一款非常流行的 PHP 开源网站管理系统，其模板系统采用了类似 Smarty 的模板引擎，通过特定的标签和变量，将网站内容与页面设计分离，使得网站的设计和内容更新变得非常灵活。

（图片来源网络，侵删）

本教程将分为以下几个部分：

第一部分：基础知识准备
第二部分：模板文件结构与核心标签
第三部分：实战演练 - 制作一个简单的首页
第四部分：常用模板标签详解
第五部分：进阶技巧与常见问题
第六部分：总结与资源

第一部分：基础知识准备

在开始制作模板之前,你需要确保你已经具备以下条件：

本地环境搭建：
- 安装一个集成的 PHP 环境，如 phpStudy、WampServer 或 XAMPP，这些环境一键集成了 PHP、MySQL 和 Apache/Nginx 服务器，非常适合新手。
Dedecms 程序：
（图片来源网络，侵删）
- 从 Dedecms 官网下载最新版本的程序包（DedeCMS-V5.7.111-GBK-SP1.zip）。
代码编辑器：
- 推荐使用专业的代码编辑器,如 VS Code (免费且强大)、Sublime Text 或 Dreamweaver，它们支持代码高亮、自动补全，能大大提高你的效率。
基础前端知识：
- HTML：网页的骨架，负责结构和内容。
- CSS：网页的样式，负责美化外观（布局、颜色、字体等）。
- JavaScript (可选)：网页的交互行为，如轮播图、表单验证等。
- PHP 基础 (了解即可)：虽然模板层不直接写复杂 PHP，但了解 <?php ... ?> 语法和变量有助于你更好地理解 Dedecms 的工作原理。

第二部分：模板文件结构与核心标签

模板文件存放目录

当你安装好 Dedecms 后，网站根目录下会有一个名为 templets 的文件夹，所有模板文件都存放在这里。

/templets/：默认模板主目录
- /default/：系统默认模板文件夹，你可以直接在这里修改，但强烈建议你新建一个自己的文件夹。
- /mytemplate/：（推荐） 你自己创建的模板文件夹，mytemplate。

模板文件命名规则

Dedecms 模板文件通常以 .htm 为后缀，但内部使用的是类 PHP 的模板语法。

（图片来源网络，侵删）

首页模板：index.htm
列表页模板：list_栏目ID.htm (list_1.htm)
文章页模板：article_栏目ID.htm (article_1.htm)
其他页面：如搜索页 search.htm、留言簿 guestbook.htm 等，都在 templets/system/ 目录下。

模板引擎核心：DedeCMS 标签

这是 Dedecms 模板的灵魂，标签用 {dede:标签名属性='值'} 表示。

单标签：{dede:field.title/}，直接输出一个值。
双标签：{dede:list pagesize='10'}...{/dede:list}，在两者之间循环输出内容。

最核心的标签：{dede:include} 用于引入其他模板文件，是实现模块化布局的关键。

头部：{dede:include filename="head.htm"/}
底部：{dede:include filename="footer.htm"/}
侧边栏：{dede:include filename="left.htm" /} 或 {dede:include filename="right.htm" /}

第三部分：实战演练 - 制作一个简单的首页

我们将通过制作一个经典的三栏布局首页,来学习模板的制作流程。

创建模板文件夹

在 templets/ 目录下新建一个文件夹，命名为 mydemo。

准备静态 HTML/CSS

用 HTML 和 CSS 写好一个静态的首页布局，假设我们有以下结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个Dede模板</title>
    <style>
        /* 一些简单的CSS样式 */
        body { font-family: Arial, sans-serif; margin: 0; }
        .container { width: 1000px; margin: 0 auto; }
        .header { background: #333; color: white; padding: 10px; text-align: center; }
        .main-content { float: left; width: 700px; padding: 10px; }
        .sidebar { float: right; width: 280px; padding: 10px; background: #f4f4f4; }
        .footer { clear: both; background: #333; color: white; text-align: center; padding: 10px; }
    </style>
</head>
<body>
    <div class="header">
        <h1>这里是网站头部</h1>
    </div>
    <div class="container">
        <div class="main-content">
            <h2>这里是主内容区</h2>
            <p>这里是文章列表...</p>
        </div>
        <div class="sidebar">
            <h3>这里是侧边栏</h3>
            <p>这里是栏目列表...</p>
        </div>
    </div>
    <div class="footer">
        <p>这里是网站底部版权信息</p>
    </div>
</body>
</html>

拆分模板文件

将上面的静态 HTML 拆分成多个模块，方便复用和管理。

创建头部模板 head.htm
- 包含 <head> 标签里的所有内容，以及 <body> 开始标签和顶部导航栏。
- 存放位置：/templets/mydemo/head.htm
创建底部模板 footer.htm
- 包含页脚的所有内容。
- 存放位置：/templets/mydemo/footer.htm
创建侧边栏模板 left.htm
- 包含左侧边栏的内容。
- 存放位置：/templets/mydemo/left.htm
创建首页模板 index.htm
- 这是首页的主模板,它将使用 {dede:include} 标签来组合其他模块。

编写 `index.htm` 并替换静态内容

我们打开 index.htm，开始用 Dedecms 标签替换静态内容。

{dede:include filename="head.htm"/}
<div class="container">
    <div class="main-content">
        <!-- 
            {dede:arclist} 是调用文章列表的最常用标签。
            typeid='': 调用指定栏目ID的文章，留空表示调用所有栏目的。
            titlelen='': 标题长度。
            row='': 调用文章的数量。
        -->
        {dede:arclist typeid='' titlelen='40' row='10'}
        <li>
            <!-- [field:title/] 是文章标题 -->
            <a href="[field:arcurl/]">[field:title/]</a>
            <!-- [field:pubdate function="MyDate('Y-m-d',@me)"/] 是发布日期，通过function格式化 -->
            <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        </li>
        {/dede:arclist}
    </div>
    <div class="sidebar">
        <!-- 
            {dede:channel} 是调用栏目列表的标签。
            type='top': 只调用顶级栏目。
            row='': 调用栏目的数量。
        -->
        {dede:channel type='top' row='8'}
        <dl>
            <dt><a href="[field:typelink/]">[field:typename/]</a></dt>
            <!-- 可以在这里递归调用子栏目 -->
        </dl>
        {/dede:channel}
    </div>
</div>
{dede:include filename="footer.htm"/}

代码解释：

{dede:include filename="head.htm"/} 和 {dede:include filename="footer.htm"/}：引入头部和底部。
{dede:arclist ...}...{/dede:arclist}：循环输出文章列表。
- [field:title/]：获取文章标题。
- [field:arcurl/]：获取文章链接。
- [field:pubdate ...]：获取发布日期，并用 function 参数格式化为 年-月-日。
{dede:channel ...}...{/dede:channel}：循环输出顶级栏目列表。
- [field:typename/]：获取栏目名称。
- [field:typelink/]：获取栏目链接。

在后台设置模板

登录你的 Dedecms 后台。
进入 【系统】 -> 【系统基本参数】 -> 【核心设置】。
找到 “模板默认风格目录”，将其值修改为你新建的模板文件夹名，mydemo。
保存后,系统会自动应用该目录下的模板。

清空浏览器缓存,访问你的网站首页，你应该就能看到由 Dedecms 动态生成的内容了！

第四部分：常用模板标签详解

用途	示例
`{dede:include}`	引入其他模板文件	`{dede:include filename="head.htm"/}`
`{dede:arclist}`	调用文章列表	`{dede:arclist typeid='1' titlelen='30' row='5' orderby='pubdate'}` `<a href="[field:arcurl/]">[field:title/]</a>` `{/dede:arclist}`
`{dede:channel}`	调用栏目列表	`{dede:channel type='top' row='10'}` `<a href="[field:typelink/]">[field:typename/]</a>` `{/dede:channel}`
`{dede:field}`	获取当前页面的特定字段	`{dede:field.seotitle/}` `{dede:field.title/}` `{dede:field.body/}`
`{dede:global}`	获取全局系统变量	`网站名称: {dede:global.cfg_webname/}` `网站路径: {dede:global.cfg_basehost/}`
`{dede:myad}`	调用广告位	`{dede:myad name='topbanner'/}` (需要在后台广告管理中创建名为 `topbanner` 的广告位)
`{dede:loop}`	循环输出任意数据	需要配合 PHP 代码使用，比较灵活，但不如 `arclist` 常用。

第五部分：进阶技巧与常见问题

条件判断 `{dede:if}`

用于根据条件显示不同的内容,只在首页显示某个模块。

{dede:field name='typeid' runphp='yes'}
if(@me == 0) {
    @me = "<div>这是首页才有的内容</div>";
} else {
    @me = "";
}
{/dede:field}

分页标签 `{dede:pagelist}`

通常放在列表页或文章内容页的末尾,用于生成分页导航。

<div class="dede_pages">
    <ul>
        <li>{dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'/}</li>
    </ul>
</div>

自定义函数

在 {dede:field} 等标签中，可以使用 function 参数调用自定义函数来格式化输出，例如日期、截取字符串等。

[field:description function='cn_substr(@me, 100)'/]  // 截取摘要前100个字符

常见问题

Q: 模板修改后，前台页面没有变化？
- A:
  1. 清空缓存：在后台点击 【生成】 -> 【一键更新网站】 -> 更新缓存。
  2. 检查文件路径：确保 {dede:include} 中的文件名和路径正确。
  3. 检查标签语法：确保标签没有拼写错误，且双标签成对出现。
Q: 为什么我的列表页调用不出文章？
- A:
  1. 检查栏目：确认 arclist 标签中的 typeid 是否正确，或者留空。
  2. 检查模型：确认该栏目下是否有属于“普通文章”模型的内容。
  3. 检查权限：确认文章是否为“仅管理员可见”或已审核。
Q: 如何修改网站 Logo？
- A:
  1. 准备好你的 Logo 图片（logo.png），上传到 /templets/mydemo/images/ 目录下。
  2. 打开 head.htm 文件，找到 <img src="..." />
  3. 将 src 属性的值修改为你的图片路径，<img src="/templets/mydemo/images/logo.png" alt="网站Logo" />。



第六部分：总结与资源
Dedecms 模板制作的核心思想是 “分离” —— 将美工设计好的 HTML/CSS 作为“壳”，然后用 Dedecms 的标签将动态数据“填”进去。
学习路径建议：

模仿：从修改默认模板 default 开始，理解每个文件的作用。
拆分：尝试将一个完整的首页拆分成 head, footer, left, right 等模块。
组合：学习使用 {dede:include} 和核心列表标签 (arclist, channel) 来组合页面。
精通：深入研究条件判断、分页、自定义函数等高级技巧，并尝试制作列表页和文章页。

官方资源：

DedeCMS 官方论坛：http://bbs.dedecms.com/ (遇到问题首选搜索和提问)
DedeCMS 标签手册：论坛里有非常详细的标签使用说明和示例。

希望这份教程能为你打开 Dedecms 模板世界的大门，多动手实践，你很快就能成为一名 Dedecms 模板高手！

dede模板制作教程从哪开始学？