Dedecms 模板制作全攻略

Dedecms（织梦内容管理系统）是国内非常流行的建站程序之一，其强大的标签系统使得模板制作变得相对简单，本教程将带你一步步掌握 Dedecms 模板的制作方法。

dedecms模版教程
（图片来源网络，侵删）

第一部分：基础知识入门

在开始制作模板之前,你需要了解几个核心概念。

什么是 Dedecms 模板？

Dedecms 模板是一套包含 HTML、CSS、JavaScript 和 Dedecms 特有 {dede:...} 标签的文件集合，它定义了网站前台页面的外观和布局，当用户访问网站时，Dedecms 程序会读取模板文件，并解析其中的标签，用从数据库中获取的实际数据替换掉这些标签，最终生成并输出一个完整的 HTML 页面给用户浏览器。

模板的文件结构

一个典型的 Dedecms 模板文件结构如下：

/templets  (Dedecms 模板根目录)
├── default/ (默认模板文件夹，可以自定义名称，如 "mytheme")
│   ├── index.htm      (首页模板)
│   ├── article_list.htm (列表页模板，如文章列表)
│   ├── article_article.htm (文章页模板，也叫内容页)
│   ├── search.htm     (搜索页模板)
│   ├── head.htm       (头部公共模板)
│   ├── footer.htm     (底部公共模板)
│   ├── style.css      (样式表文件)
│   └── ...            (其他页面模板)
└── plus/               (插件页面模板，如留言板、反馈页等)

核心文件解析

  • index.htm: 网站首页模板。
  • article_list.htm: 文章栏目列表页模板。
  • article_article.htm: 文章内容详情页模板。
  • head.htm / footer.htm: 公共部分，用于包含网站的头部（Logo、导航）和底部（版权、友情链接）,便于统一管理和修改。
  • style.css: 网站的样式文件，控制颜色、字体、布局等。

第二部分：核心标签详解

标签是 Dedecms 模板的灵魂，也是学习的重点，标签的通用格式为 {dede:标签名 属性='值'}。

dedecms模版教程
（图片来源网络，侵删）

全局通用标签

这些标签可以在任何模板文件中使用。

  • 网站信息

    • {dede:global.cfg_webname/}: 网站名称
    • {dede:global.cfg_weburl/}: 网站首页地址
    • {dede:global.cfg_description/}: 网站描述
    • {dede:global.cfg_keyword/}: 网站关键词

  • 栏目导航

    • {dede:channel type='top' row='8'}: 调用顶级栏目
      • type='top': 只调用顶级栏目。
      • row='8': 调用8个栏目。
      • [field:typelink/]: 栏目链接。
      • [field:typename/]: 栏目名称。
    • {dede:channelartlist typeid='top'}: 循环输出顶级栏目及其子栏目（常用于主导航下拉菜单）。

  • 友情链接

    dedecms模版教程
    （图片来源网络，侵删）
    • {dede:flink row='24' linktype='2' type='text'}: 调用友情链接
      • row='24': 显示24个链接。
      • linktype='2': 类型2为文字链接。
      • type='image': 类型为图片链接。
      • [field:link/]: 链接地址。
      • [field:text/]: 链接文字或图片代码。

首页常用标签

  • 文章调用

    • {dede:arclist titlelen='30' row='10' typeid='1,2,3'}: 调用指定栏目的文章列表
      • titlelen='30': 标题长度,30个字符。
      • row='10': 调用10条文章。
      • typeid='1,2,3': 只调用栏目ID为1,2,3下的文章,不写则调用所有。
      • [field:title/]: 文章标题。
      • [field:arcurl/]: 文章链接。
      • [field:pubdate function="MyDate('Y-m-d',@me)"/]: 发布日期，MyDate 是日期格式化函数。
      • [field:description/]:
      • [field:litpic/]: 文章缩略图。

  • 指定栏目调用

    • {dede:sql sql="SELECT * FROMdede_archivesWHERE typeid = 8 ORDER BY id DESC LIMIT 10"}: 直接用SQL语句调用
      • 这种方式非常灵活，但需要你对数据库表结构有一定了解。dede_archives 是文章主表。

