Discuz模板制作教程从哪开始学？-杰瑞科技汇

Discuz! 模板制作终极指南

Discuz! 的模板系统采用了类似 PHP 的模板引擎，核心思想是将 PHP 逻辑代码 与 HTML 页面结构 分离，这使得开发者可以专注于后端逻辑，而设计师则可以专注于页面美化和前端交互，无需关心复杂的 PHP 代码。

（图片来源网络，侵删）

第一部分：基础知识准备

在开始之前,你需要了解以下几个核心概念：

模板文件结构

一个标准的 Discuz! 模板目录通常位于 ./template/ 目录下，默认模板是 default，那么它的路径就是 ./template/default/。

一个自定义模板的结构如下：

./template/你的模板名/
├── common/          # 公共模板目录
│   ├── header.htm   # 公共头部 (包含 <head>, <header>, 导航等)
│   ├── footer.htm   # 公共底部 (包含页脚, 版权信息等)
│   └── ...          # 其他公共模块
├── forum/           # 论坛相关页面模板
│   ├── index.htm    # 首页
│   ├── viewthread.htm  # 帖子详情页
│   └── ...          # 其他论坛页面
├── member/          # 用户中心相关页面模板
│   ├── register.htm # 注册页
│   └── ...          # 其他用户中心页面
├── home/            # 个人空间相关页面模板
├── static/          # 静态资源目录 (存放 CSS, JS, 图片等)
│   ├── style.css    # 主样式文件
│   ├── script.js    # 主脚本文件
│   └── images/      # 图片文件夹
├── index.htm        # 首页模板 (forum/index.htm 不存在，会使用这个)
└── ...              # 其他页面模板

模板语法

Discuz! 模板语法非常简单，主要分为三类：

（图片来源网络，侵删）

变量输出：{变量名}
- {$_G[username]} 会输出当前登录用户的用户名。
- 如果变量是数组,可以使用来访问，{$_G[setting][sitename]} 会输出网站名称。
模板函数：函数名(参数1, 参数2)
- {lang('plugin/someplugin/name')} 用于加载语言包。
- {eval(php代码)} 可以在模板中直接执行一小段 PHP 代码（不推荐滥用）。
模板循环/判断：
-  ... ：遍历一个数组。
-  ...  ... ：进行条件判断。
-  默认内容 ：定义一个可替换的块。

模板包含与继承

模板可以互相引用,避免代码重复。

（图片来源网络，侵删）

包含：
- 这行代码会引入 common/header.htm 文件的内容，路径是相对于当前模板目录的。
继承 (高级)：Discuz! X 及以上版本支持类似 "模板继承" 的概念，通过  等标签，可以在一个父模板中定义好框架，子模板只需填充具体内容。

第二部分：制作你的第一个模板

我们将以制作一个极简的模板为例,一步步完成。

创建模板目录和基本文件

通过 FTP 或文件管理器，进入 ./template/ 目录。
创建一个新文件夹,命名为 myfirsttemplate (你的模板名)。
在 myfirsttemplate 目录下，创建以下目录和文件：
- common/ 目录
- static/ 目录
- static/images/ 目录
- common/header.htm
- common/footer.htm
- index.htm

你的目录结构现在看起来应该是这样：

./template/myfirsttemplate/
├── common/
│   ├── header.htm
│   └── footer.htm
├── static/
│   └── images/
└── index.htm

编写公共头部 (`common/header.htm`)

打开 header.htm，输入以下基本 HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{if $_G['gp_module'] == 'forum'}{if $_G['gp_action'] == 'viewthread'}{$_G['thread']['subject']} - {/if}{/if}{$_G['setting']['sitename']}</title>
    <!--{if $_G['basescript'] == 'forum' && $_G['gp_action'] == 'viewthread'}-->
    <meta name="description" content="{$_G['thread']['subject']} - {$_G['forum']['name']}">
    <meta name="keywords" content="{$_G['thread']['subject']}, {$_G['forum']['name']}">
    <!--{/if}-->
    <link rel="stylesheet" type="text/css" href="static/style.css" />
    <!--{if !empty($_G['setting']['css']['files'])}-->
        <!--{loop $_G['setting']['css']['files'] $cssfile}-->
        <link rel="stylesheet" type="text/css" href="$cssfile" />
        <!--{/loop}-->
    <!--{/if}-->
