dede套模板教程，新手如何快速上手？-建站教程-锦华智联科技

DedeCMS 套模板完整教程

第一部分：基础知识准备

在开始之前，你需要了解几个核心概念,这会让你事半功倍。

（图片来源网络，侵删）

什么是模板？
- 模板不是网站内容，而是网站的“外观和结构”，它就像一个房子的装修图纸，决定了你的网站看起来是什么样子、布局如何。
- 在 DedeCMS 中，模板文件是 .htm 后缀的文件，里面混合了 HTML 代码和 DedeCMS 的模板标签。
什么是模板标签？
- 这是 DedeCMS 的精髓，标签是特殊的代码（如 {dede:arclist}）,用来动态地调用数据库中的内容。
- {dede:arclist} 标签可以自动从数据库中提取文章列表，并显示在模板上，你不需要手动去写 HTML 列表，DedeCMS 会自动生成。
模板文件存放位置
- DedeCMS 的模板文件都存放在 /templets/ 目录下。
- 默认情况下，系统使用 /templets/default/ 目录下的模板。
- 为了方便管理，我们通常会新建一个自己的模板目录，/templets/mycms/。

第二部分：套模板前的准备工作

准备好你的设计稿
（图片来源网络，侵删）
- 这是你从设计师那里得到的网站设计稿（通常是 .psd 或 .jpg 文件），你需要清晰地知道网站的构成部分，
  - 顶部导航栏
  - Logo 和 Banner（幻灯片）
  - 左侧边栏
  - 中间的主要内容区（文章列表、文章详情等）
  - 底部版权信息
安装并配置好 DedeCMS
- 确保你已经成功安装了 DedeCMS 程序,并且可以正常访问后台。
- 在后台进行基本设置，如网站名称、公司信息等。

第三部分：开始套模板（核心步骤）

我们将以制作一个简单的首页为例,来演示整个流程。

步骤 1：创建新的模板目录

通过 FTP 或虚拟主机文件管理器，进入 DedeCMS 的根目录。
找到 templets 文件夹。
在 templets 文件夹内新建一个文件夹，命名为 mycms（你可以用任何你喜欢的名字）。
之后我们所有的模板文件都会放在 mycms 这个文件夹里。

步骤 2：拆分设计稿，创建模板文件

根据你的设计稿,你需要创建以下几个基本的模板文件：

index.htm：首页模板
article_article.htm页模板
list_channel.htm：栏目列表页模板
head.htm：头部公共模板（包含 Logo、导航等）
footer.htm：底部公共模板（包含版权信息等）

最佳实践： 先创建 head.htm 和 footer.htm,因为它们在多个页面中都会被用到。

（图片来源网络，侵删）

步骤 3：制作公共模板（head.htm 和 footer.htm）

制作 head.htm

打开你的设计稿，将顶部从 Logo 开始到导航栏结束的部分切出来。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    <meta name="description" content="{dede:global.cfg_webdesc/}" />
    <link rel="stylesheet" href="/templets/mycms/css/style.css"> <!-- 引入你的CSS文件 -->
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="/"><img src="/templets/mycms/images/logo.png" alt="{dede:global.cfg_webname/}"></a>
        </div>
        <div class="nav">
            <ul>
                <!-- 调用栏目导航 -->
                {dede:channel type='top' row='8'}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:channel}
            </ul>
        </div>
    </div>
    <div class="main-content">

标签解释：

{dede:global.cfg_webname/}：调用后台设置的网站名称。
{dede:channel type='top' row='8'}：调用顶级栏目，row='8' 表示显示 8 个栏目。
[field:typelink/]：当前栏目的链接地址。
[field:typename/]：当前栏目的名称。

制作 footer.htm

将设计稿底部的版权信息、备案号等切出来。

    </div> <!-- .main-content 结束标签 -->
    <div class="footer">
        <p>Copyright © 2025 {dede:global.cfg_webname/} All Rights Reserved.</p>
        <p><a href="http://beian.miit.gov.cn/" target="_blank">ICP备案号</a></p>
    </div>
</body>
</html>

步骤 4：制作首页模板（index.htm）

首页模板通常由公共模板、首页特定内容（如 Banner、推荐文章等）组成。

引入公共模板 在 index.htm 的开头和结尾，使用 include 标签来引入我们做好的 head.htm 和 footer.htm。

{dede:include filename="head.htm"/}
<!-- ==================== 首页主要内容区 ==================== -->
<div class="home-banner">
    <!-- 这里放你的幻灯片代码，可以使用DedeCMS的自定义标记 -->
</div>
<div class="news-list">
    <h2>最新资讯</h2>
    <!-- 调用文章列表 -->
    {dede:arclist row='10' titlelen='50'}
    <div class="news-item">
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p class="info">[field:pubdate function="MyDate('Y-m-d',@me)"/] 作者：[field:writer/]</p>
        <p class="summary">[field:description function="cn_substr(@me, 100)"/]...</p>
    </div>
    {/dede:arclist}