列表页常用标签

  • 文章列表循环

    • {dede:list pagesize='20'}: 循环输出当前栏目的文章列表
      • pagesize='20': 每页显示20条。
      • [field:title/]: 文章标题。
      • [field:arcurl/]: 文章链接。
      • [field:pubdate function="MyDate('Y-m-d',@me)"/]: 发布日期。
      • [field:writer/]: 作者。
      • [field:click/]: 点击量。

  • 分页标签

    • {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'}: 生成分页链接
      • listsize='4': 显示4个“...”。
      • listitem: 指定显示哪些分页元素。
      • {dede:pagebreak/}: 在文章内容中插入“下一页”链接。

页常用标签

这些标签通常放在 article_article.htm 中。

  • 文章基本信息

    • {dede:field.title/}: 文章标题。
    • {dede:field.pubdate function="MyDate('Y-m-d H:i:s',@me)"/}: 发布日期和时间。
    • {dede:field.source/}: 来源。
    • {dede:field.writer/}: 作者。
    • {dede:field.click/}: 点击量。
    • {dede:field.keywords/}: 关键词。
    • {dede:field.description/}: 描述。

    • {dede:field.body/}: 核心标签,输出文章的完整内容。

  • 上下页导航

    • {dede:prenext get='pre'/}: 上一篇文章链接。
    • {dede:prenext get='next'/}: 下一篇文章链接。

  • 相关文章

    • {dede:likearticle row='8' titlelen='24'}: 调用与当前文章相关的文章
      • row='8': 显示8条。
      • titlelen='24': 标题长度24。

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

假设我们要制作一个包含“网站Logo”、“主导航”、“文章头条”、“文章列表”和“底部信息”的首页。

步骤 1: 创建模板文件

在 /templets/default/ 目录下创建 index.htm 文件。

步骤 2: 编写 HTML 结构

打开 index.htm，输入基础的 HTML5 结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    <meta name="keywords" content="{dede:global.cfg_keyword/}">
    <meta name="description" content="{dede:global.cfg_description/}">
    <link rel="stylesheet" href="/templets/default/style.css">
</head>
<body>
    <!-- 头部开始 -->
    <header>
        <div class="logo">{dede:global.cfg_webname/}</div>
        <nav>
            <ul>
                {dede:channel type='top' row='8'}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:channel}
            </ul>
        </nav>
    </header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <main>
        <div class="headline">
            <h2>网站头条</h2>
            {dede:arclist row='1' titlelen='40' typeid='1'}
            <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
            {/dede:arclist}
        </div>
        <div class="article-list">
            {dede:arclist titlelen='30' row='10' orderby='pubdate' idlist=''}
            <div class="article-item">
                <h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
                <p class="info">[field:pubdate function="MyDate('Y-m-d',@me)"] &nbsp; 作者：[field:writer/]</p>
                <p class="summary">[field:description/]...</p>
            </div>
            {/dede:arclist}
        </div>
    </main>
    <!-- 内容结束 -->
    <!-- 底部开始 -->
    <footer>
        <p>版权所有 &copy; {dede:global.cfg_webname/} - {dede:php}echo date('Y');{/dede:php}</p>
        <p>{dede:flink/}</p>
    </footer>
    <!-- 底部结束 -->
</body>
</html>

步骤 3: 创建 CSS 样式

在 /templets/default/ 目录下创建 style.css 文件,并添加一些基本样式来美化页面。

