第一部分：基础概念与准备工作

在开始制作模板之前,你需要了解几个核心概念。

discuz x3.1 模板制作
（图片来源网络，侵删）

模板引擎：Smarty

Discuz! 使用 Smarty 作为模板引擎，它的核心思想是 “逻辑与表现分离”。

  • PHP 文件 (后端逻辑)：负责数据处理、数据库查询、业务逻辑判断等，它们不关心 HTML 长什么样。
  • 模板文件 (前端表现)：负责 HTML 结构、CSS 样式和 JavaScript 交互，它们使用特定的 Smarty 标签来显示 PHP 传递过来的数据。

这种分离使得设计师可以专注于页面美化，而程序员可以专注于功能开发,互不干扰。

模板目录结构

一个标准的 Discuz! X3.1 模板存放在 static/image/common/ 目录下，假设我们要制作一个名为 mytheme 的新模板,其目录结构如下：

static/
└── image/
    └── common/
        └── mytheme/                 <-- 你的模板根目录
            ├── index.htm           <-- 首页模板
            ├── forumlist.htm       <-- 版块列表页
            ├── viewthread.htm      <-- 帖子内容页
            ├── ...                 <-- 其他页面模板
            ├── style/               <-- 样式和图片目录
            │   ├── style.css       <-- 主样式表
            │   ├── common.css      <-- 公共样式
            │   └── images/         <-- 模板专用图片
            │       ├── logo.png
            │       └── ...
            ├── script/             <-- 模板专用JS目录
            │   └── myscript.js
            └── logo.png            <-- 模板标志性图片（可选）

准备工作

  1. 备份原模板：在修改任何模板之前，请务必备份 default（默认模板）或你当前正在使用的模板，以防修改出错,可以随时恢复。
  2. 开启模板调试：在 Discuz! 后台 全局 -> 页面性能优化 中，关闭 模板编译缓存，这样你修改模板文件后，刷新页面就能立即看到效果，无需等待缓存更新。（开发完成后务必重新开启）
  3. 必备工具：
    • 代码编辑器：如 VS Code、Sublime Text、Dreamweaver 等,推荐使用支持语法高亮和代码折叠的编辑器。
    • 浏览器开发者工具：用于检查元素、调试 CSS 和 JavaScript,是前端开发的利器。

第二部分：模板制作核心流程

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

在 static/image/common/ 目录下创建你的模板文件夹，mytheme，你需要从 default 模板中复制一些关键文件到你的 mytheme 目录中。

discuz x3.1 模板制作
（图片来源网络，侵删）
  • 必须复制的文件：
    • index.htm (首页)
    • forumlist.htm (版块列表)
    • viewthread.htm (帖子内容)
    • discuz.htm (全局框架页，包含 <head>, <header>, <footer> 等公共结构)
    • header.htm (页面头部，通常包含 logo、导航等)
    • footer.htm (页面底部，通常包含版权信息、统计代码等)
  • 推荐复制的目录：
    • style/ 目录及其下的所有 CSS 文件和 images 子目录，这样你就可以在原有样式基础上进行修改,而不是从零开始。

步骤 2：理解模板继承与包含 (核心技巧)

Discuz! 模板采用了 include 和 {template} 指令来复用代码,这是模板制作的关键。

  • {template} 指令：用于加载同一模板目录下的其他模板文件。

    • 在 discuz.htm 中，会这样写：
      {template header}
{template footer}
    • 这表示 discuz.htm 会包含 header.htm 和 footer.htm 的内容，当你修改 header.htm 时，所有基于 discuz.htm 框架的页面（首页、版块页等）的头部都会同步更新。

  • include 指令：用于加载任意路径的文件，常用于加载 JS 和 CSS 文件。

    • 在 header.htm 中加载 CSS：
      <link rel="stylesheet" type="text/css" href="static/image/common/mytheme/style/style.css?{VERHASH}" />

