DiscuzX3门户模板怎么用？-网站模板-锦华智联科技

Discuz! X3 门户模板全攻略：从入门到精通

本教程主要分为以下几个部分：

（图片来源网络，侵删）

【基础篇】准备工作：你需要了解什么？
【入门篇】模板文件结构：门户模板的“家”在哪里？
【核心篇】模板标签系统：如何调用数据和内容？
【实战篇】制作一个简单的自定义模板
【进阶篇】模板高级技巧与注意事项
【资源篇】常见问题与学习资源

【基础篇】准备工作：你需要了解什么？

在开始之前,请确保您已经具备以下条件：

本地/服务器环境：推荐在本地搭建一个 Discuz! X3 的测试环境（如使用 phpStudy、XAMPP 等），避免直接在正式网站上操作，以防出错。
FTP/SFTP 工具：用于连接服务器，上传和下载文件，推荐使用 FileZilla。
代码编辑器：用于编辑模板文件，强烈推荐使用 VS Code、Sublime Text 或 Notepad++，它们有语法高亮，能极大提高效率。
基础知识：
- HTML：网页的骨架。
- CSS：网页的样式，控制布局、颜色、字体等。
- PHP：基础了解即可，知道 <?php ... ?> 是 PHP 代码块。
- Discuz! 模板标签：这是本教程的重点，Discuz! 使用自己的标签语法来替代 PHP 代码，方便用户修改。

【入门篇】模板文件结构：门户模板的“家”在哪里？

Discuz! X3 的所有模板文件都位于 static/ 目录下。

核心路径：/static/

/static/
├── image/          // 存放图片资源
├── js/             // 存放 JavaScript 文件
├── style/          // 存放 CSS 样式文件
└── template/       // **核心！存放所有模板文件**
    ├── default/    // 默认模板
    │   ├── block/  // **板块模板**，用于制作门户首页的各种内容块
    │   ├── common/ // 公共模板，如头部、底部、侧边栏等
    │   ├── forum/  // 论坛相关模板
    │   └── portal/ // **门户首页模板**，portal.htm
    │
    └── mytheme/    // 你自己创建的模板文件夹
        ├── block/
        ├── common/
        └── portal/

关键文件解释：

（图片来源网络，侵删）

/static/template/yourtheme/portal/portal.htm：这是门户首页的主模板文件，你打开网站首页时，看到的所有内容框架，都是在这里定义的。
/static/template/yourtheme/block/：这个文件夹是门户的灵魂，门户首页通常由多个内容区块（如“最新文章”、“热门主题”、“推荐专题”等）组成，每个区块的样式和结构都由这里的 *.htm 文件定义。
- article_list.htm: 文章列表模板。
- topic_list.htm: 专题列表模板。
- thread_list.htm: 论坛主题列表模板。
- 等等...
/static/template/yourtheme/common/：存放公共模板，这些模板被多个页面调用。
- header.htm: 网站头部（包含 Logo、导航栏等）。
- footer.htm: 网站底部（版权信息、备案号等）。
- menu.htm: 主菜单模板。
- cate_list.htm: 分类目录模板。

【核心篇】模板标签系统：如何调用数据和内容？

Discuz! 模板引擎使用一套独特的标签语法来动态生成内容，掌握这些标签，你就能随心所欲地调用论坛和门户的数据。

变量标签

用于显示一个简单的变量值。

{$_G[username]}          // 显示当前登录用户的用户名
{$_G[adminid]}           // 显示当前用户的 adminid
{$_G[siteurl]}           // 显示网站根目录 URL
{$_G[forum_title]}       // 显示论坛名称

循环标签

这是最常用的标签,用于遍历一个数组并重复执行一段代码，通常用于列表（如文章列表、主题列表）。

基本语法：

（图片来源网络，侵删）

<!-- loop from=$array key=$key value=$value -->
    <!-- 循环体内容，使用 $value 来访问数组元素 -->
    <li>{$value[subject]}</li> <!-- 显示文章标题 -->
<!-- /loop -->

实际例子（在 article_list.htm 中）：

<!-- loop from=$articles key=$key value=$article -->
    <div class="article-item">
        <h2><a href="{$article[url]}">{$article[subject]}</a></h2>
        <p class="summary">{cutstr($message[message], 150)}</p> <!-- 截取前150字作为摘要 -->
        <div class="meta">
            <span>作者：{$article[author]}</span>
            <span>时间：{date('Y-m-d', $article[dateline])}</span>
            <span>阅读：{$article[viewnum]}</span>
        </div>
    </div>
