核心概念:分工与合作

可以把 Discuz! 的模板系统想象成一个建筑项目:

discuz模板的xml和html
(图片来源网络,侵删)
  • XML 文件:是 “施工蓝图”“设计说明书”,它定义了页面的结构布局可配置项,它不关心具体的内容是什么颜色、什么字体,但它规定了哪些区域是导航栏,哪些是帖子列表,哪些是页脚。
  • HTML 文件:是 “实际建造的房间”,它根据 XML 蓝图的指示,填充了具体的样式和,它包含了 CSS 样式表和 JavaScript,决定了页面的外观、颜色、字体和交互效果。

协作流程: Discuz! 在生成一个页面时,会首先读取对应的 XML 文件,了解页面的结构框架,它会调用相应的 HTML 文件,将动态数据(如帖子内容、用户信息)填充到 XML 定义好的结构中,最终渲染出一个完整的、用户可见的 HTML 页面。


XML 文件 (模板的骨架)

XML 文件位于 template/你的模板目录/ 目录下,通常以 .xml 为后缀,它是一个结构化的文档,主要作用是定义模板的“骨架”。

XML 文件的作用

  • 定义页面结构:这是 XML 最核心的作用,它使用 <template> 标签来划分不同的页面模块。discuz.htm 定义了整个论坛的通用框架(头部、主体、底部),而 forumdisplay.htm 定义了版块列表页的特定结构。
  • 管理模板变量:通过 <variable> 标签,可以定义一些可以在后台“风格设置”里被修改的变量,比如网站的 Logo 地址、版权信息、底部统计代码等,这使得模板的定制更加灵活,无需修改代码即可更换一些关键元素。
  • 控制模块开关:通过 <block> 标签,可以定义页面上的一些可复用模块(如“热门主题”、“最新回复”),在后台可以控制这些模块是显示还是隐藏。
  • 提供元信息:XML 文件的开头通常会包含模板的名称、版本、作者、兼容的 Discuz! 版本等信息,方便管理和识别。

XML 文件示例 (简化版 discuz.xml)

<?xml version="1.0" encoding="gbk"?>
<template>
    <name>Default</name>
    <version>1.0</version>
    <author>Discuz!</author>
    <description>Default template for Discuz!</description>
    <!-- 定义可配置的变量 -->
    <variable name="sitename" type="text" default="我的网站" />
    <variable name="siteurl" type="text" default="https://www.mywebsite.com" />
    <variable name="logo" type="text" default="static/image/common/logo.png" />
    <!-- 定义页面模板文件 -->
    <template name="discuz">discuz.htm</template>
    <template name="forumdisplay">forumdisplay.htm</template>
    <template name="viewthread">viewthread.htm</template>
    <!-- ... 其他页面模板 ... -->
    <!-- 定义可复用的模块块 -->
    <block name="ad_headerbanner">header.htm</block>
    <block name="ad_footer">footer.htm</block>
    <!-- ... 其他模块块 ... -->
</template>

解析

  • <name>: 模板名称。
  • <variable>: 定义了一个名为 sitename 的变量,类型是文本,默认值是“我的网站”,在后台可以修改这个值。
  • <template>: 定义了 discuz 这个页面模板对应的 HTML 文件是 discuz.htm
  • <block>: 定义了一个名为 ad_headerbanner 的模块块,它由 header.htm 文件来渲染。

HTML 文件 (模板的血肉)

HTML 文件同样位于 template/你的模板目录/ 目录下,是模板的主体部分,包含了实际的 HTML 代码、CSS 和 JavaScript。

discuz模板的xml和html
(图片来源网络,侵删)

HTML 文件的作用

  • 渲染页面内容:这是 HTML 的主要职责,它包含了 <html>, <head>, <body> 等标准 HTML 标签,构建出页面的基本结构。
  • 包含样式和脚本:HTML 文件通常会通过 <link><script> 标签引入 CSS 样式表和 JavaScript 文件,这些文件定义了页面的视觉外观和交互行为。
  • 使用模板引擎语法:这是 HTML 与 Discuz! 后端数据交互的关键,Discuz! 使用自己的模板引擎(类似于 Smarty),允许在 HTML 文件中使用特定的语法来调用和显示后端传递过来的变量、循环数组、执行条件判断等。