</head>
<body>
    <div class="header">
        <div class="container">
            <h1><a href="{$_G['siteurl']}">{$_G['setting']['sitename']}</a></h1>
            <!--{if $_G['uid']}-->
                <div class="user-info">欢迎, {$_G['username']} | <a href="home.php?mod=space&uid={$_G['uid']}">我的空间</a> | <a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">退出</a></div>
            <!--{else}-->
                <div class="user-info"><a href="member.php?mod=logging&action=login">登录</a> | <a href="member.php?mod=register">注册</a></div>
            <!--{/if}-->
        </div>
    </div>
    <div class="main-nav">
        <div class="container">
            <ul>
                <li><a href="forum.php">论坛</a></li>
                <li><a href="home.php">家园</a></li>
                <!--{loop $_G['setting']['navs'] $nav}-->
                    <li><a href="$nav[url]" target="$nav[target]">$nav[name]</a></li>
                <!--{/loop}-->
            </ul>
        </div>
    </div>
    <div class="main-content container">

代码解释：

{$_G['setting']['sitename']}：输出网站名称。
{$_G['uid']}：判断用户是否登录，$_G['username'] 输出用户名。
{$_G['siteurl']}：输出网站根目录 URL。
{$_G['setting']['navs']}：循环输出后台设置的导航菜单。
{FORMHASH}：一个安全验证码，在表单提交时必须用到。

编写公共底部 (`common/footer.htm`)

打开 footer.htm，输入收尾代码：

    </div> <!-- .main-content -->
    <div class="footer">
        <div class="container">
            <p>&copy; {echo dgmdate(TIMESTAMP, 'Y');} {$_G['setting']['sitename']} Powered by Discuz!</p>
        </div>
    </div>
</body>
</html>

编写首页模板 (`index.htm`)

首页模板是用户访问网站时默认看到的页面,我们让它包含公共头部和底部，并显示一个欢迎信息。

打开 index.htm，输入以下内容：

<!--{template common/header}-->
<div class="welcome-section">
    <h2>欢迎来到我的论坛！</h2>
    <p>这里是你的自定义首页内容。</p>
    <!--{if !$_G['uid']}-->
        <p>您尚未登录，请先 <a href="member.php?mod=logging&action=login">登录</a> 或 <a href="member.php?mod=register">注册</a>。</p>
    <!--{/if}-->
</div>
<!--{template common/footer}-->

代码解释：

：引入我们刚才写的头部。
：如果用户未登录，显示提示信息。
：引入我们刚才写的底部。

编写 CSS 样式

为了让我们写的页面好看一点,需要添加一些 CSS。

