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

DedeCMS 菜鸟模板制作全攻略

在开始之前,请先理解一个核心思想：DedeCMS 的模板不是凭空画出来的，而是在现有 HTML/CSS 网页的基础上，通过插入 DedeCMS 的“模板标签”来实现的。

你可以把 DedeCMS 模板想象成“填空题”：

• HTML/CSS 是题目的背景和框架（我的名字是 ____”）。
• DedeCMS 标签 是需要填写的答案（{dede:field name='typename'/}）。
• DedeCMS 系统 是批改作业的老师，它会自动把答案填进去，生成最终的网页。

第一部分：准备工作

1. 本地环境：在你的电脑上搭建一个 DedeCMS 运行环境，最简单的方式是使用集成环境包，如：
   • phpStudy (推荐，支持 Windows)
   • 宝塔面板 (推荐，支持 Linux/Windows，图形化操作更简单)
   • XAMPP (经典选择)
2. DedeCMS 程序：从 DedeCMS 官网下载最新稳定版程序，并解压到你本地环境的网站根目录（如 phpStudy/WWW/）。
3. 一个静态网页模板：这是制作 DedeCMS 模板的基础，你可以：
   • 自己用 HTML/CSS 写一个简单的静态网站。
   • 从网上下载一个免费的响应式网站模板（推荐，有很多漂亮的模板可选），下载后解压，你会看到 index.html、css/、images/、js/ 等文件夹。

第二部分：核心概念 - 模板标签

在开始修改之前,你必须认识 DedeCMS 最常用的几个标签，它们就像是魔法咒语，告诉 DedeCMS 这里该显示什么内容。

第三部分：实战步骤 - 制作你的第一个模板

假设你已经下载好了一个静态模板,里面有一个 index.html 文件。

步骤 1：重命名并放置文件

1. 将你的静态模板文件夹（my_template）重命名为一个有意义的名字，mymy_first_template。
2. 将这个 mymy_first_template 文件夹上传到 DedeCMS 程序的 /templets/ 目录下。

步骤 2：修改首页模板

用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开 /templets/mymy_first_template/index.html 文件。

修改网站标题和 Logo

• ：找到 <title> 标签，把里面的静态文字换成 DedeCMS 的标签。

  • 修改前：<title>我的个人博客 - 首页</title>
  • 修改后：<title>{dede:global name='cfg_webname'/} - {dede:field name='title'/}</title>
    • {dede:global name='cfg_webname'/} 是调用后台设置的网站全局名称。
    • {dede:field name='title'/} 是调用当前页面的标题（首页就是“首页”）。

• 网站 Logo：找到 Logo 图片的 <img> 标签，把 src 属性里的静态路径换成标签。

  • 修改前：<img src="images/logo.png" alt="Logo">
  • 修改后：<img src="{dede:global name='cfg_cmspath'/}/templets/mymy_first_template/images/logo.png" alt="{dede:global name='cfg_webname'/}">
    • {dede:global name='cfg_cmspath'/} 是调用网站的根目录，这样可以保证路径在任何地方都正确。

制作首页文章列表

找到静态模板中文章列表部分的 HTML 代码，它可能长这样：

<!-- 原始静态列表 -->
<div class="news-list">
    <div class="item">
        <h3><a href="detail.html">这是一篇文章的标题</a></h3>
        <p class="pic"><img src="images/pic1.jpg" alt="图片"></p>
        <p class="desc">这里是文章摘要，用来吸引读者点击阅读更多内容...</p>
        <span class="date">2025-10-27</span>
    </div>
    <div class="item">
        <h3><a href="detail.html">这是另一篇文章的标题</a></h3>
        <p class="pic"><img src="images/pic2.jpg" alt="图片"></p>
        <p class="desc">这里是另一篇文章的摘要...</p>
        <span class="date">2025-10-26</span>
    </div>
</div>

我们要用 DedeCMS 标签把它变成动态的，将上面的代码替换为：

<!-- DedeCMS 动态列表 -->
<div class="news-list">
    {dede:list pagesize='8'}
    <div class="item">
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p class="pic"><img src="[field:litpic/]" alt="[field:title/]"></p>
        <p class="desc">[field:description function='cn_substr(@me,150)'/]...</p>
        <span class="date">[field:pubdate function='strftime("%Y-%m-%d",@me)'/]</span>
    </div>
    {/dede:list}
</div>
<!-- 添加分页 -->
<div class="page">
    {dede:pagelist listsize='4' listitem='index pre pageno next end '/}
</div>

代码解释：

• {dede:list pagesize='8'} ... {/dede:list}：这是一个循环，DedeCMS 会自动在这里循环输出8篇文章。
• [field:arcurl/]：替换成每篇文章的真实链接。
• [field:title/]：替换成每篇文章的标题。
• [field:litpic/]：替换成每篇文章的缩略图。
• [field:description function='cn_substr(@me,150)'/]：替换成文章摘要，并只显示前150个字符。
• {dede:pagelist...}：在列表末尾添加分页条。

修改其他部分

• 栏目导航：找到导航栏的 <ul> 或 <nav> 标签，把里面的静态链接替换成 {dede:channel}
• 页脚信息：把页脚的版权信息、备案号等用 {dede:global name='cfg_powerby'/} 和 {dede:global name='cfg_beian'/} 等标签替换。