dedecms移动版模板如何适配手机端？-网站模板-锦华智联科技

Dedecms 移动版工作原理

在深入了解制作方法之前，必须先理解 Dedecms 移动版的核心工作原理,这决定了你后续所有操作的方向。

（图片来源网络，侵删）

Dedecms 的移动适配方案主要依赖于 PHP 服务端判断，而不是像现在主流的响应式设计或 AMP 那样。

核心流程如下：

用户访问网站： 无论是电脑还是手机，用户首先访问的是你的主域名（www.yoursite.com）。
PHP 脚本判断： 网站根目录下的 index.php 文件（或其他入口文件）会首先被执行,它会包含一段关键的判断代码。
检测 User-Agent： 这段代码会获取访问设备的 User-Agent 字符串。User-Agent 是浏览器或设备向服务器发送的一个标识，里面包含了设备信息，如操作系统、浏览器型号等。
执行跳转：
- 如果判断为移动设备： PHP 代码会使用 header("Location: ...") 函数，将用户重定向到指定的移动版目录或域名。
- 如果判断为电脑设备： 则正常加载电脑版的模板文件。

最关键的一点： Dedecms 默认的移动版模板是独立的一套模板，存放在一个专门的目录里（通常是 /m/），当移动设备访问时，它并不是“改造”电脑版，而是完全切换到另一套为移动端优化的模板和页面。

制作移动版模板的两种主要方法

了解了原理后，我们来看具体的制作方法，主要有两种：官方推荐方法 和 手动创建方法。

（图片来源网络，侵删）

官方推荐方法（利用“一键生成”功能）

这是最简单、最快捷的方法，适合不想深入代码,或者对模板结构不熟悉的用户。

步骤：

登录后台： 进入你的 Dedecms 后台管理。
找到生成工具： 在左侧菜单栏中，找到 “生成” -> “一键生成网站”。
（图片来源网络，侵删）
选择移动站点： 在“一键生成网站”页面，你会看到一个 “移动站点” 的选项卡,点击进入。
设置参数：
- 移动站点目录： 设置你的移动版模板存放的目录，默认是 /m/,通常保持默认即可。
- 移动站点首页文件： 设置移动版首页的文件名，默认是 index.php。
- 移动站点模板： 这是最关键的一步！ 你需要在这里选择一个已经制作好的移动版模板，Dedecms 官方提供了一些基础模板，你也可以从网上下载第三方移动模板（织梦移动模板”、“DedeCMS手机模板”等关键词搜索）。
- 是否开启： 务必勾选“开启移动站点”。
开始生成： 确认设置无误后，点击“开始生成”按钮，系统会自动将你选择的移动模板文件复制到 /m/ 目录，并生成相应的静态页面（如果开启了静态化）。

优点：

操作简单,无需手动创建目录和文件。
自动完成大部分配置工作。

缺点：

严重依赖现有模板,自定义程度低。
生成的模板可能比较老旧,不一定符合现代设计审美。

手动创建方法（完全自定义）

这是最灵活、最能体现你设计能力的方法，你可以从零开始,或者基于一个电脑版模板进行修改。

步骤：

第 1 步：创建移动版目录和模板文件

在你的网站根目录下，创建一个新的文件夹，命名为 m (或其他你喜欢的名字，如 mobile)。

在 /m/ 目录下，你需要创建与电脑版模板目录结构类似的文件和文件夹,通常需要以下核心文件：

index.php：移动版首页的入口文件。
templets/：存放移动版模板文件的目录。
templets/default/：在 templets 下创建一个默认的模板目录（目录名可以自定义）。
templets/default/index.htm：移动版首页的模板文件。
templets/default/list_*.htm：移动版列表页模板。
templets/default/article_*.htm：移动版文章页模板。
templets/default/：其他你需要的页面模板，如搜索页、标签页等。

第 2 步：修改入口文件 index.php

这是实现移动端跳转的核心，将你网站根目录下的 index.php 文件内容替换为以下代码：

<?php
if(!file_exists(dirname(__FILE__).'/data/common.inc.php'))
{
    header('Location:install/index.php');
    exit();
}
require_once (dirname(__FILE__) . "/include/common.inc.php");
require_once DEDEINC."/arc.partview.class.php";
$pv = new PartView();
$pv->SetTemplet($cfg_basedir . $cfg_templets_dir . "/default/index.htm");
$pv->Display();
?>

在 require_once (dirname(__FILE__) . "/include/common.inc.php"); 这一行代码的后面， 添加下面的判断逻辑：