<!-- /loop -->

条件标签

用于根据条件判断是否执行某段代码。

基本语法：

<!-- if condition="$a > $b" -->
    <p>a 大于 b</p>
<!-- elseif condition="$a == $b" -->
    <p>a 等于 b</p>
<!-- else -->
    <p>a 小于 b</p>
<!-- /if -->

实际例子：

<!-- if $_G[uid] -->
    <p>欢迎您，{$_G[username]}！<a href="home.php?mod=space&do=logout">退出</a></p>
<!-- else -->
    <a href="member.php?mod=logging&action=login">登录</a> | <a href="member.php?mod=register">注册</a>
<!-- /if -->

函数标签

用于对变量进行处理,如截取字符串、日期格式化等。

{cutstr($string, 80)}           // 截取字符串 $string 的前80个字符
{date('Y-m-d H:i:s', $timestamp)} // 将时间戳格式化为 年-月-日 时:分:秒
{eval($php_code)}               // 执行一段 PHP 代码（**谨慎使用！**）

块调用标签

在 portal.htm 中，你需要使用这个标签来引入你在后台设置好的内容块。

{block/portal/文章列表}

这行代码会去 template/yourtheme/block/ 目录下寻找 article_list.htm 文件，并将其内容渲染到此处。

【实战篇】制作一个简单的自定义模板

目标：创建一个全新的门户首页，包含一个顶部横幅、三个文章列表区块和一个底部版权信息。

步骤 1：创建新模板文件夹

通过 FTP 进入 /static/template/ 目录，复制 default 文件夹，重命名为 my_simple_theme。

步骤 2：修改主模板 `portal.htm`

打开 /static/template/my_simple_theme/portal/portal.htm，清空原有内容，输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{$_G[forum_name]} - 门户首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入公共头部 -->
    {template common/header}
    <!-- 引入我们自定义的 CSS -->
    <link rel="stylesheet" type="text/css" href="static/my_simple_theme/style.css" />
</head>
<body>
    <!-- 顶部横幅 -->
    <div class="banner">
        <h1>欢迎来到我的网站！</h1>
        <p>这是一个由 Discuz! X3 自定义的门户首页。</p>
    </div>
    <div class="main-container">
        <div class="content-wrap">
            <!-- 左侧内容区 -->
            <div class="content">
                <!-- 调用文章列表块 -->
                {block/portal/推荐文章}
                {block/portal/最新文章}
                {block/portal/热门文章}
            </div>
            <!-- 右侧边栏 -->
            <div class="sidebar">
                <!-- 调用专题列表块 -->
                {block/portal/推荐专题}
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        {template common/footer}
    </div>
</body>
</html>

说明：

{template common/header} 和 {template common/footer} 分别引入了默认的头部和底部，如果你想完全自定义，也可以直接复制 common/header.htm 和 footer.htm 到你的模板文件夹里修改。
{block/portal/...} 是我们核心的块调用标签，现在这些块还不存在，我们需要去创建它们。

步骤 3：创建内容块模板

创建推荐文章块 (article_recommend.htm) 在 /static/template/my_simple_theme/block/ 目录下，新建一个文件 article_recommend.htm。

<!-- loop from=$articles key=$key value=$article -->
<div class="article-block">
    <h3><a href="{$article[url]}">{$article[subject]}</a></h3>
    <div class="article-info">
        <span class="author">作者：{$article[author]}</span>
        <span class="date">{date('Y-m-d', $article[dateline])}</span>
    </div>
</div>
<!-- /loop -->

创建最新文章块 (article_latest.htm) 同样在 block 目录下新建 article_latest.htm可以和上面类似，或者修改样式。
创建热门文章块 (article_hot.htm) 同上。

创建推荐专题块 (topic_recommend.htm) 在 block 目录下新建 topic_recommend.htm。

<!-- loop from=$topics key=$key value=$topic -->
<div class="topic-block">
    <h4><a href="{$topic[url]}">{$topic[subject]}</a></h4>
</div>
<!-- /loop -->

步骤 4：创建 CSS 样式文件

在 /static/template/my_simple_theme/ 目录下新建一个文件夹 style。

在 style 文件夹内新建一个文件 style.css。

