dedecms模板教程如何快速上手？-杰瑞科技汇

Dedecms 模板制作全教程 (2025版)

Dedecms（织梦内容管理系统）是国内非常流行的CMS系统之一，其核心优势之一就是强大的模板引擎,允许开发者通过修改HTML模板文件来轻松改变网站的外观和布局。

（图片来源网络，侵删）

本教程将带你一步步掌握 Dedecms 模板的制作方法。

第一部分：基础知识
- 什么是 Dedecms 模板？
- 模板文件存放结构
- 模板引擎核心原理
- 必备工具
第二部分：模板标签详解
- 全局标签
- 频道标签
- 文章列表标签
- 页标签
- 其他常用标签
第三部分：实战演练 - 制作一个简单的首页
（图片来源网络，侵删）
- 步骤1：创建模板文件夹
- 步骤2：制作静态HTML原型
- 步骤3：替换静态内容为Dede标签
- 步骤4：创建并绑定栏目
- 步骤5：生成首页并预览
第四部分：进阶技巧
- 模板继承与公共文件 (head.htm, footer.htm)
- 条件判断 (if
- 循环与数组 (foreach, volist
- 自定义函数与PHP代码嵌入



第五部分：常见问题与资源



第一部分：基础知识
什么是 Dedecms 模板？
Dedecms 模板本质上是标准的HTML文件，但它被植入了 Dedecms 的专属标签，这些标签在网站被访问时，会被 Dedecms 的模板引擎解析，并从数据库中提取相应数据,最终生成用户看到的HTML页面。
简单比喻：
（图片来源网络，侵删）

模板 = 一张带有空白格子的试卷
 = 空白格子上写的“请填写姓名”、“请填写年龄”等提示
数据库 = 你填写的答案
模板引擎 = 老师将你的答案填入试卷，并最终批改完的完整试卷

模板文件存放结构
了解模板文件存放在哪里是第一步，默认情况下，模板文件位于 templets 目录下。
/你的网站根目录/
├── dede/              (后台管理目录)
├── images/            (图片目录)
├── uploads/           (上传文件目录)
├── plus/              (功能模块目录)
├── special/           (专题目录)
├── data/              (缓存数据目录)
└── templets/          (模板核心目录)
    ├── default/       (默认模板文件夹)
    │   ├── index.htm  (首页模板)
    │   ├── article_list.htm (列表页模板)
    │   ├── article_article.htm (文章内容页模板)
    │   ├── head.htm   (头部公共模板)
    │   ├── footer.htm (底部公共模板)
    │   └── ...        (其他模板文件)
    │
    └── my_theme/      (你可以自己创建一个新的模板文件夹)
        └── ...        (复制一份 default 的文件开始修改)
最佳实践： 不要直接修改 default 文件夹，而是复制一份，重命名为你自己的主题名（如 my_theme）,然后在后台设置中切换到你自己的主题。
模板引擎核心原理
当用户访问一个页面时（例如首页），Dedecms 会执行以下操作：

请求解析：服务器接收到对 index.php 的请求。
模板定位：Dedecms 根据你后台设置的模板风格，找到 templets/my_theme/index.htm 文件。
标签解析：模板引擎读取 index.htm 文件，扫描其中的所有 {dede:...}
数据查询：对于每个标签，引擎会执行对应的SQL查询，从数据库中获取数据（获取最新的10篇文章标题、链接、缩略图等）。

内容替换：引擎将查询到的数据填充到标签的位置，生成一个完整的、纯静态的HTML字符串。
页面输出：将最终的HTML字符串发送到用户的浏览器。

这个过程非常快，因为最终生成的页面是静态的,大大减轻了数据库的压力。
必备工具

代码编辑器：强烈推荐使用 VS Code (免费、强大)、Sublime Text 或 Dreamweaver，它们支持语法高亮,能让你更清晰地看到HTML和Dede标签。
浏览器开发者工具 (F12)：用于调试网页，检查元素、样式和网络请求,是前端开发的必备利器。
FTP/SFTP工具：如 FileZilla,用于将你制作好的模板文件上传到服务器。


第二部分：模板标签详解
标签是模板的灵魂，下面是最高频、最核心的标签。
全局标签 (常用)
这些标签在大多数页面都会用到。

{dede:global.cfg_webname/}：显示网站名称。
{dede:global.cfg_weburl/}：显示网站网址。
{dede:global.cfg_powerby/}：显示“Powered by DedeCms”版权信息。
{dede:include filename='head.htm'/}：包含（引入）头部公共模板文件。
{dede:include filename='footer.htm'/}：包含（引入）底部公共模板文件。

频道标签
用于显示网站的主要栏目导航。


顶级栏目：
{dede:channel type='top' row='8'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}

type='top'：只获取顶级栏目。
row='8'：显示8个栏目。
[field:typelink/]：栏目链接。
[field:typename/]：栏目名称。



子栏目：
{dede:channel type='son' typeid='1'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}

type='son'：获取指定栏目的子栏目。
typeid='1'：指定父栏目的ID（必需）。



文章列表标签
这是最核心的标签，用于文章列表页、首页等。
{dede:arclist flag='c' row='10' titlelen='30' orderby='pubdate'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function='MyDate('Y-m-d', @me)'/]</span>
    </li>
{/dede:arclist}


常用属性：

typeid：指定栏目ID，只显示该栏目及其子栏目的文章。typeid='1,2' 可指定多个。
row：获取文章的数量。
titlelen长度。
infolen简介长度。
orderby：排序方式。pubdate (发布时间), click (点击量), id (文章ID) 等。
orderway：排序方向。desc (降序), asc (升序)。
flag：特定属性。'c' (推荐/头条), 'h' (头条), 'a' (特荐) 等。



常用字段：

[field:title/]。
[field:arcurl/]：文章链接。
[field:pubdate function='MyDate('Y-m-d', @me)'/]：发布日期。function 用于对字段进行格式化处理。
[field:description/]：
[field:litpic/]：文章缩略图。



页标签
这些标签用在文章详情页 (article_article.htm)。
<h1>{dede:field.title/}</h1>
<div class="info">
    作者：{dede:field.writer/} &nbsp;&nbsp;
    来源：{dede:field.source/} &nbsp;&nbsp;
    时间：{dede:field.pubdate function='MyDate('Y-m-d H:i', @me)'/} &nbsp;&nbsp;
    点击：{dede:field.click/}
</div>
<div class="content">
    {dede:field.body/}
</div>

常用字段：
{dede:field.title/}。
{dede:field.pubdate/}：发布时间。
{dede:field.click/}：点击次数。
{dede:field.body/}：文章正文内容。
{dede:field.keywords/}：文章关键词。
{dede:field.description/}：文章描述。



其他常用标签


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


幻灯片/焦点图标签：
{dede:arclist row='5' flag='h' type='image.' imgwidth='280' imgheight='192'}
<a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a>
{/dede:arclist}



第三部分：实战演练 - 制作一个简单的首页
假设我们要制作一个包含“网站导航”、“最新文章”、“推荐文章”的首页。
步骤1：创建模板文件夹

通过FTP连接你的服务器。
进入 templets 目录。
复制 default 文件夹，粘贴并重命名为 my_first_theme。

步骤2：制作静态HTML原型
用VS Code打开 my_first_theme 文件夹，修改 index.htm，先写一个纯HTML的静态页面,不包含任何Dede标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的Dede网站</title>
    <link rel="stylesheet" href="/templets/my_first_theme/style.css">
</head>
<body>
    <div class="header">
        <div class="nav">
            <a href="#">首页</a>
            <a href="#">关于我们</a>
            <a href="#">产品服务</a>
            <a href="#">联系我们</a>
        </div>
    </div>
    <div class="main">
        <div class="focus">
            <!-- 焦点图位置 -->
        </div>
        <div class="news-list">
            <h2>最新文章</h2>
            <ul>
                <li><a href="#">这是第一篇文章的标题，这是一个示例。</a></li>
                <li><a href="#">这是第二篇文章的标题，这是一个示例。</a></li>
                <li><a href="#">这是第三篇文章的标题，这是一个示例。</a></li>
                <li><a href="#">这是第四篇文章的标题，这是一个示例。</a></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <p>Copyright &copy; 2025 我的Dede网站. All Rights Reserved.</p>
    </div>
</body>
</html>
步骤3：替换静态内容为Dede标签
我们将HTML中的静态部分替换为Dede标签。


网站名称和引入公共文件：
{dede:include filename='head.htm'/}
{dede:include filename='footer.htm'/}


导航栏：
<div class="nav">
    {dede:channel type='top' row='8'}
    <a href="[field:typelink/]">[field:typename/]</a>
    {/dede:channel}
</div>


最新文章列表：
<div class="news-list">
    <h2>最新文章</h2>
    <ul>
        {dede:arclist row='4' titlelen='30'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </ul>
</div>


推荐文章（假设我们用一个叫“推荐”的栏目）：
<div class="recommend">
    <h2>推荐文章</h2>
    <ul>
        {dede:arclist typeid='3' row='4' titlelen='30'}  <!-- 假设“推荐”栏目ID是3 -->
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </ul>
</div>


步骤4：创建并绑定栏目

登录Dede后台。
进入【核心】 -> 【栏目管理】。
添加几个顶级栏目（如“关于我们”、“产品服务”）。
在“最新文章”列表的标签中，我们获取的是所有顶级栏目的文章，如果你想指定某个栏目，修改 typeid 属性即可。

步骤5：生成首页并预览

在后台左侧菜单，找到【生成】 -> 【主页生成】。
点击“更新主页”按钮。
等待生成完成后，访问你的网站首页,就能看到由Dede标签动态生成的内容了！


第四部分：进阶技巧
模板继承与公共文件
为了提高效率和方便维护，通常会把网站公共部分（如头部、底部、侧边栏）拆分成独立的模板文件。

创建 head.htm:<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{dede:global.cfg_webname/} - {dede:field.title/}</title>
    <link rel="stylesheet" href="/templets/my_first_theme/style.css">
</head>
<body>
    <div class="header">
        <!-- 导航等内容 -->
    </div>

创建 footer.htm:    <div class="footer">
        <!-- 底部版权信息 -->
    </div>
</body>
</html>

在 index.htm 中引入:{dede:include filename='head.htm'/}
<!-- 页面主要内容 -->
{dede:include filename='footer.htm'/}


条件判断 (if
根据不同条件显示不同内容,例如判断是否为首页。
{dede:field name='typeid' runphp='yes'}
if(@me == 0) @me = "首页";
else @me = "";
{/dede:field}
{dede:if $field.title == '这是标题'}
    <p>标题匹配！</p>
{else /}
    <p>标题不匹配。</p>
{/dede:if}
循环与数组 (foreach, volist
在Dede 5.7版本后，支持类似ThinkPHP的标签语法,更灵活。
{volist name='list' id='vo'}
    <li>
        <a href="{$vo.arcurl}">{$vo.title}</a>
        <span>{$vo.pubdate}</span>
    </li>
{/volist}

name='list'：通常与 {dede:sql} 或 {dede:arclist} 的 idlist 属性配合使用，将查询结果赋值给 list 变量。
id='vo'：定义循环中的变量名。

自定义函数与PHP代码嵌入
Dede标签支持使用PHP函数，也允许在模板中直接嵌入PHP代码（需开启相应配置）。


使用函数：
[field:pubdate function='MyDate('Y年m月d日', @me)'/]


嵌入PHP代码：
{dede:name runphp='yes'}
    $str = "Hello World";
    @me = $str;
{/dede:name}


响应式模板与移动端适配
现代网站必须响应式,你可以：


使用CSS框架：在模板中引入 Bootstrap 或 Tailwind CSS。


媒体查询：在 style.css 中编写媒体查询代码。
/* 默认PC样式 */
.nav { width: 1200px; margin: 0 auto; }
/* 平板样式 */
@media (max-width: 768px) {
    .nav { width: 100%; }
}
/* 手机样式 */
@media (max-width: 480px) {
    .nav a { display: block; text-align: center; }
}



第五部分：常见问题与资源
常见问题


Q: 为什么我的标签没有数据，显示空白？

A:
检查 typeid 是否正确，或者是否为空（空表示所有栏目）。
检查 row 是否为0。
检查后台对应栏目下是否有文章。
检查标签拼写是否错误。





Q: 为什么修改了模板文件后，网站没有变化？

A: Dedecms 默认会缓存解析后的模板，你需要进入后台【生成】 -> 【一键更新网站】 -> 更新HTML，或者直接删除 data/tplcache 目录下的缓存文件。



Q: 如何调用指定自定义模型的文章？

A: 使用 channelid 属性，你的自定义模型ID是5，那么就在 arclist 标签中加入 channelid='5'。



学习资源

官方文档：虽然旧，但最权威,可以在Dede官方论坛找到。
Dede模板之家：提供大量免费和付费模板,是学习模板结构和设计的绝佳资源。
视频教程：在Bilibili、腾讯课堂等平台搜索“Dede模板制作”,有大量视频教程可供参考。
开源项目：去GitHub上找一些基于Dede的开源项目，下载下来研究其模板结构,是快速提升的好方法。



学习Dede模板制作，核心在于 “理解标签” 和 “动手实践”，从模仿开始，尝试修改现有模板，然后逐步独立制作，遇到问题时，善用搜索引擎和开发者工具，你很快就能掌握这个强大的工具,祝你成功！

dedecms模板教程如何快速上手？

Dedecms 模板制作全教程 (2025版)

目录

第一部分：基础知识

什么是 Dedecms 模板？

模板文件存放结构

模板引擎核心原理

必备工具

第二部分：模板标签详解

全局标签 (常用)

频道标签

文章列表标签

页标签

其他常用标签

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

步骤1：创建模板文件夹

步骤2：制作静态HTML原型

步骤3：替换静态内容为Dede标签

步骤4：创建并绑定栏目

步骤5：生成首页并预览

第四部分：进阶技巧

模板继承与公共文件

自定义函数与PHP代码嵌入

响应式模板与移动端适配

第五部分：常见问题与资源

常见问题

学习资源

相关推荐

男士瑜伽入门，哪些基本动作必学？