Discuz! X3.2 的模板系统非常灵活强大,允许用户和开发者通过修改模板文件来定制论坛的外观和风格,而无需修改核心程序代码,这对于站长来说至关重要,因为它可以在不破坏系统稳定性的前提下,实现个性化的论坛设计。

discuz x3.2 论坛模板
(图片来源网络,侵删)

下面我将从几个方面为您详细解析 Discuz! X3.2 的模板:


模板文件结构

Discuz! X3.2 的模板文件都存放在服务器的特定目录下,了解这个结构是修改模板的第一步。

默认的模板文件路径是:/static/

在这个目录下,通常会有一个名为 default 的文件夹,这是系统自带的默认模板,如果您安装了第三方模板,它们会以独立的文件夹形式存在于 /static/ 目录下。

discuz x3.2 论坛模板
(图片来源网络,侵删)

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

/static/
├── default/                 // 默认模板文件夹
│   ├── image/              // 模板使用的图片资源
│   ├── common/             // 公共模块模板 (如头部、底部、侧边栏等)
│   ├── forum/              // 版块相关模板
│   ├── home/               // 个人空间相关模板
│   ├── member/             // 用户中心相关模板
│   ├── portal/             //门户频道相关模板
│   ├── ...                 // 其他功能模块的模板
│   ├── style/              // CSS 样式文件
│   ├── script/             // JavaScript 脚本文件
│   ├── favicon.ico         // 网站图标
│   └── ...                 // 其他配置文件
├── my_custom_template/      // 您自己安装的第三方模板
│   └── (结构同上)
└── ...                     // 其他已安装的模板

核心文件夹说明:

  • common/: 存放全站通用的模板片段,
    • header.htm: 网站头部,包含 Logo、导航菜单等。
    • footer.htm: 网站底部,包含版权信息、统计代码等。
    • common.htm: 公共的页面结构,通常包含 {subtemplate header}{subtemplate footer}
  • forum/: 与论坛版块相关的模板,
    • discuz.htm: 首页/列表页模板。
    • viewthread.htm: 帖子内容页模板。
    • post.htm: 发帖/回帖页面模板。
  • style/: 存放样式表文件。
    • style.css: 主样式文件,定义了网站的颜色、字体、布局等。
    • common.css: 公共组件样式。
    • forum.css: 论坛特定样式。
    • 其他模块的 CSS 文件。
  • script/: 存放 JavaScript 脚本文件,用于实现交互效果。

模板引擎语法

Discuz! X3.2 使用自己的一套模板引擎语法,非常简洁易学,核心思想是使用大括号 来执行逻辑和输出变量。

变量输出

  • 简单变量: 直接使用花括号。

    {$_G['username']}  // 输出当前登录用户名
    {$_G['forum']['name']} // 输出版块名称
  • 数组变量: 使用点号 访问数组元素。

    {$post['author']} // 输出帖子作者
    {$thread['subject']} // 输出帖子标题
  • 函数调用: 在变量后面使用冒号 调用系统内置函数。

    {$_G['username']} // 原样输出
    {$_G['username']:date('Y-m-d H:i:s')} // 对用户名进行日期格式化(此为示例,实际需看函数支持)
    {$post['message']:nl2br()} // 将帖子内容中的换行符 `
    ` 转换为 `<br>`

逻辑控制

  • if 条件语句:

    <!--{if $_G['uid']}-->
        欢迎您, {$_G['username']}!
    <!--{else}-->
        您尚未登录,请先 <a href="member.php?mod=logging&action=login">登录</a>。
    <!--{/if}-->
  • loop 循环语句:

    <!--{loop $threadlist $thread}-->
        <li>
            <a href="forum.php?mod=viewthread&tid={$thread['tid']}">{$thread['subject']}</a>
            <span>作者: {$thread['author']}</span>
        </li>
    <!--{/loop}-->

    $threadlist 是一个数组,$thread 是循环中当前的元素。

模板包含

  • {template}: 包含同目录下的模板文件。

    <!--{template common/header}--> // 包含 common/header.htm 文件
    <!--{template forum/viewthread}--> // 包含 forum/viewthread.htm 文件
  • {subtemplate}: 功能与 template 类似,但更常用在框架性文件中,明确表示这是一个子模板。


如何修改和使用模板

在后台切换模板

  1. 登录 Discuz! 后台。
  2. 进入 【界面】 -> 【风格模板】
  3. 【风格列表】 中,您可以看到所有已安装的模板。
  4. 点击 【设置】 按钮,可以设置某个模板为默认风格,或者为特定用户组指定风格。
  5. 点击 【编辑】 按钮,可以直接在线编辑模板文件和 CSS 文件(不推荐新手直接在线编辑,容易出错)。

下载并手动修改模板

这是最推荐的方法,尤其是对于复杂的修改。

  1. 通过FTP下载: 使用 FTP 工具连接您的服务器,进入 /static/ 目录,下载您想要修改的模板文件夹(default)到本地电脑。
  2. 使用专业编辑器: 使用 VS Code、Sublime Text、Notepad++ 等代码编辑器打开下载的模板文件夹。切勿使用 Windows 自带的记事本,因为它可能会编码错误。
  3. 修改文件:
    • 修改 .htm 文件来调整页面结构和内容。
    • 修改 .css 文件来调整样式、颜色、布局等。
    • 修改 .js 文件来调整交互效果。
  4. 上传覆盖: 将修改后的文件通过 FTP 上传,覆盖掉服务器上原来的同名文件,上传时请确保文件编码为 UTF-8 无 BOM 格式,这是中文网站最常用的编码。

安装第三方模板

您可以从 Discuz! 官方模板市场、模板开发者网站或其他资源站点下载现成的模板。

  1. 下载模板: 下载的模板通常是一个 .zip 压缩包。
  2. 上传安装:
    • 登录后台,进入 【界面】 -> 【风格模板】 -> 【导入风格】
    • 点击 【浏览】,选择您下载的 .zip 模板文件。
    • 点击 【上传安装】,系统会自动解压并安装模板。
  3. 启用模板: 安装成功后,新模板会出现在风格列表中,您可以根据需要设置为默认风格。

推荐的学习资源

  1. 官方文档: Discuz! 官方论坛和文档库是最好的资源,虽然 X3.2 已经过时,但其模板原理在新版本中是相通的。
  2. 模板市场: 在官方模板市场浏览和购买模板,可以学习到优秀的设计和实现方式。
  3. 开发者社区: 关注一些知名的 Discuz! 开发者论坛或社区,他们经常会分享模板修改技巧和教程。
  4. 浏览器开发者工具: 这是你最重要的调试工具,在浏览器中按 F12 打开开发者工具,可以实时查看页面元素对应的 HTML 代码和 CSS 样式,帮助你快速定位需要修改的模板文件。

重要注意事项

  • 备份!备份!备份! 在修改任何模板文件之前,务必备份整个模板文件夹,一旦修改出错导致网站前台错乱,可以迅速恢复。
  • 文件编码: 始终使用 UTF-8 无 BOM 编码保存所有模板文件、CSS 文件和 PHP 文件,以避免出现乱码问题。
  • CSS 优先级: 如果修改样式不生效,很可能是 CSS 选择器的优先级不够高,可以使用浏览器开发者工具检查,并尝试使用更具体的选择器(如增加 idclass)来覆盖原有样式。
  • 不要修改核心程序: 模板系统的初衷就是避免修改 ./source/ 目录下的核心 PHP 文件,修改核心文件会在升级时被覆盖,导致所有修改丢失。

希望这份详细的指南能帮助您更好地理解和使用 Discuz! X3.2 的模板系统!