dede制作网页前台首页，如何快速搭建？-网页设计-锦华智联科技

核心概念

在开始之前,你需要理解 DedeCMS 的几个核心概念：

（图片来源网络，侵删）

网站后台: 你管理网站内容的地方，如文章、栏目、图片等，登录地址通常是 你的域名/dede/。
网站前台: 用户最终访问和看到的页面。
模板: 网站前台的结构和样式文件，它是一个 HTML 文件，里面嵌入了 DedeCMS 的特殊标签。
DedeCMS 的“指令”，用于从后台数据库中提取内容并显示在模板上。{dede:arclist} 用于调用文章列表。
栏目: 网站内容的分类，如“公司简介”、“产品中心”、“新闻动态”等。
模型: 内容的数据结构。“文章”模型有标题、作者、内容、点击量等字段；“产品”模型可能还有价格、规格等字段。

第一步：环境搭建与安装

在制作首页之前,你必须先有一个可运行的 DedeCMS 网站。

下载程序：
- 访问 DedeCMS 官网（或可靠的镜像站）下载最新稳定版程序，DedeCMS V5.7 SP2 是一个非常经典的版本。
- 下载后得到一个压缩包,如 DedeCMS-V5.7-SP2-Full-GBK.zip。
准备环境：
- 本地环境（推荐新手）： 使用集成环境软件，如 phpStudy (Windows) 或 MAMP (Mac)，这些软件已经集成了 PHP、MySQL 和 Apache/Nginx，一键即可启动。
- 虚拟主机（直接部署）： 购买一个支持 PHP 和 MySQL 的虚拟主机。
上传与安装：
（图片来源网络，侵删）
- 将下载的压缩包解压。
- 将解压后的文件夹（通常是 dede 或 upload 文件夹内的内容）通过 FTP 工具上传到你的服务器或本地环境的 www (或 htdocs) 目录下。
- 在浏览器中访问你的域名,http://localhost/ 或 http://www.yourdomain.com。
- 安装程序会自动启动,按照页面提示进行操作：
  - 环境检测： 程序会自动检测你的 PHP、MySQL 环境是否满足要求。
  - 安装协议： 点击“同意”。
  - 参数配置：
    - 网站信息： 设置网站名称、管理员邮箱。
    - 数据库配置： 如果是本地环境，数据库名、用户名、密码通常是 phpStudy 默认的（如 root, root, localhost），如果是虚拟主机，使用你的主机商提供的信息。
  - 完成安装： 安装成功后，系统会提示你删除 install 文件夹，以确保安全。
登录后台：
- 访问 你的域名/dede/，使用你刚才设置的管理员账号和密码登录。

第二步：后台基础设置（准备工作）

在制作模板之前,先在后台设置好网站的基本框架。

基本参数设置：
- 在后台菜单栏点击 “系统” -> “系统基本参数”。
- 站点设置： 填写网站名称、网站网址、网站关键词、网站描述等，这些信息会被模板调用，也有利于 SEO。
- 核心设置： 可以设置默认的栏目目录、文章命名规则等。
创建栏目：
（图片来源网络，侵删）
- 栏目是网站的骨架,点击 “核心” -> “栏目管理”。
- 点击 “增加顶级栏目”。
- 栏目名称： 公司简介”。
- 栏目目录： 系统会自动生成，你也可以手动修改，如 about，这将成为 URL 的一部分。
- 选择“使用栏目”。
- 栏目类型： 通常选择“频道首页”或“普通栏目”。
- 内容模型： 选择“文章”。
- 列表模板： （关键步骤） 这里我们暂时不选，等模板做好后再来关联。
- 重复此步骤,创建其他顶级栏目，如“产品中心”、“新闻动态”、“联系我们”等。
（测试数据）：
- 为了能看到首页效果,我们需要添加一些测试内容。
- 点击 “核心” -> “内容管理” -> “普通文章”。
- 选择一个栏目（如“新闻动态”），点击 “增加普通文章”。
- 填写文章标题、作者、来源、正文内容（可以使用编辑器），然后点击“确定发布”。
- 多添加几篇文章,方便我们测试列表模板。