// ... 省略上面的代码 ...
require_once (dirname(__FILE__) . "/include/common.inc.php");
// ============== 核心移动端判断代码开始 ==============
$isMobile = false;
// 如果开启了移动站点
if($cfg_mobile=='Y')
{
    // 获取 User-Agent
    $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
    // 定义常见的移动设备关键词
    $mobilebrowserlist = 'iphone,ipod,ipad,android,blackberry,nokia,opera mini,opera mobi,windows ce,smartphone,phone,mobile,palm,fennec,htc,lg,samsung,sonyericsson,mot-';
    // 判断 User-Agent 中是否包含移动设备关键词
    if(preg_match("/(".$mobilebrowserlist.")/i", $useragent))
    {
        $isMobile = true;
    }
    // 如果是移动设备，则跳转到移动版目录
    if($isMobile)
    {
        // 获取当前 URL 的查询字符串
        $query = $_SERVER["QUERY_STRING"];
        // 如果有查询字符串，则用问号连接，否则直接跳转
        $url = $cfg_mobile_site.'/'.$query ? $cfg_mobile_site.'?'.$query : $cfg_mobile_site;
        // 执行重定向
        header("Location: $url");
        exit();
    }
}
// ============== 核心移动端判断代码结束 ==============
// ... 省略下面的代码 ...

第 3 步：配置后台参数

进入 Dedecms 后台 “系统” -> “系统基本参数” -> “核心设置”。
找到 “是否开启移动站点” 选项，将其设置为 “是”。
找到 “移动站点域名” 选项，填入你的移动版域名（m.yoursite.com），如果你使用的是目录形式（如 www.yoursite.com/m），可以留空或填写 /m/。

第 4 步：制作移动版模板文件

你需要为 /m/templets/default/ 目录下的模板文件编写代码，移动端模板的编写规则和电脑版完全一样，都是使用 DedeCMS 的模板标签。

移动端模板设计要点：

简洁布局： 移动端屏幕小，要避免复杂的布局和过多的元素,突出核心内容。
字体适配： 使用相对单位（如 rem）或媒体查询来适配不同分辨率的屏幕。
按钮优化： 按钮要足够大,方便用户点击。
图片优化： 图片尺寸要小，格式要优（如 WebP）,加快加载速度。
移除不必要的模块： 电脑版的侧边栏、广告位等在移动端通常可以去掉。

示例：/m/templets/default/index.htm 的简化结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style.css">
</head>
<body>
    <header>
        <h1>{dede:global.cfg_webname/}</h1>
    </header>
    <nav>
        <!-- 可以放一些主导航 -->
    </nav>
    <main>
        <!-- 调用文章列表 -->
        {dede:arclist row='5' titlelen='30'}
        <article>
            <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
            <p>[field:description function='cn_substr(@me, 100)'/]...</p>
            <span>[field:pubdate function='MyDate('m-d', @me)'/]</span>
        </article>
        {/dede:arclist}
    </main>
    <footer>
        <p>© {dede:global.cfg_webname/}</p>
    </footer>
</body>
</html>

替代方案与最佳实践

虽然 Dedecms 的传统移动版方案依然可用，但在今天，它已经不是最优选择了,你应该了解并考虑更现代的方案。

替代方案：响应式模板

这是目前最推荐的方案，它不再需要 /m/ 目录和跳转逻辑。

原理： 制作一套模板，通过 CSS3 的媒体查询 (Media Queries) 技术，让同一套模板在不同尺寸的设备（电脑、平板、手机）上自动调整布局、字体大小和元素显示。

优点：

维护成本低： 只需维护一套模板,修改一次即可同步到所有设备。
SEO 友好： 没有跳转，所有设备访问的都是同一个 URL，权重集中，不会因为移动版和桌面版内容不同而造成 SEO 问题。
用户体验好： 用户在设备间切换时，URL 不会改变,体验更连贯。
符合 Google 推荐标准： Google 明确推荐使用响应式设计作为移动优先的解决方案。

如何实现：

选择响应式模板： 购买或下载一个已经做好响应式设计的 Dedecms 模板,现在大部分优秀的模板都支持响应式。
自行改造： 如果你有 CSS 基础，可以在现有模板的 CSS 文件中添加媒体查询代码。

示例 CSS 媒体查询：

/* 默认样式（针对手机等小屏设备） */
.container {
    width: 100%;
    padding: 10px;
}
/* 当屏幕宽度大于 768px 时（平板和电脑） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
    /* 可以隐藏移动端特有的菜单，显示桌面端菜单 */
    .mobile-menu {
        display: none;
    }
    .desktop-menu {
        display: block;
    }
}

方案	优点	缺点	适用场景
官方一键生成	操作简单，快速上手	模板老旧，自定义差，有跳转	个人博客、对SEO和体验要求不高的站点
手动创建移动版	完全自定义，可深度优化	需要额外制作一套模板，维护两套，有跳转，SEO分散	有专门设计需求，且不介意维护两套模板的站点
响应式模板	强烈推荐，一套模板，维护成本低，SEO友好，体验好	对模板设计能力要求较高，或需要购买优质模板	所有现代网站，尤其是注重SEO和用户体验的商业网站

最终建议：

对于新项目或希望网站长期发展的用户，请优先选择“响应式模板”方案，这是行业趋势,也是对搜索引擎和用户最友好的方案。

如果你的网站已经有一个非常成熟的电脑版模板，且不想大改，或者有特殊需求必须使用独立移动版，手动创建移动版”也是一个可行的选择，但一定要做好 SEO 方面的权衡。