目录

  1. 准备工作：你需要了解什么？

    dedecms模板修改教程
    （图片来源网络，侵删）
    • Dedecms 是什么？
    • 前端与后端分离的概念
    • 必备工具：代码编辑器
    • 备份！备份！备份！

  2. 核心概念：Dede模板是如何工作的？

    • 模板文件的结构
    • 核心模板文件解析
    • {dede:} 标签系统：模板的灵魂
    • 全局变量：{dede:global/}

  3. 实战演练：修改你的第一个模板

    • 下载并解压模板
    • 通过FTP上传模板到服务器
    • 在后台启用新模板
    • 修改首页内容（Logo、Slogan、导航）
    • 修改首页文章列表样式

  4. 常用标签详解与示例

    • 文章列表类 ({dede:arclist/})
    • 页类 ({dede:field/}, {dede:field.note/})
    • 栏目列表类 ({dede:channel/}, {dede:sonchannel/})
    • 分页类 ({dede:pagelist/})
    • 其他实用标签 (友情链接、幻灯片等)

  5. 进阶技巧：让模板更强大、更灵活

    dedecms模板修改教程
    （图片来源网络，侵删）
    • 使用CSS和JavaScript：分离样式与行为
    • 条件判断：{dede:if/}...{/dede:if}
    • 循环与数组：{dede:loop/}
    • 自定义函数：修改 include/helpers/ 目录下的文件
    • 搜索引擎优化：修改 head.htm 模板

  6. 常见问题与解决方案

    • Q: 网站修改后，页面没有变化，显示的是旧内容？
    • Q: 模板标签不生效，直接显示为 {dede:xxx} 文字？
    • Q: 如何修改网站标题、关键词、描述？
    • Q: 如何在首页添加一个自定义的板块（如“关于我们”）？
    • Q: 模板文件和目录结构是怎样的？

准备工作：你需要了解什么？

在开始修改之前,请确保你已经理解了以下几点：

Dedecms 是什么？

Dedecms（织梦内容管理系统）是一款基于 PHP + MySQL 技术的开源网站管理系统，它内置了丰富的功能，可以快速搭建和管理网站，尤其适合做资讯类、企业官网、博客等。

前端与后端分离的概念

这是理解模板修改的核心。

dedecms模板修改教程
（图片来源网络，侵删）
  • 后端：指网站的“大脑”，由 PHP 文件和数据库组成，它负责处理数据（如文章内容、用户信息）、执行逻辑（如发布文章、用户登录）。
  • 前端：指网站的“外貌”，由 HTML、CSS、JavaScript 文件组成，它负责展示数据，决定网站长什么样子。
  • 模板：就是连接前端和后端的桥梁，它是一个 HTML 文件，里面用 {dede:} 标签标记了“这里需要显示一篇文章标题”、“那里需要显示一个栏目列表”，当用户访问网站时，Dedecms 后端会读取模板文件，把数据库里的数据填充到这些标签位置，最终生成一个完整的 HTML 页面发送给用户的浏览器。

必备工具：代码编辑器

不要使用 Windows 自带的记事本，它可能会导致编码问题，保存后模板出现乱码，强烈推荐使用专业的代码编辑器，它们支持语法高亮、代码提示等功能，能极大提高你的效率。

备份！备份！备份！

在进行任何修改之前,务必备份你的：

  1. 整个网站根目录：通过 FTP 将网站所有文件下载到本地。
  2. 数据库：在 Dedecms 后台【系统】->【数据库备份/还原】中进行备份。 这是最重要的习惯，可以让你在误操作后能轻松恢复。

核心概念：Dede模板是如何工作的？

模板文件的结构

一个典型的 Dedecms 模板文件夹（如 default/）结构如下：

/templets/default/
├── index.html          (首页模板)
├── article_article.htm (文章内容页模板)
├── list_channel.htm    (栏目列表页模板)
├── search.htm          (搜索页模板)
├── head.htm            (公共头部，包含 <head> 标签)
├── footer.htm          (公共底部)
├── style/              (CSS 样式文件夹)
│   └── base.css
└── images/             (图片资源文件夹)
    └── logo.png

核心模板文件解析

  • index.html：网站首页的模板，Dedecms 在生成首页时，会直接读取这个文件。
  • article_article.htm页的模板，当用户点击一篇文章进入详情页时，Dedecms 会根据文章的 ID 找到对应的模板来生成页面。
  • head.htm 和 footer.htm：这两个是公共模板文件，通常在 index.html 等页面中会通过 {dede:include file='head.htm'/} 和 {dede:include file='footer.htm'/} 来引入，这样做的好处是，如果所有页面都要修改头部或底部，只需要修改这两个文件即可，无需改动每个页面。

{dede:} 标签系统：模板的灵魂

这是 Dedecms 模板的核心，标签分为两种：

  1. 单标签：如 {dede:field.title/}，用于输出一个单一的值。
  2. 对标签（块标签）：如 {dede:arclist}...{/dede:arclist}，用于循环输出一组内容。