第三步：制作首页模板

这是整个流程的核心,我们将创建一个漂亮的首页模板文件。

创建模板文件：
- 在 DedeCMS 中，模板文件存放在 /templets/default/ 目录下（default 是默认的模板文件夹名，你可以自定义）。
- 在 /templets/default/ 目录下，新建一个 HTML 文件，命名为 index.html，这就是我们的首页模板。

编写模板代码（HTML + DedeCMS 标签）：

下面是一个典型的首页模板结构,包含了头部、Banner、内容区和页脚，我会详细解释每个部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{dede:global.cfg_webname/}</title>
    <meta name="keywords" content="{dede:global.cfg_keywords/}">
    <meta name="description" content="{dede:global.cfg_description/}">
    <link rel="stylesheet" href="/templets/default/style.css"> <!-- 引入CSS文件 -->
</head>
<body>
    <!-- 1. 网站头部 -->
    <header>
        <div class="logo">
            <a href="/">
                <!-- 这里可以放你的 logo 图片 -->
                <img src="/templets/default/images/logo.png" alt="网站Logo">
            </a>
        </div>
        <nav>
            <ul>
                <li><a href="/" class="active">首页</a></li>
                {dede:channel type='top' row='8'}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:channel}
                <li><a href="/plus/guestbook.php">留言板</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 2. Banner 轮播图 -->
        <section class="banner">
            <!-- 使用幻灯片标签调用 -->
            {dede:arclist flag='h' row='5'}
            <div class="slide">
                <a href="[field:arcurl/]">
                    <img src="[field:litpic/]" alt="[field:title/]">
                    <p>[field:title/]</p>
                </a>
            </div>
            {/dede:arclist}
            <!-- 注意：轮播图功能通常需要配合 JS 实现，这里仅展示 HTML 结构 -->
        </section>
        <!-- 3. 公司简介 -->
        <section class="about">
            <h2>公司简介</h2>
            <div class="about-content">
                <!-- 调用指定ID的栏目内容 -->
                {dede:field name='description' function='htmlspecialchars(@me)'/}
                <a href="/about/" class="more-btn">查看更多</a>
            </div>
        </section>
        <!-- 4. 产品展示 -->
        <section class="products">
            <h2>产品中心</h2>
            <div class="product-list">
                <!-- 调用“产品中心”栏下的文章列表，每行显示4个 -->
                {dede:arclist typeid='2' row='4' titlelen='24' imgwidth='200' imgheight='200'}
                <div class="product-item">
                    <a href="[field:arcurl/]">
                        <img src="[field:litpic/]" alt="[field:title/]">
                        <h3>[field:title/]</h3>
                        <p>[field:info function='cn_substr(@me, 100)'/]...</p>
                    </a>
                </div>
                {/dede:arclist}
            </div>
            <a href="/products/" class="more-btn">查看更多</a>
        </section>
        <!-- 5. 新闻动态 -->
        <section class="news">
            <h2>新闻动态</h2>
            <div class="news-content">
                <div class="news-left">
                    <!-- 调用新闻列表，只显示一条带缩略图的 -->
                    {dede:arclist typeid='3' row='1' titlelen='36' imgwidth='300' imgheight='200'}
                    <a href="[field:arcurl/]" class="main-news">
                        <img src="[field:litpic/]" alt="[field:title/]">
                        <h3>[field:title/]</h3>
                        <p>[field:info function='cn_substr(@me, 150)'/]...</p>
                    </a>
                    {/dede:arclist}
                </div>
                <div class="news-right">
                    <!-- 调用新闻列表，排除第一条，显示4条 -->
                    {dede:arclist typeid='3' row='4' titlelen='24'}
                    <dl>
                        <dt>[field:pubdate function='strftime("%Y-%m-%d", @me)'/]</dt>
                        <dd><a href="[field:arcurl/]">[field:title/]</a></dd>
                    </dl>
                    {/dede:arclist}
                </div>
            </div>
            <a href="/news/" class="more-btn">查看更多</a>
        </section>
    </main>
    <!-- 6. 网站页脚 -->
    <footer>
        <p>Copyright &copy; {dede:global.cfg_webname/} All Rights Reserved.</p>
        <p>Powered by DedeCMS</p>
    </footer>
    <script src="/templets/default/js/jquery.min.js"></script> <!-- 引入JS库 -->
    <script src="/templets/default/js/main.js"></script>   <!-- 引入自定义JS -->
