Discuz门户模板如何修改？-建站教程-锦华智联科技

准备工作：安全第一
核心概念：Discuz! 模板系统是如何工作的？
第一步：找到并备份你的模板文件
第二步：认识模板文件的结构
第三步：修改模板文件（实战）
- 修改网站标题和 Logo
- 修改顶部导航栏
- 修改幻灯片（轮播图）
- 区块（文章、推荐等）
- 修改页脚信息
第四步：使用模板变量和函数
第五步：修改 CSS 样式
第六步：上传并应用修改
进阶技巧与常见问题
- 如何制作一个全新的模板？
- 常见问题：修改后不生效怎么办？
- 如何利用官方资源？

准备工作：安全第一

在进行任何修改之前，请务比完成以下步骤,以防操作失误导致网站无法访问。

（图片来源网络，侵删）

网站全量备份：通过你的主机控制面板（如 cPanel, 宝塔面板）或 FTP，将整个网站目录（）和数据库都完整下载备份,这是最稳妥的方法。
开启 Debug 模式：在 Discuz! 后台开启调试模式，可以更清晰地看到错误信息。
- 路径：后台 -> 全局 -> 站点信息 -> 开启 开启论坛调试模式。
使用 FTP/SFTP 工具：推荐使用 FileZilla 等工具连接你的服务器,方便上传下载文件。

核心概念：Discuz! 模板系统是如何工作的？

Discuz! 采用 “模板引擎” 的机制，将 PHP 逻辑代码 和 HTML/CSS 展示代码 分离。

PHP 文件（后端逻辑）：位于 source/class/ 等目录，负责从数据库读取数据、处理业务逻辑。
模板文件（前端展示）：位于 template/ 目录，是纯 HTML 代码，里面嵌入了 Discuz! 的 模板变量 和函数。
编译过程：当用户访问一个页面时，Discuz! 的模板引擎会读取对应的模板文件，将其中的变量和函数替换成实际的内容，然后编译成一个临时的 PHP 文件（.php 文件），最后再执行这个 PHP 文件，生成最终的 HTML 页面发送给用户。

简单理解：模板文件就像是“装修设计图”，而 PHP 文件则是“建筑工人”，工人按照图纸来施工，最终呈现给你看的就是装修好的房子，我们修改模板，就是在修改这张“设计图”。

第一步：找到并备份你的模板文件

模板存放位置：通过 FTP 登录你的网站，进入 template/ 目录，你会看到以 default_ 开头的文件夹，这是 Discuz! 自带的默认模板，你自己的模板文件夹名通常会是 default 或其他你自定义的名字。
如何确认当前使用的模板：
1. 登录 Discuz! 后台。
2. 进入 界面 -> 风格管理。
3. 在“风格列表”中，找到你当前正在使用的模板,并记下它的目录名。
备份模板：
1. 在 FTP 中，找到你当前使用的模板文件夹（default）。
2. 将整个文件夹 下载到你的本地电脑。
3. 在本地电脑上，将这个文件夹 重命名（default_backup_20251027），这样，即使你修改失败,也可以随时恢复。

第二步：认识模板文件的结构

进入你的模板文件夹（default）,你会看到以下核心文件：

portal.htm：这是最重要的文件！ 门户首页的模板文件,我们大部分的修改都将在这里进行。
common/：公共文件夹，包含网站的头部 (header.htm)、底部 (footer.htm)、导航栏 (nav.htm) 等通用模块,修改这些文件会影响多个页面。
css/：样式表文件夹，common.css，控制网站的字体、颜色、布局等。
images/：图片文件夹，存放模板自带的图片，如 Logo、背景图、图标等。
script/：JavaScript 脚本文件夹。

工作流程：portal.htm 会通过  这样的代码，将 common/header.htm 的内容“包含”进来,从而组合成完整的页面。

（图片来源网络，侵删）

第三步：修改模板文件（实战）

我们以修改 portal.htm 为例。建议使用专业的代码编辑器（如 VS Code, Sublime Text, Notepad++）来打开和编辑这些文件,不要用记事本。

修改网站标题和 Logo

打开 portal.htm，找到 <title>
这里的都是变量。{$bbname} 就是你的网站名称,你可以直接修改它，注意：直接硬编码修改不利于维护，更好的方法是只修改 {$bbname} 这个变量对应的值，这个值在后台 -> 全局 -> 站点信息中设置。