标签可以带属性,用来控制输出的内容和样式。 {dede:arclist titlelen='30' row='10'} 表示输出标题长度为30个字符、数量为10条的文章列表。

全局变量：{dede:global/}

用于输出网站的全局配置信息,如网站名称、网站地址等。 {dede:global.cfg_webname/} 会输出你在后台设置的网站名称。

实战演练：修改你的第一个模板

假设你已经下载好了一个 Dedecms 模板（解压后得到一个名为 mynewtemplate 的文件夹）。

下载并解压模板

从网上下载你喜欢的模板,并将其解压到你的电脑上。

通过FTP上传模板到服务器

使用 FileZilla 等 FTP 工具连接到你的服务器。

  1. 进入网站根目录下的 templets 文件夹。
  2. 将你解压好的 mynewtemplate 文件夹（或里面的内容）上传到 templets 目录下。

在后台启用新模板

  1. 登录你的 Dedecms 后台。
  2. 进入【系统】-> 【系统基本参数】 -> 【核心设置】。
  3. 找到 “模板默认风格” 选项，将其值修改为你的新模板文件夹名称（mynewtemplate）。
  4. 保存。

清空浏览器缓存并刷新你的网站首页,应该就能看到新模板的样子了。

修改首页内容（Logo、Slogan、导航）

  1. 用 FTP 下载 templets/mynewtemplate/index.html 文件到你的电脑，并用 VS Code 打开它。
  2. 修改Logo：在代码中找到 <img src="..." /> 这样的标签，查看 src 属性，它可能是 {dede:global.cfg_templets_dir/}/images/logo.png，这表示图片位于 templets/当前模板名/images/ 目录下，你可以直接替换服务器上该路径下的 logo.png 文件，或者修改 src 指向一个你自己的 URL。
  3. 修改Slogan/副标题：寻找类似 {dede:field.seotext/} 或直接写死文字的地方，将其修改为你自己的内容。
  4. 修改导航菜单：导航通常由 {dede:channel type='top'}...{/dede:channel} 标签生成，这个标签会自动调用后台设置的所有顶级栏目，如果你想添加自定义链接（如“关于我们”），最简单的方法是直接在 HTML 中写死 <a>

修改首页文章列表样式

假设你希望文章列表的标题颜色变为红色,并且摘要文字变小。

  1. 在 index.html 中找到文章列表的循环代码块，通常是这样的：
    {dede:arclist row='10' titlelen='30'}
<li>
    <a href="[field:arcurl/]">[field:title/]</a>
    <p>[field:description function='cn_substr(@me,100)'/]...</p>
</li>
{/dede:arclist}
  2. 你可以给 <a> 标签加一个 class，<a href="[field:arcurl/]" class="article-title">[field:title/]</a>。
  3. 在 templets/mynewtemplate/style/ 目录下的 CSS 文件（如 style.css 或 base.css）中添加样式：
    .article-title {
    color: red; /* 将标题颜色设置为红色 */
}
.article-title + p { /* 选择紧跟在 .article-title 后面的 p 标签 */
    font-size: 12px; /* 将摘要字体设置为12px */
}
  4. 保存文件,刷新网站，看看效果是否已经改变。

常用标签详解与示例

文章列表类 ({dede:arclist/})

这是最最常用的标签,用于在首页、栏目页等地方调用文章列表。

