dede如何自动适配生成手机版网站？-DEDE建站-盈思创科技

创建独立的手机模板 (推荐)：为手机用户创建一套独立的模板文件，通过 PHP 代码判断用户设备,自动跳转到或调用手机模板。
使用响应式模板：修改或使用一套响应式的 CSS 模板，让同一套页面在不同设备上自动调整布局，这种方法更现代，但对 CSS 技术要求较高。

下面我将详细讲解这两种方法，重点推荐第一种，因为它更稳定、兼容性更好，也更符合 DedeCMS 的设计哲学。

（图片来源网络，侵删）

创建独立的手机模板 (最常用、最稳定)

这种方法的核心思想是：后台共用，前台分离，网站的后台管理和数据内容都是一套,但前台展示根据设备调用不同的模板文件夹。

详细步骤：

第 1 步：准备手机版模板文件

获取模板：你可以自己设计一套手机版模板，或者在网上下载 DedeCMS 的手机模板，很多模板网站都提供“PC+手机”双模板。

放置模板：将下载好的手机版模板文件，上传到你网站的 /templets/ 目录下，并创建一个新的文件夹，例如命名为 mobile。

你的目录结构会变成这样：

/templets/
├── default/          (你的PC版模板文件夹)
└── mobile/           (新建的手机版模板文件夹)
    ├── index.htm     (手机首页模板)
    ├── list_article.htm (手机文章列表模板)
    ├── article_article.htm (手机文章内容页模板)
    └── ... (其他手机模板文件)

第 2 步：修改 PHP 文件实现设备判断

这是最关键的一步，我们需要修改网站的核心 PHP 文件，让它能识别访问者是手机还是电脑,并做出相应处理。

找到核心文件：登录你的网站 FTP 或主机控制面板，找到根目录下的 index.php 文件。
备份文件：在修改之前，务必备份原始的 index.php 文件！
（图片来源网络，侵删）
添加判断代码：用代码编辑器打开 index.php 文件，找到类似 require_once(dirname(__FILE__)."/include/common.inc.php"); 这一行代码。

在其后面，添加以下 PHP 代码：

// ====================== 手机版跳转/适配代码 Start ======================
// 检测是否为移动设备访问
if (isset($_SERVER['HTTP_USER_AGENT'])) {
    $clientuseragent = strtolower($_SERVER['HTTP_USER_AGENT']);
    $clientkeywords = array('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile');
    // User-Agent 中包含任意一个关键词，则判定为移动设备
    if (preg_match("/(".implode('|', $clientkeywords).")/i", $clientuseragent) && !strpos(strtolower($_SERVER['REQUEST_URI']), 'mobile')) {
        // 这里选择一种方式：
        // 方式 A: 自动跳转到手机版域名 (如果你有手机域名 m.example.com)
        // header("Location: http://m.yourdomain.com".$_SERVER['REQUEST_URI']);
        // 方式 B: 不跳转，但调用手机版模板 (推荐！无需额外域名)
        // 设置一个全局变量，标记当前为手机访问
        $cfg_mobile = 'mobile';
    }
}
// ====================== 手机版跳转/适配代码 End ======================

代码解释：

这段代码会检查访问者的浏览器 User-Agent。
User-Agent 中包含了常见的手机设备关键词（如 iPhone, Android, Nokia 等），URL 中不包含 mobile（防止死循环）,就会执行下面的操作。
我强烈推荐使用“方式 B”，它不进行页面跳转，而是设置一个变量 $cfg_mobile = 'mobile';，这个变量将作为我们下一步调用手机模板的“开关”。

第 3 步：修改模板引擎文件以加载不同模板

DedeCMS 的模板是由一个核心文件 /include/dedetemplate.class.php 解析的，我们需要修改它，让它能根据我们设置的 $cfg_mobile 变量来选择不同的模板文件夹。

（图片来源网络，侵删）

找到并备份模板引擎文件：/include/dedetemplate.class.php
查找并修改代码：打开这个文件，找到 Display() 函数，在里面寻找获取模板路径的代码，通常在 function Display() 函数内，会有类似 $this->templateSource = $this->GetTemplate($filename); 的代码。

在 GetTemplate() 函数内部进行修改，找到类似 $filename = str_replace($this->config['template_dir'], '', $filename); 的逻辑，在其后添加判断逻辑，一个更稳妥的修改位置是在 function GetTemplate($filename) 函数中。

在 function GetTemplate($filename) 函数里，找到处理 $filename 的部分,修改为如下逻辑：

