核心理念：分离与替换

整个过程的核心思想是：将你设计的“样子”（HTML/CSS/JS）和 Dedecms 的“功能”（PHP/数据库）分离开，然后通过 Dedecms 的模板引擎将它们重新组合在一起。

自己做的网站套dedecms教程
（图片来源网络，侵删）

第一步：准备工作

  1. 环境准备：

    • 你需要一个本地服务器环境，如 XAMPP、WampServer 或 phpStudy，这些软件一键集成了 Apache、PHP 和 MySQL,方便你本地调试。
    • 成功安装并运行了 Dedecms 系统，如果你还没有，可以去 Dedecms 官网下载最新版本并按照说明安装到本地环境的 htdocs 或 www 目录下。

  2. 素材准备：

    • 你的网站模板文件：一个完整的文件夹，包含 index.html、about.html 等所有页面，以及 css/、images/、js/ 等文件夹。
    • Dedecms 程序文件：你下载好的 Dedecms 压缩包。

第二步：分析你的静态模板

在动手之前，先仔细分析你的 index.html 文件，找出哪些部分是固定不变的，哪些部分是需要动态生成的。

  • 固定部分：
    • 网站头部：通常包含 Logo、主导航菜单，导航菜单如果后期要增减,就需要做成动态的。
    • 网站底部：通常包含版权信息、备案号、友情链接等。
    • 页眉 和 页脚：整个页面的最外层 <html>, <head>, <body> 结构。
  • 动态部分：
    • 轮播图：图片和标题可能需要从后台上传和管理。
    • 新闻列表、发布时间、点击量等。
    • 产品展示：产品图片、名称、简介等。
    • 内容页：文章的标题、正文、作者、发布时间等。

举个例子：

自己做的网站套dedecms教程
（图片来源网络，侵删）

你的 index.html 里可能有这样的代码块：

<!-- 这部分是固定的 -->
<div class="header">
    <div class="logo"><img src="images/logo.png" /></div>
    <ul class="nav">
        <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="news.html">新闻资讯</a></li>
        <li><a href="contact.html">联系我们</a></li>
    </ul>
</div>
<!-- 这部分是动态的，需要替换 -->
<div class="slider">
    <!-- 这里是轮播图，图片和链接会变 -->
</div>
<div class="news-list">
    <!-- 这里是新闻列表，标题和摘要会变 -->
    <h3>公司新闻</h3>
    <ul>
        <li><span>2025-10-27</span><a href="news_detail.html">公司乔迁新址，喜迎新发展</a></li>
        <li><span>2025-10-25</span><a href="news_detail.html">热烈祝贺我司荣获XX大奖</a></li>
        ...
    </ul>
</div>

第三步：修改和替换 Dedecms 默认模板

Dedecms 的模板文件都存放在 /templets/default/ 目录下，为了安全起见，不要直接修改 default 目录,最好的做法是：

  1. 创建自己的模板文件夹： 在 /templets/ 目录下新建一个文件夹，比如命名为 mywebsite。

  2. 复制核心模板文件： 将 /templets/default/ 目录下的以下核心文件复制到你新建的 mywebsite 文件夹中：

    自己做的网站套dedecms教程
    （图片来源网络，侵删）
    • index.htm (首页模板)
    • article_article.htm (文章内容页模板)
    • list_article.htm (文章列表页模板)
    • head.htm (头部公共模板)
    • footer.htm (底部公共模板)
    • style.css (默认样式文件,你可以替换或修改它)

  3. 用你的模板文件替换内容：

    • 替换首页：将你自己的 index.html 文件内容，复制并粘贴到 /templets/mywebsite/index.htm 中。

    • 替换样式：将你 css/ 文件夹里的所有 CSS 文件（如 style.css）上传到 /templets/mywebsite/css/ 目录下，然后修改 index.htm 中的 CSS 引用路径,确保指向正确的位置：

      <!-- 修改前 (Dedecms默认) -->
<link href="{dede:global.cfg_templeturl/}/style.css" rel="stylesheet" type="text/css" />
<!-- 修改后 (指向你的新CSS) -->
<link href="/templets/mywebsite/css/style.css" rel="stylesheet" type="text/css" />

    • 替换图片和JS：将你的 images/ 和 js/ 文件夹上传到 /templets/mywebsite/ 目录下，并同样修改 index.htm 中的引用路径。

第四步：将静态代码转换为 Dedecms 模板标签

这是最关键的一步，你需要把你静态模板中的“占位内容”替换成 Dedecms 的模板标签。

公共部分 (head.htm 和 footer.htm)

  • ：
    • 静态：<title>我的公司网站</title>
    • 动态：<title>{dede:global.cfg_webname/}</title>
  • 网站Logo：
    • 静态：<img src="images/logo.png" />
    • 动态：<img src="{dede:global.cfg_cmsurl/}/images/logo.png" /> (使用绝对路径更安全)
  • 底部版权：
    • 静态：© 2025 我的公司
    • 动态：&copy; {dede:global.cfg_powerby/} - {dede:global.cfg_webname/}

首页 (index.htm)

  • 调用顶级栏目（导航菜单）：

    <!-- 在你的静态模板中找到导航列表 -->