常用属性：

  • row='10'：调用文章数量，len='30'`：标题长度，截取30个字符。
  • col='2'：分几列显示（通常与 row 配合使用）。
  • typeid='1,2,3'：指定调用哪些栏目下的文章，用英文逗号隔开，不写则调用所有。
  • channelid='1'：指定模型ID，1代表文章。
  • orderby='hot'：排序方式。hot (点击量), pubdate (发布时间), id (文章ID)。
  • imgwidth='120' & imgheight='90'：缩略图的宽高。

示例：调用“产品展示”栏目下的5篇带缩略图的文章

{dede:arclist typeid='3' row='5' titlelen='20' imgwidth='150' imgheight='112'}
    <div class="product-item">
        <a href="[field:arcurl/]">
            <img src="[field:litpic/]" alt="[field:title/]" />
            <h3>[field:title/]</h3>
        </a>
        <p>[field:description function='cn_substr(@me,80)'/]...</p>
    </div>
{/dede:arclist}

页类 ({dede:field/}, {dede:field.note/})

这些标签只在文章内容页模板（如 article_article.htm）中有效。

常用标签：

  • {dede:field.title/}。
  • {dede:field.pubdate function='strftime("%Y-%m-%d %H:%M:%S",@me)'/}：文章发布时间，function 后面是格式化函数。
  • {dede:field.source/}：文章来源。
  • {dede:field.writer/}：文章作者。
  • {dede:field.body/}：文章正文内容。
  • {dede:field.note/}：简介。

栏目列表类 ({dede:channel/}, {dede:sonchannel/})

  • {dede:channel type='top'}：调用顶级栏目。
  • {dede:channel type='son' typeid='2'}：调用指定栏目（ID为2）的子栏目。
  • {dede:sonchannel}：在栏目列表页中，调用当前栏目的所有子栏目。

分页类 ({dede:pagelist/})

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

常用属性：

  • listsize='4'：列表样式页码显示数量。
  • listitem='info,index,end,pre,next,pageno'：显示的项目信息。

示例：

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

进阶技巧：让模板更强大、更灵活

使用CSS和JavaScript

将所有样式代码（<style>...</style>）放入 style/ 目录下的 .css 文件中。 将所有脚本代码（<script>...</script>）放入 js/ 目录下的 .js 文件中。 然后在模板的 head.htm 中通过 <link> 和 <script> 标签引入它们，这能让你的模板结构更清晰，加载效率更高。

条件判断：{dede:if/}...{/dede:if}

可以根据条件输出不同的内容,只在首页显示某个模块：

{dede:if $ismember=='yes'}
    <div>欢迎您，会员！</div>
{/dede:if}
```页，如果文章有缩略图才显示：
```html
{dede:if field.litpic != ''}
    <img src="[field:litpic/]" alt="[field:title/]" />
{/dede:if}

自定义函数

当内置标签无法满足你的需求时,可以修改 PHP 文件来实现。 你想在文章列表里显示一个自定义字段“品牌”，而这个字段是你在发布文章时填写的。

  1. 确保后台模型中已经添加了这个“品牌”字段。
  2. 在 include/helpers/ 目录下找到 archive.helper.php 文件。
  3. 在文件中找到 GetArcList 函数，在里面添加获取自定义字段的代码（这需要一定的 PHP 知识）。
  4. 在模板中就可以通过 {dede:field.brand/} 来调用这个值了。

常见问题与解决方案

Q: 网站修改后，页面没有变化，显示的是旧内容？

A: 这是因为 Dedecms 默认开启了“静态HTML生成”。

  1. 进入后台【生成】-> 【HTML更新】。
  2. 点击首页后面的“更新”按钮，重新生成首页HTML。
  3. 如果是栏目页或文章页,也请到对应的更新页面重新生成。 临时解决方案：可以在后台【系统】-> 【系统基本参数】 -> 【性能选项】 中，将“是否开启静态页”设为“否”，这样每次访问都会动态生成页面，修改后立即生效，但会影响性能，仅用于调试。

Q: 模板标签不生效，直接显示为 {dede:xxx} 文字？

A: 这通常有两个原因：

  1. 文件编码问题：你的模板文件不是 UTF-8 无 BOM 格式，请用 VS Code 打开文件，右下角可以看到编码格式，如果不是 UTF-8，请转换为 UTF-8。
  2. 模板路径错误：确保你在后台设置的“模板默认风格”和 FTP 上传的文件夹名称一致。

Q: 如何修改网站标题、关键词、描述？

A: 进入后台【系统】-> 【系统基本参数】 -> 【站点设置】，在这里可以修改网站名称、网站Logo、网站关键字、网站描述等全局信息，这些信息通常在 head.htm 模板中被 {dede:global/} 标签调用。

Q: 如何在首页添加一个自定义的板块（如“关于我们”）？

A: 这是最常见的需求之一。

  1. 方法一（推荐，最灵活）：
    • 用 FTP 下载 index.html 到本地。
    • 在你希望添加“关于我们”的位置，直接写入 HTML 代码，比如一个 <div>。
    • 在这个 <div> 中，你可以写死文字，或者使用其他标签调用你后台的“关于我们”单页内容。
    • 保存 index.html 并上传回服务器。
    • 进入后台【生成】-> 【HTML更新】，点击“更新首页”。
  2. 方法二（关于我们”是独立页面）：
    • 在后台【核心】-> 频道管理】 中，创建一个名为“关于我们”的栏目。
    • 在这个栏目里发布一篇文章。
    • 在首页模板中,使用 {dede:arclist typeid='关于我们的栏目ID' row='1'} 来调用这篇文章。

Q: 模板文件和目录结构是怎样的？

A:

  • 根目录 ：网站根目录，存放 index.php, dede/ (后台目录), templets/ (模板目录) 等。
  • /templets/：所有模板文件存放的目录。
  • /templets/你的模板名/：当前使用的模板文件夹，如 default 或 mynewtemplate。
  • /templets/你的模板名/images/：模板用到的图片资源。
  • /templets/你的模板名/style/：CSS 样式文件。
  • /templets/你的模板名/js/：JavaScript 脚本文件。
  • /templets/你的模板名/inc/：存放一些公共的、可复用的模板片段（如 head.htm, footer.htm 有时会放在这里）。

希望这份详细的教程能帮助你顺利上手 Dedecms 模板修改！祝你玩得开心！