Logo：找到 <div class="bm_h cl"> 下的 <h2 class="mbn">
<h2 class="mbn">
    <a href="{if $_G['uid']}home.php?mod=space&uid={$_G['uid']}{else}index.php{/if}" class="xi2">{$_G['member']['username']}</a>
    <span class="pipe">|</span>{lang login}
</h2>

这个可能不是 Logo，真正的 Logo 通常在 common/header.htm 中，打开它,寻找类似这样的代码：
（图片来源网络，侵删）
<div id="hd">
    <div class="wp">
        <h1><a href="index.php" class="lst"><img src="{IMGDIR}/logo.png" alt="{$bbname}" /></a></h1>
        <!-- ... 其他代码 ... -->
    </div>
</div>

{IMGDIR}/logo.png：{IMGDIR} 是一个变量，指向网站的 static/image/common/ 目录，所以这里的图片路径是 static/image/common/logo.png。
alt="{$bbname}"：图片的替代文字,是网站名称。

如何修改 Logo：

方法一（推荐）：将你的新 Logo 图片命名为 logo.png，然后通过 FTP 上传到 static/image/common/ 目录,覆盖旧文件。
方法二：修改 src 属性的值，指向你自己的图片路径，src="images/mylogo.png"（需要先将图片放到模板的 images 文件夹中）。


修改顶部导航栏
导航栏通常在 common/header.htm 或 common/nav.htm 中，找到类似 <ul class="cl nav"> 的结构，你会看到 <li> 标签列表。
<ul class="cl nav">
    <li><a href="index.php" {if CURMODULE == 'index'}class="a"{/if}>{lang homepage}</a></li>
    <li><a href="forum.php" {if CURMODULE == 'forum'}class="a"{/if}>论坛</a></li>
    <!-- 你可以在这里添加新的 <li> -->
    <li><a href="portal.php">门户</a></li>
    <!-- 或者删除旧的 <li> -->
</ul>
你可以直接编辑这里的文字和链接 href。{if CURMODULE == 'forum'}class="a"{/if} 是一个条件判断，表示如果当前模块是 forum（论坛），就给这个 <a> 标签添加 class="a" 样式,以高亮显示。
修改幻灯片（轮播图）
幻灯片是门户的精华部分，Discuz! 的幻灯片是 模块” 驱动的。


后台设置：

进入 内容 -> 专题管理。
点击“添加专题”，填写专题名称，选择“专题类型”为 “首页焦点图”。
中，你可以添加文章、外部链接等，每添加一个条目,就会在幻灯片中生成一张图片。
关键：确保你添加的文章或链接包含了 “缩略图”,这张缩略图就会成为幻灯片。



模板调用：

打开 portal.htm，找到调用幻灯片的代码块，通常是这样的：<!--{block/subject}-->

这行代码会调用后台设置的所有“首页焦点图”专题。
如果你想修改幻灯片的样式（比如高度、切换效果），你需要找到它对应的 CSS 和 JS，通常在 portal.htm 的头部或 common/header.htm 中会引入相关的 JS 文件（如 jquery.slider.js），在 css/common.css 中定义样式（如 .focus）。



区块
门户首页由多个“内容模块”拼接而成，最新文章”、“热门推荐”等。


后台设置：

进入 内容 -> 模块管理。
你会看到很多预设的模块，如“最新文章”、“最新主题”等。
你可以在这里调整模块的标题、显示数量、排序方式等。



模板布局：

打开 portal.htm，你会看到很多类似这样的代码：<div class="bm">
    <div class="bm_h cl">
        <h2>最新文章</h2>
    </div>
    <div class="bm_c">
        <!--{block/portal/list/rec}-->
    </div>
</div>

<!--{block/portal/list/rec}--> 就是调用“最新文章”这个模块内容的标签，你可以通过修改它前面的 <h2> 标签来修改模块标题。
如果你想调整模块的排列顺序，直接在 portal.htm 文件中剪切粘贴这些 <div class="bm"> 块即可。