<ul class="nav">
    <!-- Dedecms 标签开始 -->
    {dede:channel type='top' row='8'}
    <li><a href="[field:typeurl/]">[field:typename/]</a></li>
    {/dede:channel}
    <!-- Dedecms 标签结束 -->
</ul>
    • type='top'：只调用顶级栏目。
    • row='8'：调用8个栏目。
    • [field:typeurl/]：栏目链接。
    • [field:typename/]：栏目名称。

  • 调用首页指定文档（如新闻列表、产品推荐）：

    <!-- 在你的静态模板中找到新闻列表区域 -->
<div class="news-list">
    <h3>公司新闻</h3>
    <!-- Dedecms 标签开始 -->
    {dede:arclist typeid='1' row='5' titlelen='30'}
    <li>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
    {/dede:arclist}
    <!-- Dedecms 标签结束 -->
</div>
    • typeid='1'：调用 ID 为1的栏目下的文章（你需要去后台找到“公司新闻”栏目的ID）。
    • row='5'：调用5篇文章。
    • titlelen='30'长度限制为30个字符。
    • [field:pubdate function="MyDate('Y-m-d',@me)"/]：发布时间，格式化为年-月-日。
    • [field:arcurl/]：文章链接。
    • [field:title/]。

  • 调用图片集（轮播图）：

    <!-- 在你的静态模板中找到轮播图区域 -->
<div class="slider">
    <!-- Dedecms 标签开始 -->
    {dede:arclist typeid='2' row='5' type='image'}
    <a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]" /></a>
    {/dede:arclist}
    <!-- Dedecms 标签结束 -->
</div>
    • type='image'：指定调用的是图片集类型的文档。

列表页 (list_article.htm) 和 内容页 (article_article.htm)

这两个页面的转换逻辑和首页类似,但它们有自己专属的标签。

  • 列表页：
    • 栏目名称：{dede:field.title/}
    • 文章列表循环：{dede:list pagesize='10'}...{/dede:list} (和 arclist 类似,但用于当前栏目下的列表)
    • 分页：{dede:pagelist listsize='4'/}
  • 内容页：
    • ：{dede:field.title/}
    • ：{dede:field.body/}
    • 发布时间：{dede:field.pubdate function="MyDate('Y-m-d',@me)"/}
    • 上下页：{dede:prenext get='pre'/} 和 {dede:prenext get='next'/'}

常用标签速查表：

功能 Dedecms 标签
网站名称 {dede:global.cfg_webname/}
网站路径 {dede:global.cfg_cmsurl/}
调用顶级栏目 {dede:channel type='top'}...{/dede:channel}
调用指定栏目文章 {dede:arclist typeid='1'}...{/dede:arclist}
调用文章列表 {dede:list}...{/dede:list}
文章链接 [field:arcurl/]
发布时间 [field:pubdate/] 或 {dede:field.pubdate/}
分页 {dede:pagelist/}

第五步：设置 Dedecms 后台

模板修改完成后，你需要告诉 Dedecms 使用你的新模板。

  1. 进入后台：登录你的 Dedecms 后台 (/dede/)。
  2. 设置默认模板：
    • 进入 【系统】-> 【系统基本参数】-> 【核心设置】**。
    • 找到 “站点默认模板目录” 选项，将其值修改为你的文件夹名 mywebsite。
  3. 检查并更新：
    • 进入 【生成】-> 【更新主页HTML】**，点击“生成主页”,看看是否能成功生成。
    • 如果报错，通常是模板标签写错了,仔细检查标签语法和闭合。
    • 进入 【生成】-> 【更新栏目HTML】 和 【更新文档HTML】**,生成所有页面。

第六步：测试与上线

  1. 本地测试：在本地环境中仔细检查所有页面，确保导航、链接、图片、列表显示都正常。
  2. 上传服务器：将本地服务器上修改好的整个网站文件夹（包括 Dedecms 程序和你的新模板）通过 FTP 上传到你的虚拟主机或服务器上。
  3. 配置数据库：在虚拟主机控制面板或 Dedecms 安装目录下的 data 文件夹中，找到 common.inc.php 文件，修改数据库连接信息,确保与服务器上的数据库信息一致。
  4. 最终测试：在浏览器中访问你的域名,再次检查所有功能是否正常。

总结与常见问题

  • 路径问题：这是最常见的问题，尽量使用绝对路径（如 /templets/mywebsite/css/style.css）或者 Dedecms 的全局变量（如 {dede:global.cfg_templeturl/}/style.css）来引用资源,避免使用相对路径。
  • 标签错误：确保所有标签都正确闭合，并且拼写无误，Dedecms 模板对标签格式要求比较严格。
  • 缓存问题：如果修改后页面没有变化，可以尝试清空浏览器缓存，或者在 Dedecms 后台的 【系统】-> 【性能选项】** 中清空所有缓存。
  • CSS 冲突：Dedecms 默认的 style.css 可能会和你自己的 CSS 冲突，你可以删除或重命名默认的 style.css,或者使用更具体的选择器来覆盖样式。

这个过程虽然看起来步骤多，但只要你一步步来，耐心调试，就一定能成功,祝你网站搭建顺利！