Destoon企业模板制作教程如何入门？-建站教程-锦华智联科技

Destoon 企业模板制作完整教程

第一部分：准备工作与基础知识

在开始之前,你需要了解以下内容并准备好相应工具：

（图片来源网络，侵删）

服务器环境：
- 操作系统：Linux (推荐 CentOS/Ubuntu) 或 Windows。
- Web 服务器：Apache (推荐) 或 Nginx。
- PHP 版本：建议 PHP 7.0 - 7.4，Destoon 4.0 对新版本 PHP 支持良好。
- 数据库：MySQL 5.6+ 或 MariaDB。
开发工具：
- 代码编辑器：强烈推荐 VS Code (免费、强大)、Sublime Text 或 PhpStorm。
- FTP/SFTP 客户端：用于上传文件到服务器，如 FileZilla。
- 浏览器开发者工具：Chrome DevTools 或 Firefox Developer Tools，用于调试 HTML、CSS 和 JavaScript。
Destoon 程序：

从 Destoon 官网下载最新稳定版程序，并上传到你的服务器进行安装。
（图片来源网络，侵删）
基础知识要求：
- HTML：网页的骨架，必须熟练。
- CSS：网页的样式，必须熟练，建议学习 CSS3 新特性。
- JavaScript (JS)：网页的交互行为，基础了解即可，高级功能需要掌握。
- PHP：了解基本语法，特别是变量、数组、循环、函数、包含文件等，Destoon 模板是 PHP 和 HTML 的混合体。
- SQL：了解基本的数据库查询语句，用于理解 Destoon 的数据调用。

第二部分：Destoon 模板核心机制

理解 Destoon 的模板机制是制作模板的关键。

模板目录结构 Destoon 的所有模板文件都存放在 templates/ 目录下，每个模板都有一个独立的文件夹，templates/default/ 是默认模板，你可以创建 templates/mycompany/ 作为你的新模板。

一个典型的模板目录结构如下：

（图片来源网络，侵删）

templates/mycompany/
├── index/          # 首页相关文件
│   ├── index.php   # 首页主文件
│   └── ...
├── style/          # CSS 样式文件
│   └── main.css    # 主样式表
├── js/             # JavaScript 文件
│   └── main.js     # 主脚本文件
├── module/         # 各模块页面文件
│   ├── company/    # 企业模块
│   │   ├── index.php
│   │   ├── show.php
│   │   └── ...
│   ├── product/    # 产品模块
│   │   ├── index.php
│   │   ├── show.php
│   │   └── ...
│   └── ...
├── images/         # 模板专用图片
└── config.inc.php  # 模块配置文件 (非常重要)

模板引擎：DTTemplate Destoon 使用自己的模板引擎 DTTemplate，它的核心作用是将 PHP 代码从 HTML 中分离出来，使设计师可以专注于 HTML/CSS，而程序员专注于 PHP 逻辑。
- 变量输出：{$variable}
- 条件判断：{if condition}...{else}...{/if}
- 循环输出：{loop $array $key $value}...{/loop}
- 包含文件：{template 'file'}
全局变量与函数 Destoon 在所有页面都会加载一些全局变量和函数，你可以在模板中直接使用。
- $DT：全局配置数组，{$DT['siteurl']} 获取网站地址，{$DT['site_name']} 获取网站名称。
- $MODULE：模块数组，{$MODULE['company']['linkurl']} 获取企业模块首页链接。
- $MODULE[$module]：当前模块的信息数组。
- $catid：当前栏目 ID。
- $item：在循环中，代表当前循环到的元素。

第三部分：制作一个完整的模板（以首页为例）

我们将以制作一个全新的企业网站首页为例,走完整个流程。

步骤 1：创建模板目录和基础文件

在 templates/ 目录下创建你的新模板文件夹，mycompany。
在 mycompany 目录下创建必要的子目录：index, style, js, images。
在 style 目录下创建 main.css，在 js 目录下创建 main.js。
在 index 目录下创建 index.php，这是我们的首页主文件。

步骤 2：设计 HTML 结构

使用你熟悉的 HTML/CSS 技能，设计出首页的静态 HTML 结构，一个典型的企业首页包含：

Header (页头)：Logo、主导航菜单、搜索框、用户登录区。
Banner (轮播图)：展示公司形象或主打产品。
About Us (关于我们)：公司简介。
Products (产品展示)：推荐产品或产品分类。
News (新闻资讯)：公司动态或行业新闻。
Contact (联系我们)：联系方式、地址、地图。
Footer (页脚)：版权信息、友情链接、底部导航。

将这个静态 HTML 代码保存为 index/index.php 的初始内容。

步骤 3：整合 Destoon 全局元素

我们需要用 Destoon 的模板标签替换掉静态 HTML 中的固定部分。

替换网站标题：
替换为：
- $seo_title 是 SEO 专用标题，在后台可以设置。

引入 CSS 和 JS 文件：在 <head> 标签内添加：

<link rel="stylesheet" type="text/css" href="{DT_PATH}templates/{$module}/style/main.css" />
<script type="text/javascript" src="{DT_PATH}templates/{$module}/js/main.js"></script>

{DT_PATH} 是网站根目录变量。
{$module} 是当前模板目录名，这里就是 mycompany。

调用主导航菜单： Destoon 的导航菜单通常通过后台生成，我们只需调用它。
```
<div class="main-nav">
    {loop $MODULE $m}
    {if $m['islink']}
    <a href="{$m['linkurl']}">{$m['name']}</a>
    {/if}
    {/loop}
</div>
```
这段代码会循环所有模块,并输出其链接和名称。