修改页脚信息
页脚通常在 common/footer.htm 文件中，打开它，你会看到版权信息、备案号、统计代码等。
<div id="ft" class="cl">
    <div class="wp">
        <div id="flk" class="y">
            <div id="frt">
                <strong>{lang tongue}</strong>: <a href="javascript:;" onclick="setcookie('fastmode', 1, 2592000);location.reload();">{lang fastmode}</a> | <a href="javascript:;" onclick="setcookie('fastmode', 0, 2592000);location.reload();">{lang stablemode}</a>
            </div>
            <strong><a href="{if $_G['uid']}home.php?mod=space&uid={$_G['uid']}{else}index.php{/if}" target="_blank">{$_G['member']['username']}</a></strong>
            <span class="pipe">|</span>{lang login}
        </div>
        <div id="fcr">
            <p>Powered by <strong><a href="http://www.discuz.net" target="_blank">Discuz!</a></strong> <em>{VERHASH}</em></p>
            <p class="xs0">{lang index_cp}</p>
        </div>
    </div>
</div>
你可以在这里修改版权信息、添加你的 ICP 备案号、插入百度统计或 Google Analytics 代码等。

第四步：使用模板变量和函数
这是模板修改的灵魂，Discuz! 提供了大量的变量和函数来获取数据。


变量：以  开头，在模板中用  包裹。

{$bbname}：网站名称。
{$_G['uid']}：当前登录用户 ID。
{$_G['member']['username']}：当前登录用户名。
{lang pchome}：语言包中的文字，对应 lang_template.php 文件。



函数/块：以 <!--{...}--> 形式存在。

<!--{block/...}-->模块。
<!--{loop $variable $key $value}-->...<!--{/loop}-->：循环遍历数组。
<!--{if condition}-->...<!--{else}-->...<!--{/if}-->：条件判断。



如何查看所有可用的变量？
开启 开启论坛调试模式 后，在门户首页的源代码底部，Discuz! 会输出一个 debug 信息，里面包含了当前页面所有的可用变量,这是学习和调试的利器。

第五步：修改 CSS 样式
当你修改了 HTML 结构后，通常需要调整 CSS 来美化它。

CSS 文件：主要样式在 template/你的模板/css/common.css 中。
如何定位样式：在浏览器中（如 Chrome, Firefox）打开你的门户首页，按 F12 打开“开发者工具”，点击左上角的“选择元素”按钮（一个鼠标指向小方块的图标），然后用鼠标点击页面上的任何一个元素（比如一个标题、一个按钮），开发者工具会自动定位到对应的 HTML 代码和 CSS 样式。
修改方法：在 common.css 文件中找到对应的 CSS 选择器（如 .bm_h h2），然后修改其属性（如 color, font-size, padding），修改后保存文件,然后刷新浏览器页面即可看到效果。


第六步：上传并应用修改

保存文件：在你的代码编辑器中保存所有修改过的 .htm 和 .css 文件。
上传文件：通过 FTP 将这些修改过的文件上传回 template/你的模板/ 目录下的对应位置,覆盖旧文件。
清除缓存：这是最关键的一步！
后台清除：登录 Discuz! 后台，进入 工具 -> 清理缓存，勾选所有选项，点击“清理”。
服务器清除：如果后台清理无效，可能需要通过 FTP 删除 data/cache/ 目录下的所有文件。


刷新浏览器：按 Ctrl + F5 强制刷新浏览器页面,查看修改是否生效。


进阶技巧与常见问题
如何制作一个全新的模板？

复制一份：在 template/ 目录下，完整复制一份你想要作为基础的模板（如 default），并重命名为你的新模板名（如 mycooltemplate）。
全局替换：打开新模板文件夹下的所有 .htm 文件，使用代码编辑器的“全局替换”功能，将模板目录名（如 default）替换成你的新目录名（mycooltemplate）。
后台应用：进入后台 界面 -> 风格管理 -> 导入风格，选择你的新模板文件夹,导入即可。
开始创作：现在你就可以在 mycooltemplate 文件夹里随心所欲地修改了,不会影响原模板。

常见问题：修改后不生效怎么办？

缓存问题：90% 的原因都是缓存，请务必按照 第六步 中的方法彻底清除缓存。
文件权限问题：确保你上传的文件权限正确（通常是 644）。
语法错误：检查 .htm 文件中是否有未闭合的标签（如 <div> 没有对应的 </div>）。
模板文件路径错误：检查 <!--{template common/header}--> 这样的引用路径是否正确。

如何利用官方资源？

官方论坛：Discuz! 官方社区 是最好的学习场所，你可以搜索教程、下载模板、提问问题。
官方模板：官方会发布一些免费的模板,你可以下载下来研究其结构和实现方式。
插件市场：许多酷炫的功能（如图集、视频模块）可以通过插件实现,不一定非要修改模板。

希望这份详细的教程能帮助你成功修改你的 Discuz! 门户！祝你玩得开心！