/* body, header, main, footer, nav, ul, li, p, h1, h2, h3 { margin: 0; padding: 0; box-sizing: border-box; } */
body { font-family: 'Microsoft YaHei', sans-serif; line-height: 1.6; }
header { background: #333; color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
header nav ul { list-style: none; display: flex; }
header nav ul li { margin-left: 20px; }
header nav ul li a { color: #fff; text-decoration: none; }
.main-content { padding: 20px; }
.headline { background: #f4f4f4; padding: 15px; margin-bottom: 20px; }
.headline h2 { border-bottom: 2px solid #333; padding-bottom: 5px; }
.headline a { font-size: 24px; font-weight: bold; color: #c00; text-decoration: none; }
.article-item { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #ccc; }
.article-item h3 { margin-bottom: 5px; }
.article-item h3 a { color: #333; text-decoration: none; }
.article-item .info { color: #999; font-size: 12px; margin-bottom: 10px; }
.article-item .summary { color: #666; }
footer { background: #333; color: #fff; text-align: center; padding: 20px; margin-top: 20px; }

步骤 4: 后台设置

  1. 登录 Dedecms 后台。
  2. 进入 【系统】-> 【系统基本参数】-> 核心设置**，确保网站名称、关键词、描述已填写。
  3. 进入 【系统】-> 系统基本参数-> 核心设置，找到 “主页链接名称”**，确保它指向你的首页模板文件 /templets/default/index.htm。
  4. 进入 【核心】-> 频道管理-> 单页文档管理 (或 栏目管理**)，确保你已有栏目,并且这些栏目下有文章。

步骤 5: 生成首页

  1. 在后台首页，点击右上角的 “生成” 按钮。
  2. 在左侧菜单中选择 “主页HTML”。
  3. 点击 “更新主页”，系统会根据你的模板生成静态的 index.html 文件。
  4. 生成成功后，访问你的网站域名,就能看到你制作的首页了！

第四部分：高级技巧与常见问题

模板引擎技术

Dedecms 使用 PHP 作为模板引擎，这意味着你可以在模板中直接使用 PHP 代码,这极大地扩展了模板的功能。

  • 执行 PHP 代码:

    {dede:php}
echo "Hello, World!";
// 获取当前年份
echo date('Y');
{/dede:php}

  • 使用 PHP 函数处理标签字段: 这在前面已经展示过，function="MyDate('Y-m-d',@me)"。@me 代表标签原始的值。

自定义标签

Dedecms 自带的标签无法满足你的需求,你可以自定义标签。

  1. 创建标签文件: 在 /include/taglib/ 目录下创建一个新文件，mytag.lib.php。
  2. 编写标签逻辑: 在文件中编写 PHP 代码,从数据库获取数据并返回。
  3. 在模板中使用: 在模板中就可以像使用普通标签一样使用 {dede:mytag/}。

自定义标签有一定门槛，需要具备 PHP 和 MySQL 基础。

常见问题

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

    • A: 因为你生成的是静态页面，Dedecms 默认会生成 HTML 文件，你需要去后台重新生成对应的页面（如首页、列表页、文章页），或者，在后台 【系统】-> 系统基本参数-> 性能选项**** 中，关闭“HTML静态化”，这样就会实时动态解析模板,但会降低网站性能。

  • Q: 如何制作一个包含多个子栏目的列表页？

    • A: 使用 {dede:channelartlist} 标签，它会循环每个顶级栏目，你可以在其内部再嵌套 {dede:arclist} 或 {dede:list} 来调用该栏目的文章。

  • Q: 如何调用指定推荐位的文章？

    • A: 使用 arclist 标签的 posid 属性，调用推荐位ID为1的文章：{dede:arclist posid='1' row='5'}...{/dede:arclist}，你可以在后台的 【核心】-> 内容频道设置-> 推荐位管理**** 中查看各个推荐位的ID。

学习资源推荐

  1. 官方文档: Dedecms 官方文档 是最权威的资料,虽然有时可能不够新。
  2. 模板市场: 在 Dedecms 官方网站或其他模板网站上下载免费或付费的模板,通过分析别人的模板来学习是最高效的方法之一。
  3. 技术论坛: 关注如“织梦吧”、“Dedecms 官方论坛”等社区,里面有大量的问题解答和经验分享。

希望这份详细的教程能帮助你顺利入门并精通 Dedecms 模板制作！祝你建站愉快！