Discuz! X3.5 手机模板概述

与旧版本不同,Discuz! X3.5 的手机端并非一个完全独立的系统，而是采用了“同一套数据，两套模板”的响应式设计理念。

discuz 2.5 手机模板
（图片来源网络，侵删）
  • 核心思想：后台设置一个默认的手机模板，当用户通过手机浏览器访问论坛时，系统会自动调用这个手机模板来渲染页面，而 PC 端用户则继续使用 PC 模板。
  • 优点：
    • 数据同步：手机端和 PC 端共用同一个数据库，用户、帖子、数据完全同步。
    • 管理方便：只需要在后台管理一套移动版设置，而不是维护两个独立的论坛。
    • SEO 友好：搜索引擎可以更好地识别同一个网站在不同设备上的内容，避免内容重复问题。

自带手机模板介绍

Discuz! X3.5 默认安装后，通常会包含以下几个手机模板（具体名称可能因版本或更新略有差异）：

  1. default (默认模板)

    • 这是最基础、最通用的手机模板，设计简洁，以列表和卡片式布局为主，加载速度快，兼容性好。
    • 特点：功能齐全，包含了论坛的核心模块（首页、版块、帖子、用户中心等），适合大多数中小型论坛。

  2. mobile (移动模板)

    • 这是专门为移动设备优化的模板,比 default 模板在交互和视觉上更“移动化”。
    • 特点：可能包含更多触摸友好的元素，如更大的点击按钮、更流畅的滑动效果等，很多新版本的 Discuz! 会将这个作为默认的移动模板。

  3. touch (触控模板)

    discuz 2.5 手机模板
    （图片来源网络，侵删）
    • 这个模板的名字就表明了它的设计理念——专为触摸屏优化。
    • 特点：通常有更现代化的 UI 设计，更注重手势操作和视觉体验，可能会采用类似原生 App 的界面风格。

如何查看和切换？ 登录 Discuz! 后台 -> 全局 -> 手机风格设置 -> 默认手机模板，在这里你就可以看到并选择上述这些模板。

如何修改手机模板？

修改手机模板和修改 PC 模板的方法基本一致，都是通过修改模板文件（HTML+CSS）和调用系统函数（PHP）来实现的。

模板文件存放位置

手机模板的文件位于论坛根目录下的 template/ 文件夹里，你会看到与后台模板名称对应的文件夹，mobile/ 或 touch/。

/
└── template/
    ├── default/          // PC 默认模板
    ├── forum_review/     // PC 另一个模板
    ├── mobile/           // 手机模板 (示例)
    │   ├── header.htm    // 公共头部
    │   ├── footer.htm    // 公共底部
    │   ├── forum.htm     // 版块列表页
    │   ├── viewthread.htm // 帖子详情页
    │   ├── index.htm     // 首页
    │   └── ...           // 其他页面
    └── ...

修改流程

  • 推荐做法：永远不要直接修改默认模板（如 mobile/），因为当你升级 Discuz! 时，这些默认模板文件会被覆盖，导致你的修改全部丢失。
  • 正确做法：在后台创建一个全新的模板，基于默认模板进行修改。

步骤：

discuz 2.5 手机模板
（图片来源网络，侵删）

  1. 后台创建新模板：

    • 进入 界面 -> 风格管理 -> 【添加新模板】。
    • 风格名称：给你的新模板起个名字，如“我的自定义手机模板”。
    • 所属目录：选择一个你想要基于修改的默认手机模板目录（mobile）。
    • 模板类型：选择 mobile。
    • 点击 提交，Discuz! 会自动为你创建一个新目录（如 mobile_my），并复制 mobile 目录下的所有文件。

  2. 修改新模板文件：

    • 通过 FTP 或文件管理器，进入 template/mobile_my/ 目录。
    • 使用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开你需要修改的 .htm 文件。
    • HTML 结构：修改页面的布局、模块位置等。
    • CSS 样式：修改 static/style/mobile.css (或类似文件) 中的样式，来改变颜色、字体、间距、响应式断点等。
    • PHP 变量：模板中会大量使用 Discuz! 的变量，如 {$_G['username']}, {$_G['forum']['name']} 等，这些是动态数据的占位符，通常不需要修改，但你需要了解它们的含义。

  3. 应用新模板：

    • 修改完成后,回到后台 全局 -> 手机风格设置，将 默认手机模板 切换到你刚刚创建的“我的自定义手机模板”。
    • 清理一下论坛缓存（工具 -> 更新缓存），然后用手机访问论坛查看效果。

常见修改需求与技巧

修改 Logo 和favicon

  • 位置：通常在 header.htm 文件中。
  • 方法：找到 <img src="...logo.png"> 这类代码，将 src 属性的路径替换为你自己设计的 Logo 图片路径（建议放在 static/image/ 目录下）。
  • Favicon：将你的 favicon.ico 文件上传到 static/image/common/ 目录，并确保 header.htm 中有对应的 <link> 标签引用它。

修改首页布局

  • 位置：index.htm 文件。
  • 方法：通过调整 HTML 代码的顺序和结构，可以改变首页各个模块（如公告、推荐版块、热门帖子等）的显示位置，配合修改 CSS，可以实现更复杂的布局效果。

修改页面颜色和主题

  • 位置：static/style/mobile.css 文件。
  • 方法：这是最核心的样式文件，你可以使用浏览器的“开发者工具”（F12）来实时调试颜色和样式，找到对应的 CSS 选择器，然后在 mobile.css 文件中进行修改，修改背景色可以搜索 body 或 .wrap 选择器。

添加自定义功能或模块

  • 方法：这需要一定的 PHP 和 Discuz! 框架知识。
    1. 在 .htm 模板文件中，你想要添加模块的地方，插入一个 HTML 结构，<div id="my-custom-module"></div>。
    2. 在对应的 PHP 文件中（forum.php 处理版块页面），找到渲染该页面的函数，在函数内添加获取你自定义数据的逻辑，并将数据赋值给一个模板变量，如 $_G['my_custom_data']。
    3. 在 .htm 文件中，使用循环语句 {loop}...{/loop} 或直接输出 {$_G['my_custom_data']} 的方式，将数据显示在你刚才定义的 HTML 结构中。

常见问题与解决方案

  1. 问题：手机模板和 PC 模板混用，或者样式错乱。 解决方案：检查后台 全局 -> 域名设置 中的 移动域名 是否配置正确，如果不需要移动域名，可以将其留空，确保 手机风格设置 中的模板选择无误。

  2. 问题：修改了模板文件后，网站没有变化。 解决方案：这是缓存问题，请务必在后台 工具 -> 更新缓存 中更新所有缓存，如果还不行，可以尝试在浏览器中强制刷新（Ctrl+F5）或清除浏览器缓存。

  3. 问题：想制作一个全新的、与默认模板完全不同的手机模板。 解决方案：这是一个比较复杂的工作，你可以：

    • 参考官方模板：仔细研究 mobile 模板的文件结构和代码逻辑，这是最好的学习材料。
    • 利用第三方资源：一些 Discuz! 模板制作网站或开发者社区可能会提供制作教程或开源模板。
    • 聘请专业人士：如果需求复杂且技术要求高，可以考虑聘请有 Discuz! 开发经验的开发者来完成。

Discuz! X3.5 的手机模板功能强大且灵活，对于站长来说，无论是日常维护还是深度定制，都有着成熟的方案，记住“基于默认模板创建新模板进行修改”是黄金法则，可以避免升级带来的麻烦，从修改简单的 Logo 和颜色开始，逐步深入到布局和功能调整，你完全可以打造出一个符合自己需求的、优秀的手机论坛。