调用页脚信息：

<footer>
    <p>Copyright &copy; {$DT['year']} {$DT['site_name']} All Rights Reserved.</p>
    <p><a href="{linkurl('contact')}">联系我们</a> | <a href="{linkurl('sitemap')}">网站地图</a></p>
</footer>

步骤 4：调用模块数据

这是最核心的一步,如何从数据库中获取数据并展示在页面上。

调用推荐企业 (企业模块)

在 index.php 中，找到展示推荐企业的位置，添加以下 PHP 代码和模板标签。

<?php
// 在 index.php 文件的开头，PHP 代码区域内添加
$company_tags = get_tags('moduleid=2&order=edateline&pagesize=6'); // moduleid=2 是企业模块，调用6条按发布时间排序的企业
?>

然后在 HTML 中，使用循环标签来展示：

<div class="featured-companies">
    <h2>推荐企业</h2>
    <div class="company-list">
        {loop $company_tags $t}
        <div class="company-item">
            <a href="{$t['linkurl']}"><img src="{thumb($t['logo'], 100, 100)}" alt="{$t['company']}"></a>
            <h3><a href="{$t['linkurl']}">{$t['company']}</a></h3>
            <p>{$t['introduce']}</p>
        </div>
        {/loop}
    </div>
</div>

get_tags() 是 Destoon 的核心函数，用于获取数据列表。
thumb() 是缩略图函数，自动生成指定尺寸的图片。

调用产品信息 (产品模块)

<?php
// 在 index.php 中添加
$product_tags = get_tags('moduleid=3&order=addtime&pagesize=8&areaid='.$_areaid.'&catid='.$_catid.'&level=3'); // moduleid=3 是产品模块
?>

在 HTML 中循环展示：

<div class="hot-products">
    <h2>热门产品</h2>
    <ul>
        {loop $product_tags $t}
        <li>
            <a href="{$t['linkurl']}"><img src="{thumb($t['img'], 180, 180)}" alt="{$t['title']}"></a>
            <a href="{$t['linkurl']}">{$t['title']}</a>
        </li>
        {/loop}
    </ul>
</div>

调用新闻资讯 (资讯模块)

<?php
// 在 index.php 中添加
$news_tags = get_tags('moduleid=1&order=addtime&pagesize=10'); // moduleid=1 是资讯模块
?>

在 HTML 中循环展示：

<div class="news-section">
    <h2>公司新闻</h2>
    <ul>
        {loop $news_tags $t}
        <li><span class="date">{date('Y-m-d', $t['addtime'])}</span><a href="{$t['linkurl']}">{$t['title']}</a></li>
        {/loop}
    </ul>
</div>

步骤 5：配置模板与后台设置

设置模板：登录 Destoon 后台，进入 系统 -> 界面 -> 模板设置，将你的新模板 mycompany 设置为前台默认模板。
配置模块：进入 模块管理，找到对应的模块（如企业、产品），在 模块设置 -> 模板设置 中，你可以为该模块的不同页面指定不同的模板文件（例如列表页用 list.php页用 show.php）。
生成页面：为了提高访问速度，Destoon 支持生成静态 HTML 页面，在后台 更新 -> 生成 菜单下，你可以生成首页、栏目页、内容页等。

第四部分：高级技巧与注意事项

模块化开发：
- config.inc.php：这是每个模块的配置文件，你可以在这里定义该模块需要哪些变量、调用哪些数据、分页大小等，在产品模块的 config.inc.php 中，你可以设置默认每页显示 20 个产品。
- module.php：模块的核心逻辑文件，处理表单提交、数据入库等操作。
SEO 优化：
- Destoon 的模板系统已经内置了强大的 SEO 支持，在模板中使用 {$seo_title}, {$seo_keywords}, {$seo_description} 变量，这些变量会根据当前页面（如首页、栏目页、内容页）自动从后台获取对应的 SEO 设置。
- 为图片添加 alt 属性，使用语义化的 HTML 标签（如 <nav>, <article>, <section>）。
响应式设计：在制作 CSS 时，使用媒体查询（@media）让你的模板能够适配手机、平板和桌面电脑，这是现代网站的必备要求。
调试技巧：
- 如果页面显示异常,先检查 templates_c/ 目录下的缓存文件是否过期，尝试清空缓存。
- 使用 print_r($variable) 或 var_dump($variable) 在 PHP 代码中打印变量，查看其结构，帮助你理解数据。
- 浏览器开发者工具是你的好朋友,可以实时修改 HTML/CSS 并查看效果，排查样式问题。
版权与规范：

尊重 Destoon 的版权，不要移除 Destoon 的版权信息（除非你购买了商业授权）。
保持代码整洁,添加必要的注释，方便日后维护。

第五部分：学习资源

Destoon 官方论坛：https://www.destoon.com/bbs/ - 这是最重要的学习社区，有大量模板教程、问题解答和二次开发案例。
Destoun 官方文档：虽然文档可能不够新，但基础原理是相通的。
开源模板参考：下载官方默认模板或其他优秀的付费/免费模板，研究其代码结构和实现方式，是学习的捷径。

制作 Destoon 模板是一个结合了前端技术和 Destoon 自身规则的工程，核心在于 “理解规则，善用工具”，从模仿默认模板开始，逐步尝试修改和调用数据，最终你就能独立开发出功能完善、界面美观的个性化模板，祝你成功！