模板引擎语法 (在 HTML 文件中使用)

这些语法是 PHP 和 HTML 之间的“桥梁”,让静态的 HTML 能够动态地展示数据。

语法 功能 示例
{变量名} 输出一个简单的变量值 {sitename} 会输出后台设置的网站名称。
{loop 数组名 变量1 变量2} 循环遍历一个数组,常用于列表渲染。 {loop $threadlist $thread} 会遍历帖子列表。
{/loop} 结束一个循环。 {/loop}
{if 条件} 条件判断,如果条件为真则执行内部代码。 {if $thread['authorid'] == $_G['uid']} 判断是否是楼主。
{else} 条件不成立时执行的代码块。 {/if}
{/if} 结束一个条件判断。

HTML 文件示例 (简化版 discuz.htm 片段)

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">{if $_G['forum']['name']}{$_G['forum']['name']} - {/if}{$_G['setting']['sitename']}</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css">
</head>
<body>
    <!-- 头部区域,通常包含Logo和导航 -->
    <div id="header">
        <a href="{$_G['siteurl']}"><img src="{LOGO}" alt="{$_G['setting']['sitename']}"></a>
        <!-- 这里可能还会包含 {block 'ad_headerbanner'} -->
    </div>
    <!-- 主体内容区域 -->
    <div id="main">
        <!-- 这里是各个具体页面的内容,比如版块列表或帖子详情 -->
        <!-- {template 'forumdisplay'} 或 {template 'viewthread'} 会在这里被调用 -->
    </div>
    <!-- 底部区域,包含版权信息等 -->
    <div id="footer">
        <p>Copyright &copy; {$_G['setting']['sitename']} - {$_G['setting']['sitecopyright']}</p>
        <!-- 这里可能还会包含 {block 'ad_footer'} -->
    </div>
    <!-- 引入JavaScript文件 -->
    <script type="text/javascript" src="static/js/common.js"></script>
</body>
</html>

解析

  • {$_G['setting']['sitename']}: 这是一个 Discuz! 的全局变量,表示网站设置中的网站名称。
  • {LOGO}: 这是在 XML 文件中定义的变量,在渲染时会被替换成实际的 Logo 图片路径。
  • {block 'ad_headerbanner'}: 这是一个块调用,会执行 XML 中定义的 <block name="ad_headerbanner"> 所指向的 header.htm 文件,并将结果渲染在这里。
  • {template 'forumdisplay'}: 这是一个模板调用,表示在当前位置插入 forumdisplay.htm 的内容,实现了页面的嵌套。

总结与关系

特性 XML 文件 HTML 文件
角色 结构/配置层 (蓝图) 表现/逻辑层 (实体)
位置 template/模板目录/ template/模板目录/
作用 定义页面布局框架
定义可配置的后台变量
定义可复用的模块
渲染最终的 HTML 页面
包含样式和脚本
通过模板引擎调用后端数据
交互 被 Discuz! 后台解析,用于生成配置和模块列表 被 Discuz! 模板引擎解析,将变量和循环替换为实际数据

最终流程

  1. 用户访问论坛
  2. Discuz! 后端根据请求的 URL(如 forum.php?fid=1)确定需要加载 forumdisplay 页面。
  3. 系统读取 template/你的模板目录/forumdisplay.xml,了解这个页面的基本结构。
  4. 系统读取 template/你的模板目录/forumdisplay.htm 文件。
  5. 模板引擎开始解析 forumdisplay.htm 文件:
    • 遇到 {变量名},从数据库或缓存中获取数据并替换。
    • 遇到 {loop $array $v},循环遍历数组,生成列表项。
    • 遇到 {block name},执行对应的模块文件。
    • 遇到 {template name},嵌入另一个页面模板。
  6. 一个完整的、包含所有数据和样式的 HTML 页面被生成并发送给用户的浏览器。

理解 XML 和 HTML 的这种分工合作关系,对于学习和定制 Discuz! 模板至关重要,修改 XML 主要是调整结构和后台可选项,而修改 HTML 则是直接改变页面的外观和布局。

discuz模板的xml和html
(图片来源网络,侵删)