</body>
</html>

创建 CSS 和 JS 文件：
- 在 /templets/default/ 目录下新建 style.css 和 js 文件夹。
- 在 js 文件夹下新建 main.js。
- style.css 用于美化你的首页，main.js 用于实现轮播图等交互效果，这部分是纯前端开发，这里不展开。

第四步：常用标签详解

在上面的模板代码中,我们使用了很多 DedeCMS 标签，下面是关键标签的说明：

{dede:global.name/}: 调用后台设置的“系统基本参数”中的全局变量。
- cfg_webname: 网站名称
- cfg_keywords: 网站关键词
- cfg_description: 网站描述
{dede:channel}: 调用栏目列表。
- type='top': 只调用顶级栏目。
- row='8': 调用8个栏目。
- [field:typelink/]: 栏目链接。
- [field:typename/]: 栏目名称。
{dede:arclist}: 最常用的标签，用于调用文章列表。
- typeid='2': 只调用栏目ID为2的栏目下的文章。（非常重要） 你需要去后台“栏目管理”里查看每个栏目的ID。
- row='4': 调用4篇文章。
- titlelen='24': 标题长度，限制为24个字符。
- imgwidth='200' imgheight='200': 缩略图尺寸。
- flag='h': 调用带“h”标志的文章，常用于首页头条或Banner。
- [field:arcurl/]: 文章链接。
- [field:title/]: 文章标题。
- [field:litpic/]: 文章缩略图。
- [field:info function='cn_substr(@me, 100)'/]: 截取前100个字符。function 用于对字段内容进行处理。
- [field:pubdate function='strftime("%Y-%m-%d", @me)'/]: 发布日期，并格式化为“年-月-日”。
{dede:field name='description'}: 调用当前栏目的描述，在首页模板中，如果把它放在 {dede:global} 标签外面，它会调用首页的描述（通常为空），如果用在栏目列表页，则调用该栏目的描述。

第五步：关联模板并生成

模板写好了,但后台还不知道它存在，我们需要将它关联起来。

设置首页模板：
- 在后台,点击 “系统” -> “系统基本参数” -> “核心设置”。
- 找到 “主页链接名称” 和 “主页链接”。
- 在“主页链接名称”中填入“首页”（可以自定义）。
- 在“主页链接”中，点击后面的“选择”按钮，在弹出的窗口中选择你刚刚创建的 index.html 模板。
- 点击“保存”。
生成首页：
- 这是最后一步,也是最关键的一步，DedeCMS 是“静态生成”的，需要手动将数据库中的内容生成成 HTML 文件。
- 在后台菜单栏点击 “生成” -> “主页生成”。
- 点击 “更新主页HTML” 按钮。
- 系统会开始处理,完成后会提示你生成成功。

第六步：访问网站

打开你的浏览器,访问你的域名，你应该能看到一个由你亲手制作的、包含内容和数据的 DedeCMS 首页了！

总结与重要提醒

安全与维护： DedeCMS 已经过时，存在许多已知的安全漏洞，如果你打算用于正式项目，请务必：
- 及时更新到最新版本。
- 删除不必要的安装文件和示例数据。
- 修改后台目录名（如将 dede 改为 myadmin）。
- 定期备份数据库和网站文件。
- 考虑使用更现代的 CMS，如 WordPress、Typecho，甚至基于 Vue/React 的现代前端框架。
模板引擎： DedeCMS 的模板引擎比较基础，不支持现代的前端框架（如 Vue/React），所有交互逻辑都需要通过 jQuery 等库和原生 JS 实现。
学习价值： 尽管过时，但 DedeCMS 的“模板+标签+后台数据”的模式是早期 CMS 的典型代表，理解它有助于你了解 Web 开发的基本流程。

希望这个详细的教程能帮助你成功使用 DedeCMS 制作出你的网站首页！