步骤 3：修改模板文件 (以修改首页为例)

  1. 打开 index.htm：这是首页的主体内容。

    discuz x3.1 模板制作
    （图片来源网络，侵删）

  2. 定位要修改的区域：通过浏览器开发者工具，找到你想要修改的 HTML 元素，比如一个版块列表项 <li>。

  3. 理解 Smarty 标签：模板文件中充满了 包裹的标签，它们是 Smarty 的语法。

    • 变量输出：{$variable}。{$subject} 表示输出帖子标题。
    • 循环：{foreach from=$array item=item_name} ... {/foreach}，用于遍历一个数组,比如循环输出所有版块。
    • 条件判断：{if condition}...{else}...{/if}。{if $thread['digest']}...{/if} 判断帖子是否为精华帖。
    • 函数：{function_name param1='value1'}。{eval echo date('Y-m-d', $thread['dateline']);} 执行 PHP 代码输出格式化日期。

  4. 进行修改：

    • 修改 HTML 结构：比如你想把版块列表从 <ul> 改成 <div>，直接修改 HTML 标签即可。
    • 修改 CSS：打开 mytheme/style/style.css，根据你修改的 HTML 结构，添加或修改 CSS 类选择器。
    • 添加自定义内容：想在首页加一个公告栏？直接在 index.htm 的相应位置写入 HTML 代码，如果这个公告需要从后台控制，你需要修改对应的 PHP 文件，然后将数据传递给模板。（纯模板制作通常不涉及 PHP 修改）

步骤 4：预览与调试

  1. 保存你修改的 .htm 和 .css 文件。
  2. 清除浏览器缓存，或按 Ctrl + F5 强制刷新页面。
  3. 检查页面是否按预期显示，如果样式错乱，使用浏览器开发者工具检查 CSS 是否生效，选择器是否正确，如果某个变量没有显示，检查 PHP 文件是否正确地将该变量赋值给了模板。

第三部分：常用模板标签与函数速查表

标签/函数 描述 示例
{$variable} 输出一个变量 {$subject} (帖子标题)
{loop $array $key $value} 循环遍历数组，比 foreach 更常用 {loop $forumlist $fid $forum}
{$forum['name']}
{/loop}
{if condition}...{else}...{/if} 条件判断 {if $thread['digest']} <span>精华</span> {/if}
{template name} 包含另一个模板文件 {template header}
{eval ...} 执行一段 PHP 代码 {eval echo gmdate('Y-m-d', $thread['dateline']);}
{lang key} 输出后台设置的语言包内容 {lang 'plugin_something:hello'}
{CSRF} 输出 CSRF 令牌，用于表单提交 <input type="hidden" name="formhash" value="{FORMHASH}" />
{IMGDIR} 输出当前模板的图片目录路径 <img src="{IMGDIR}/images/logo.png" />
{STATICURL} 输出 static 目录的根路径 <script src="{STATICURL}/js/common.js"></script>

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

模板缓存与性能

  • 开发阶段：务必关闭后台的“模板编译缓存”。
  • 上线阶段：开启模板缓存，可以大幅提升网站访问速度，Discuz! 会在 data/template/ 目录下编译生成 .php 文件。

响应式设计

Discuz! X3.1 默认模板已经具备一定的响应式能力,你可以：

  • 使用媒体查询（@media）在 CSS 中为不同屏幕尺寸设置不同的样式。
  • 在模板中使用 {if $_G['mobile']} 这样的判断来为移动端加载不同的 HTML 结构或样式。

使用变量控制样式

很多样式可以通过后台变量来控制，这样用户可以在后台自定义，而不需要修改模板代码。 主题色可能是一个变量 {$style['highlightcolor']}，在 CSS 中可以这样使用：

a:hover {
    color: {$style['highlightcolor']};
}

注意：这些变量需要在 PHP 文件中预先定义并传递给模板。

创建插件模板

如果你制作的是一个插件，并且希望插件有自己的模板,最好的做法是：

  1. 在插件的目录下创建 template/ 文件夹。
  2. 将模板文件放在 template/default/ 下（default 是插件模板的默认风格）。
  3. 在插件中，使用 loadtemplate('template_name'); 来加载模板，而不是直接包含文件路径，这样可以更好地集成到 Discuz! 的模板体系中。

版权信息

在 footer.htm 中，通常会有 Discuz! 的版权信息。请务必保留这些信息，这是 Discuz! 开源协议的要求,你可以在此基础上添加自己的版权信息。

总结与建议

制作 Discuz! X3.1 模板是一个“模仿-修改-创造”的过程。

  1. 从模仿开始：仔细研究 default 模板的 discuz.htm、header.htm、footer.htm 是如何构建整个网站框架的。
  2. 逐步修改：不要试图一次性改完所有页面，先从一个简单的页面（如 footer.htm）开始,熟悉流程。
  3. 善用工具：浏览器开发者工具是你的眼睛,能帮你快速定位问题。
  4. 保持耐心：模板制作会遇到各种预想不到的问题，多检查、多对比、多思考,一定能解决。

希望这份详细的指南能帮助你顺利上手 Discuz! X3.1 的模板制作！祝你成功！