第一部分：准备工作
在修改任何文件之前,强烈建议你做好备份！
（图片来源网络，侵删）
- 备份网站数据：通过你的主机控制面板（如 cPanel）或 FTP 工具，将整个网站目录下载到本地。
- 备份数据库：在 Discuz! 后台 -> “工具” -> “数据备份” 中，将论坛数据库导出为
.sql文件。 - 开启模板调试模式：
- 登录 Discuz! 后台。
- 进入 “全局” -> “优化设置”。
- 找到 “模板调试” 选项，将其设置为 “开启”。
- 这样,模板修改后无需清除缓存即可立即看到效果，非常方便调试，修改完成后，记得改回“关闭”以提升性能。
第二部分：了解手机模板的结构
Discuz! 的模板文件位于 /static/ 目录下，手机模板和电脑模板是分开的。
- 进入模板目录：通过 FTP 或文件管理器，进入
static/目录。 - 找到手机模板文件夹：你会看到多个文件夹，如
image（图片）、js（JavaScript）、style（CSS）等，手机模板的核心文件通常位于mobile/目录下。/static/mobile/: 这是手机模板的根目录，包含了所有手机端可用的模板文件。/static/mobile/template/: 这里存放着各个页面的 HTML 模板文件（.htm）。/static/mobile/style/: 这里存放着 CSS 样式文件（.css）。/static/mobile/js/: 这里存放着 JavaScript 文件（.js）。
重要提示：/static/mobile/ 目录下可能还有其他主题文件夹，default/，默认情况下，论坛使用的是 default 主题，你的自定义修改也应该在这个文件夹内进行。
第三部分：核心修改步骤
步骤 1：修改页面布局和内容 (HTML 模板)
这是最直接的修改,主要编辑 .htm 文件来改变页面的结构和内容。
-
常用模板文件及其作用：
header.htm: 页面头部，通常包含 Logo、导航栏、搜索框等。footer.htm: 页面底部，通常包含版权信息、返回顶部、底部导航菜单等。forumlist.htm: 首页的板块列表页面。forumdisplay.htm: 单个板块的主题列表页面。viewthread.htm: 帖子详情页面。misc.htm: 包含登录、注册、发帖等弹窗或页面的模板。
-
如何修改：
- 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开对应的
.htm文件。 - 这些文件是 HTML 代码，但嵌入了 Discuz! 的模板标签，
{lang variable}: 语言变量，如{lang login}会显示登录文字。{eval ...}: 执行 PHP 代码并输出结果。{loop $variable $key $value}: 循环遍历数组。{template common/header}: 引入另一个模板文件，如common/header.htm。
- 你可以直接修改 HTML 标签、增减元素、调整顺序来实现布局的改变。
- 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开对应的
示例：修改 Logo
- 打开
mobile/template/header.htm。 - 找到
<img>标签，它通常包裹在<a>标签里，指向论坛首页。 - 修改
<img src="..." />中的src属性，指向你的新 Logo 图片路径（建议将图片放在static/mobile/image/目录下）。
步骤 2：修改样式和外观 (CSS)
CSS 负责控制页面的颜色、字体、间距、布局等视觉呈现。
-
主要 CSS 文件：
mobile/style/style.css: 这是手机端最主要的样式表，几乎所有手机端的视觉样式都在这里定义。mobile/style/common.css: 公共样式，可能被多个页面共用。
-
如何修改：
- 用代码编辑器打开
style.css。 - 修改 CSS 选择器和属性。
- 修改背景色：找到
body选择器，修改background-color属性。 - 修改字体颜色：找到
.header(头部) 或.postbody(帖子内容) 等选择器，修改color属性。 - 修改间距：修改
margin(外边距) 和padding(内边距) 属性。 - 修改按钮样式：找到
.btn或类似的选择器，修改其background,border,border-radius等属性。
- 修改背景色：找到
- 用代码编辑器打开
示例：修改头部背景色
- 打开
mobile/style/style.css。 - 搜索
.header或类似的选择器。 - 修改
background-color: #f8f8f8;为你想要的颜色，如background-color: #007bff;。
步骤 3：修改交互和功能 (JavaScript)
JavaScript 用于实现页面的动态效果，如点击按钮、下拉刷新、表单验证等。
-
主要 JS 文件：
mobile/js/common.js: 公共的 JavaScript 函数库。mobile/js/forum.js: 论坛相关功能的 JS，如发帖、回复等。mobile/js/script.js: 可能包含一些通用的脚本。
-
如何修改：
- 不建议新手随意修改 JS，因为错误的代码可能导致页面功能完全失效。
- 如果需要修改,请先理解代码逻辑，并做好备份。
- 常见的修改包括调整动画效果、修改 AJAX 请求的回调函数等。
第四部分：进阶修改技巧
使用浏览器开发者工具
这是最强大、最高效的修改和调试工具。
- 打开方式：在手机浏览器（或浏览器的“设备模拟器”模式）中，按
F12键打开开发者工具。 - 功能：
- 元素检查：点击工具左上角的“箭头”图标，然后点击页面上的任意元素，工具会自动定位到对应的 HTML 和 CSS 代码，你可以实时编辑这些代码，并立即在页面上看到效果，这对于调试 CSS 布局问题极其有用。
- 设备模拟：工具可以模拟不同手机型号的屏幕尺寸，方便你检查在不同设备上的显示效果。
- 网络请求：可以查看页面加载时请求了哪些资源（CSS, JS, 图片等），以及 AJAX 请求的详细信息。
修改图片资源
所有手机端使用的图片都应放在 static/mobile/image/ 目录下。
- 步骤：
- 将你的新图片上传到
static/mobile/image/目录。 - 在 CSS 或 HTML 模板中，找到引用旧图片的地方。
- 将路径修改为你的新图片路径,将
src="image/default/avatar.png"改为src="image/new/avatar.png"。
- 将你的新图片上传到
修改后台设置
很多手机端的样式和行为可以在后台直接配置,无需修改代码。
- 位置：“全局” -> “手机设置”
- 可设置项：
- 手机版首页板块显示方式：可以选择显示所有板块或仅显示指定板块。
- 手机版帖子列表显示方式：可以选择仅显示标题或显示标题+
- 手机版帖子内容图片显示方式：可以设置是否自动缩放图片。
- 手机版表情：可以自定义手机端显示的表情包。
- 导航菜单：可以自定义底部导航栏的链接和显示名称。
第五部分：常见问题与解决方案
-
问题：修改后看不到效果。
- 原因1：开启了缓存，请确保在后台开启了“模板调试”模式。
- 原因2：文件路径错误，检查你的图片或 CSS 引用路径是否正确。
- 原因3：修改了错误的文件，确认你修改的是
mobile目录下的文件，而不是default电脑模板目录。
-
问题：页面布局错乱。
- 原因：通常是 CSS 修改导致，使用浏览器开发者工具的“元素检查”功能，一步步定位是哪个 CSS 规则影响了布局。
-
问题：修改后功能异常（如无法登录、无法发帖）。
- 原因：很可能是不小心修改了 JavaScript 代码或 HTML 表单结构，请立即恢复备份，并仔细检查你的修改。
修改 Discuz! 手机模板是一个系统性的工作，遵循以下流程可以让你事半功倍：
- 备份 -> 开启调试模式。
- 定位：明确要修改哪个页面（如首页、帖子页），找到对应的
.htm文件。 - 布局：编辑
.htm文件，调整 HTML 结构。 - 样式：编辑
.css文件，使用开发者工具实时调试，调整视觉表现。 - 功能：在后台“手机设置”中调整通用配置，避免不必要的代码修改。
- 图片：统一管理
static/mobile/image/目录下的资源。 - 测试：在多种手机设备和浏览器上充分测试，确保兼容性。
- 完成：测试无误后，关闭模板调试模式，并再次备份你的最终版本。
希望这份详细的指南能帮助你成功修改你的 Discuz! 手机模板！