在 ./template/myfirsttemplate/static/ 目录下，创建一个名为 style.css 的文件，并写入以下内容：

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
/* 头部样式 */
.header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
}
.header h1 a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
}
.header .user-info a {
    color: #fff;
    text-decoration: none;
    margin-left: 15px;
}
/* 导航栏样式 */
.main-nav {
    background-color: #444;
    margin-bottom: 20px;
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.main-nav ul li {
    padding: 15px 20px;
}
.main-nav ul li a {
    color: #fff;
    text-decoration: none;
}
区域样式 */
.main-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    min-height: 400px;
}
.welcome-section {
    text-align: center;
    padding: 50px 0;
}
.welcome-section h2 {
    color: #333;
}
/* 底部样式 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

在后台应用你的模板

登录你的 Discuz! 后台。
进入 “界面” -> “风格管理”。
点击右上角的 “导入风格”。
在弹出的窗口中,选择 “从目录导入”，然后输入你的模板目录名：myfirsttemplate。
点击 “提交”，系统会自动扫描你的模板目录并创建一个新的风格。
导入成功后,你会看到名为 "My First Template" 的风格出现在列表中。
点击这个风格后面的 “启用” 按钮。
去前台刷新你的网站,就能看到你亲手制作的模板了！

第三部分：进阶技巧与资源

调试技巧

查看源代码：在浏览器中右键查看页面源代码，你会发现 Discuz! 已经将所有模板变量（如 {$_G[username]}）替换成了实际的值。
利用浏览器开发者工具：使用 F12 检查页面结构，你会发现很多 Discuz! 自动生成的 class 名（如 avt, pi 等），这些是 Discuz! 默认的样式钩子，你可以通过覆盖它们来修改默认模块的样式。
开启模板缓存：在后台 “全局” -> “性能选项” 中，可以开启模板缓存，调试时建议关闭，修改模板后能立即看到效果，上线后务必开启以提高性能。

模板变量 `$_G` (全局变量)

$_G 是 Discuz! 最重要的全局变量数组，几乎所有信息都在里面。

$_G['uid']：当前用户 ID。
$_G['username']：当前用户名。
$_G['group']：当前用户组信息。
$_G['member']：当前用户详细信息。
$_G['setting']：网站所有设置信息。
$_G['forum']：当前论坛版块信息。
$_G['thread']：当前帖子信息。

学习资源

官方文档：查阅 Discuz! 官方文档，了解更详细的函数和变量。
研究默认模板：./template/default/ 是最好的学习材料，仔细研究 default 模板是如何组织页面、如何使用循环和判断的。
社区和论坛：在 Discuz! 官方论坛或相关技术社区搜索，有很多开发者分享的经验和教程。

制作 Discuz! 模板的核心流程就是：

规划：确定你的模板结构和样式。
搭建框架：创建目录和 header.htm, footer.htm 等公共文件。
：为每个页面（如首页、帖子页）创建对应的 .htm 模板文件，使用  标签引入公共部分。
美化样式：在 static/style.css 中编写 CSS 来实现你的设计。
后台应用：在后台导入并启用你的新模板。

从最简单的模板开始,逐步学习更复杂的循环和判断，你很快就能掌握 Discuz! 模板制作的精髓，祝你成功！

Discuz模板制作教程从哪开始学？

Discuz! 模板制作终极指南

第一部分：基础知识准备

模板文件结构

模板语法

模板包含与继承

第二部分：制作你的第一个模板

创建模板目录和基本文件

编写公共头部 (`common/header.htm`)

编写公共底部 (`common/footer.htm`)

编写首页模板 (`index.htm`)

编写 CSS 样式

在后台应用你的模板

第三部分：进阶技巧与资源

调试技巧

模板变量 `$_G` (全局变量)

学习资源

99ANYc3cd6

Python StateModels怎么用？参数估计方法有哪些？

Java Excel导出下载失败怎么办？

Java Arrays.sort()底层排序算法是什么？

Capture NX2教程从哪开始学？

python resizeimage

Python数据分析视频教程怎么学更高效？

Linux下Python如何调用OpenSSL？

Python JPype安装问题如何解决？

ImageReady教程，从入门到精通怎么学？

Python admin如何exclude字段？

SQL Server 2008教程哪里能下载？

Python pkg resources 如何正确使用？

Python requests如何高效处理JSON数据？

Photoshop CS6实例教程，从入门到精通怎么学？

Python中Caffe的Reshape操作如何实现？

Java如何调用SQL Server存储过程？

Discuz模板制作教程从哪开始学？

Discuz! 模板制作终极指南

第一部分：基础知识准备

模板文件结构

模板语法

模板包含与继承

第二部分：制作你的第一个模板

创建模板目录和基本文件

编写公共头部 (common/header.htm)

编写公共底部 (common/footer.htm)

编写首页模板 (index.htm)

编写 CSS 样式

在后台应用你的模板

第三部分：进阶技巧与资源

调试技巧

模板变量 $_G (全局变量)

学习资源

相关推荐

Python数据分析视频教程怎么学更高效？

编写公共头部 (`common/header.htm`)

编写公共底部 (`common/footer.htm`)

编写首页模板 (`index.htm`)

模板变量 `$_G` (全局变量)