</div>
<!-- ==================== 首页主要内容区结束 ==================== -->
{dede:include filename="footer.htm"/}

核心标签详解：{dede:arclist}
- row='10'：获取 10 条文章。
- titlelen='50'长度限制为 50 个字符。
- [field:arcurl/]：文章的链接地址。
- [field:title/]。
- [field:pubdate function="MyDate('Y-m-d',@me)"/]：发布日期，使用 function 对日期进行格式化。
- [field:writer/]：文章作者。
- [field:description/]：cn_substr 函数用于截取指定长度的字符串。

步骤 5：制作其他页面模板

页 (article_article.htm)

同样，先用 {dede:include filename="head.htm"/} 和 {dede:include filename="footer.htm"/} 包裹起来。

中间放置文章内容标签：

<h1>{dede:field.title/}</h1>
<div class="info">
    发布时间：{dede:field.pubdate function="MyDate('Y-m-d',@me)"/} 来源：{dede:field.source/} 作者：{dede:field.writer/} 点击：{dede:field.click/}
</div>
<div class="content">
    {dede:field.body/}
</div>

栏目列表页 (list_channel.htm)

结构和首页类似,但文章列表标签不同。

使用 {dede:list} 标签,它通常用于分页列表。

{dede:include filename="head.htm"/}
<h1>{dede:field.typename/}</h1> <!-- 当前栏目名称 -->
<div class="list">
    {dede:list pagesize='10'}
    <div class="list-item">
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p class="info">[field:pubdate function="MyDate('Y-m-d',@me)"/]</p>
    </div>
    {/dede:list}
    <!-- 分页条 -->
    <div class="page">
        {dede:pagelist listsize='5'/}
    </div>
</div>
{dede:include filename="footer.htm"/}

步骤 6：设置模板并生成

模板文件都写好了，现在需要告诉 DedeCMS 使用这些新模板。

进入后台：登录 DedeCMS 后台。
选择模板：
- 在左侧菜单找到 “模板” -> “默认模板管理”。
- 你会看到一个列表，列出了各种页面类型（首页、列表页、文章页等）。
- 点击对应页面类型右侧的 “选择” 按钮。
- 在弹出的窗口中，选择你刚才创建的 mycms 目录，然后选中对应的模板文件（如 index.htm），点击“确定”。
生成网站：
- 设置好所有页面的模板后，点击左侧菜单 “生成” -> “一键生成网站”。
- 勾选你需要生成的项目（首页、栏目、文章等），然后点击“开始生成”。
- 等待生成完成,你的网站就套好模板了！

第四部分：CSS 和 JavaScript 的处理

创建 CSS 和 JS 文件夹
- 在你的模板目录 /templets/mycms/ 下，新建 css 和 js 文件夹。
- 将你的设计稿切图得到的 CSS 文件（如 style.css）和 JavaScript 文件（如 jquery.min.js, slider.js）分别放入这两个文件夹。
在模板中引入
- 在 head.htm 文件中，用 <link> 和 <script> 标签引入它们。
- 路径：务必使用正确的相对路径，因为 head.htm 在 mycms 目录下，所以路径应该是 /templets/mycms/css/style.css。

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

Q: 为什么我的页面是空白的，或者只显示了部分内容？
- A: 最常见的原因是 标签语法错误，检查所有 {dede:xxx} 和 [field:xxx] 标签是否拼写正确，标签对是否闭合（{dede:xxx}...{/dede:xxx}），DedeCMS 对标签格式要求很严格。
Q: 为什么我修改了模板文件，刷新网站后没有变化？
- A: DedeCMS 有模板缓存，修改模板后，必须进入后台 “生成” -> “更新缓存”，或者重新生成对应页面,才能看到效果。
Q: 如何让首页显示不同栏目的文章列表？
- A: 使用 {dede:arclist} 的 typeid 属性。typeid='1,3,5' 表示只调用 ID 为 1, 3, 5 的栏目下的文章，你可以在后台“栏目管理”中查看每个栏目的 ID。
Q: 如何调试模板？
- A: 可以在模板文件中临时加入 HTML 注释  来确认代码是否被执行，或者，直接在模板中写一些静态的 HTML 文本，看看是否能正常显示,以此定位问题区域。
Q: 推荐使用什么代码编辑器？
- A: 推荐使用 VS Code（免费、强大、插件丰富）、Sublime Text 或 Dreamweaver，它们都支持语法高亮，能让你更清晰地看到 HTML 和标签的代码结构。

套模板的核心思路就是：“拆分设计稿 -> 制作公共模块 -> 使用标签调用动态内容 -> 组合页面 -> 后台设置并生成”。

这个过程需要耐心和细心，尤其是对标签的熟练掌握，多看官方文档，多模仿默认模板，多练习，很快你就能熟练掌握 DedeCMS 的模板制作了,祝你成功！