body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; }
.banner { background: #333; color: #fff; text-align: center; padding: 50px 0; }
.main-container { max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.content-wrap { display: flex; }
.content { flex: 3; padding-right: 20px; }
.sidebar { flex: 1; background: #fff; padding: 15px; border-radius: 5px; }
.article-block { background: #fff; padding: 15px; margin-bottom: 15px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.article-block h3 { margin: 0 0 10px 0; }
.article-info { color: #888; font-size: 12px; }
.footer { background: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 30px; }

步骤 5：在后台应用新模板

登录 Discuz! 后台。
进入 “界面” -> “风格”。
在风格列表中,你应该能看到你新建的 my_simple_theme，点击其右侧的 “更新” 按钮。
进入 “门户” -> “页面管理”。
选择默认的首页,在 “页面风格” 下拉菜单中，选择 my_simple_theme。
保存。

刷新你的网站首页,你应该能看到一个全新的、由你亲手打造的门户界面了！你只需要去后台的 “门户” -> “内容” 中，创建文章和专题，并将它们分配到你创建的这些区块中，首页就会自动显示内容。

【进阶篇】模板高级技巧与注意事项

调试技巧：
- 如果页面显示异常,可以先检查 {template common/header} 和 {template common/footer} 是否存在或有无错误。
- 使用浏览器开发者工具（按 F12）检查元素，查看是 HTML 结构问题还是 CSS 样式问题。
- 在模板中临时添加 {debug} 标签，可以在页面底部看到一个变量列表，方便查看当前可用的变量。

模板继承： Discuz! X3 支持 extend 标签，允许你继承一个父模板，然后只修改其中的一部分，这对于微调默认模板非常有用。

{extend name="portal/portal_default"} <!-- 继承默认的 portal 模板 -->
{block name="header"} <!-- 只修改头部块 -->
    <!-- 你的自定义头部代码 -->
{/block}

安全第一：
- 不要轻易使用 {eval}，除非你完全理解其风险，它可能导致代码注入攻击。
- 修改模板前,务必备份原始文件。
- 保持模板文件和目录的权限正确（通常是 755 或 644）。
性能优化：
- 避免在一个模板文件中写过多的逻辑,尽量将复杂的逻辑在 PHP 文件中处理好，再传递给模板。
- 合理使用 CSS 和 JavaScript，减少 HTTP 请求。

【资源篇】常见问题与学习资源

常见问题 (FAQ)

Q: 为什么我的 {block/...} 调用后显示空白？
- A: 请检查三点：1. 后台“门户”->“内容”中是否创建了对应的内容块并分配了内容，2. block 文件夹下的 .htm 文件名是否与调用名称完全匹配（不区分大小写，但最好保持一致），3. .htm 文件中的循环标签是否正确，以及后台分配的内容类型是否与模板文件匹配（分配了专题，但模板文件里用的是 $articles 变量）。
Q: 如何修改导航栏？
- A: 导航栏通常在 common/header.htm 中，你可以直接修改这个文件，或者通过后台“界面”->“导航设置”来管理菜单项，但样式修改还是要靠编辑 header.htm 和 CSS。
Q: 如何在首页调用论坛某个特定版块的帖子？
- A: 这需要修改 PHP 文件，找到 source/module/portal/portal_index.php 文件，在 block_get_articles 函数中添加 fid (版块ID) 的筛选条件，这是一个比较高级的操作，需要一定的 PHP 编程能力。

学习资源

官方文档：虽然 Discuz! 官方文档对模板的说明不多，但依然是第一手资料。
第三方 Discuz! 论坛：如 Discuz! 官方论坛、Discuz! 技术论坛 等，搜索关键词“Discuz! 模板制作”、“Discuz! portal 模块”，可以找到大量网友分享的教程和经验。
代码审查：最好的学习方式是直接去研究 default 模板的源码，看看官方的模板是如何组织结构、调用标签和写样式的，你会发现很多实用的技巧。

希望这份详尽的教程能帮助您成功掌握 Discuz! X3 门户模板的制作与修改，祝您玩得开心！

DiscuzX3门户模板怎么用？

Discuz! X3 门户模板全攻略：从入门到精通

【基础篇】准备工作：你需要了解什么？

【入门篇】模板文件结构：门户模板的“家”在哪里？

【核心篇】模板标签系统：如何调用数据和内容？

变量标签

循环标签

条件标签

函数标签

块调用标签

【实战篇】制作一个简单的自定义模板

步骤 1：创建新模板文件夹

步骤 2：修改主模板 portal.htm

步骤 3：创建内容块模板

步骤 4：创建 CSS 样式文件

步骤 5：在后台应用新模板

【进阶篇】模板高级技巧与注意事项

【资源篇】常见问题与学习资源

常见问题 (FAQ)

学习资源

步骤 2：修改主模板 `portal.htm`