// 在 function GetTemplate($filename) 函数中查找并替换这部分代码
// 原始代码可能类似这样：
// if(!file_exists($filename))
// {
//     $filename = $this->config['template_dir'].$filename;
// }
// 修改为：
global $cfg_mobile;
$template_dir = $this->config['template_dir'];
// 如果设置了手机版变量，并且文件存在于手机模板目录，则使用手机模板
if ($cfg_mobile && file_exists($template_dir . $cfg_mobile . '/' . $filename)) {
    $template_dir .= $cfg_mobile . '/';
}
// 最终确定模板文件完整路径
if (!file_exists($template_dir . $filename)) {
    // 如果手机模板不存在，则回退到默认PC模板
    $template_dir = $this->config['template_dir'];
}
$this->templateSource = $template_dir . $filename;

代码解释：

这段代码会先检查全局变量 $cfg_mobile 是否被设置了（我们在 index.php 中设置的是 'mobile'）。
如果设置了，它会去 templets/mobile/ 目录下查找模板文件。
如果找到了手机模板，就使用它；如果没找到（比如某个页面还没做手机版），就回退到默认的 templets/default/ 目录。
这样就实现了无缝切换,且不会出错。

第 4 步：完善和测试

清理缓存：登录 DedeCMS 后台，点击“系统” -> “SQL命令行工具”，执行 Clear All 清理一下所有缓存。
测试：
- 用电脑浏览器访问网站，应该还是原来的 PC 版。
- 用手机浏览器访问同一个网址，或者使用浏览器的“开发者工具”模拟手机设备访问,你应该能看到手机版的模板已经生效了。
设置默认首页 (可选)：如果你希望用户一访问就进入手机版，可以在后台的“系统基本参数” -> “站点设置”中，将“主页链接”指向你的手机首页模板路径，如 templets/mobile/index.htm，但通常不推荐这样做，因为这样 PC 用户也无法访问了。

使用响应式模板 (更现代，但较复杂)

这种方法不需要创建两套模板，而是用一套模板，通过 CSS3 的媒体查询（Media Queries）来控制不同屏幕尺寸下的布局和样式。

基本步骤：

选择或修改模板：
- 购买或下载一套已经内置了响应式布局的 DedeCMS 模板。
- 如果你有现成的模板，可以自己修改，主要修改 CSS 文件。

编写响应式 CSS：

在你的 CSS 文件（style.css）末尾,添加媒体查询代码。

示例：

/* 默认PC样式 */
.main-content { width: 960px; margin: 0 auto; }
/* 当屏幕宽度小于等于 768px 时 (平板和手机) */
@media screen and (max-width: 768px) {
    .main-content { width: 100%; padding: 10px; box-sizing: border-box; }
    .sidebar { display: none; } /* 隐藏侧边栏 */
    .header { height: auto; } /* 调整头部高度 */
}
/* 当屏幕宽度小于等于 480px 时 (小屏手机) */
@media screen and (max-width: 480px) {
    .logo { width: 100%; text-align: center; }
    .nav { /* 调整导航菜单为垂直或汉堡菜单 */ }
}

优化图片：

响应式设计还需要考虑图片加载速度，可以使用 DedeCMS 的标签或配合 JavaScript，为不同设备加载不同尺寸的图片,但这会增加复杂性。

优缺点：

优点：
- 只需维护一套模板,内容更新更方便。
- 代码更简洁，符合现代 Web 开发趋势。
- URL 不变，对 SEO 友好（避免因跳转产生的权重分散）。
缺点：
- 对 CSS 技术要求高,开发难度大。
- 在老旧手机上可能兼容性不佳。
- 对于复杂的后台管理界面,做响应式适配非常困难。

总结与建议

特性	方法一 (独立手机模板)	方法二 (响应式模板)
实现难度	中等 (需要修改PHP文件)	较高 (需要精通CSS和布局)
维护成本	较高 (两套模板需分别更新)	较低 (只需维护一套)
加载速度	可以为手机专门优化，速度更快	需加载所有CSS，可能稍慢
兼容性	非常好，几乎所有设备都能正常显示	依赖浏览器对CSS3的支持
URL	可与PC版共用，也可跳转独立域名	完全共用，URL不变
推荐场景	绝大多数 DedeCMS 网站的首选，特别是内容结构复杂的网站。	简单的博客、企业展示站，且开发者有较强的前端能力。

给您的最终建议：

对于绝大多数 DedeCMS 用户，强烈推荐使用【方法一：创建独立的手机模板】，虽然初期需要多做一些准备工作，但它最稳定、兼容性最好，且能让你完全控制手机版的每一个细节，完成之后,你的网站就能完美地适配各种移动设备了。

dede如何自动适配生成手机版网站？