dedecms5.7移动端教程怎么建？适配步骤是什么？-建站教程-锦华智联科技

DedeCMS 5.7 移动端适配全攻略

对于使用 DedeCMS 5.7 构建的网站,移动端适配主要有三种主流方案：

（图片来源网络，侵删）

自动跳转移动站：用户在电脑上访问 yourdomain.com，在手机上访问会自动跳转到 m.yourdomain.com 或 yourdomain.com/m/,这是最传统的方式。
响应式模板：同一套模板，通过 CSS 和 JavaScript 技术，自动适应不同尺寸的设备（手机、平板、PC），这是目前最推荐、最主流的方案。
独立移动站：完全独立的一套移动端模板和内容，通过代码判断设备并加载对应模板，对服务器资源要求稍高,但内容管理更灵活。

下面我们逐一讲解这三种方案的实现方法。

自动跳转移动站 (m.yourdomain.com)

这种方式需要你拥有一个独立于主站的二级域名（如 m.yourdomain.com）,并且该域名指向和主站相同的目录。

第一步：创建移动端模板

在你的 /templets/ 目录下，新建一个文件夹，mobile/。
将你主站的模板文件夹（如 default/）中的所有文件复制到 mobile/ 文件夹中。
修改 mobile/ 文件夹中的模板文件（主要是 index.htm, list_article.htm, article_article.htm 等），使其适合手机屏幕显示，通常做法是：
- 修改 CSS，使用相对单位（如 , rem, vw/vh）或媒体查询 @media 来适配不同屏幕。
- 简化页面布局,去掉不必要的侧边栏和广告。
- 调整字体大小和图片尺寸。

第二步：设置默认移动模板

找到 手机版默认模板目录 这一项，将其值设置为你刚才创建的移动端模板目录，mobile。

（图片来源网络，侵删）

第三步：添加跳转代码

这是实现自动跳转的核心，你需要将一段 JavaScript 代码添加到你的 PC端模板的 <head> 标签内。

打开你 PC 端模板（/templets/default/head.htm）文件，在 <head> 和 </head> 之间加入以下代码：

<script type="text/javascript">
// 手机端访问自动跳转
var mobile_url = "http://m.yourdomain.com"; // <--- !!! 修改成你自己的移动端域名
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)) {
   window.location.href = mobile_url;
}
</script>

重要提示：

将 http://m.yourdomain.com 替换成你自己的移动端域名。
这种方式是“强制跳转”，用户体验稍差，更友好的方式是提供一个“切换”按钮,让用户自己选择是否访问移动站。
缺点：不利于 SEO，因为 PC 端和移动端的内容是分开的,搜索引擎需要分别索引。

响应式模板 (强烈推荐)

这是目前最流行、最符合现代网站开发标准的方式，一套模板,完美适配所有设备。

（图片来源网络，侵删）

第一步：选择或制作响应式模板

你可以在网上搜索 "DedeCMS 响应式模板"，有很多现成的模板可供选择，如果你有一定前端基础,也可以自己制作。

第二步：引入 Bootstrap 或其他前端框架 (可选但推荐)

使用像 Bootstrap 这样的 CSS 框架可以极大简化响应式开发，在你的模板头部引入 Bootstrap 的 CSS 和 JS 文件。

在 /templets/default/head.htm 的 <head> 标签内添加：

<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Bootstrap JS (通常放在body末尾) -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

第三步：使用媒体查询 (@media) 修改样式

在你的模板 CSS 文件（通常是 /templets/default/style/dedecms.css）中,通过媒体查询来为不同屏幕定义不同的样式。

示例：

/* 默认样式，应用于PC */
#main {
    width: 980px;
    float: left;
}
#sidebar {
    width: 220px;
    float: right;
}
/* 当屏幕宽度小于等于768px（平板和手机）时应用 */
@media (max-width: 768px) {
    #main, #sidebar {
        width: 100%; /* 内容区域和侧边栏都占满宽度 */
        float: none; /* 清除浮动 */
    }
    /* 可以隐藏掉PC端才有的元素 */
    .pc-only {
        display: none;
    }
    /* 调整字体大小 */
    body {
        font-size: 14px;
    }
}
/* 当屏幕宽度小于等于480px（小屏手机）时应用 */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
}

第四步：使用 REM 或 VW/VH 单位

为了更灵活的适配，可以使用 rem 单位。rem 是相对于根元素 <html> 的 font-size 来计算的。

在 CSS 中设置根元素的基准字体大小：
```
html {
    font-size: 16px; /* 默认16px */
}
```

在媒体查询中动态改变根字体大小，从而整体缩放页面：

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

在其他元素中使用 rem 单位：

.content {
    padding: 1rem; /* 相当于 16px 或 14px 或 12px */
    font-size: 1.2rem;
}

第五步：优化图片

使用 DedeCMS 的图片缩略图功能，生成不同尺寸的图片，或者使用 srcset 属性,让浏览器根据设备屏幕选择最合适的图片。

<!-- 示例：srcset 属性 -->
<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 800w, large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="响应式图片">

独立移动站 (通过代码判断)

如果你不想使用二级域名，又希望有独立的移动端模板，可以在主站模板中通过 PHP 代码判断设备类型,然后加载不同的模板文件。

第一步：创建移动端模板

同方案一，在 /templets/ 下创建 mobile/ 文件夹并放置好移动端模板文件。

第二步：在模板中添加判断代码

打开你 PC端模板的 head.htm 文件，在 <head> 标签内加入以下 PHP 代码：

<?php
if (isset($_SERVER['HTTP_USER_AGENT'])) {
    $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
    $iphone = (strpos($user_agent, 'iphone') !== false);
    $ipad = (strpos($user_agent, 'ipad') !== false);
    $ipod = (strpos($user_agent, 'ipod') !== false);
    $android = (strpos($user_agent, 'android') !== false);
    if ($iphone || $ipad || $ipod || $android) {
        // 如果是移动设备，则加载移动端模板
        // 这里我们使用一个变量来标记，然后在模板文件中判断
        define('IS_MOBILE', true);
    } else {
        define('IS_MOBILE', false);
    }
}
?>

第三步：修改模板引擎文件 (核心步骤)

这是最关键的一步，我们需要修改 DedeCMS 的核心文件，让它根据我们的变量 IS_MOBILE 来加载不同的模板。

找到并打开 /include/dedetemplate.class.php 文件。
在文件中搜索 function LoadTemplate($filename) 函数。
在该函数内部，找到 $this->templets 赋值的代码段（通常在函数末尾附近）。
在其之前加入以下判断逻辑：

// 在 dedetemplate.class.php 的 LoadTemplate 函数中添加
// ... 函数其他代码 ...
// 在 $this->templets = ... 这行代码之前添加
if(defined('IS_MOBILE') && IS_MOBILE) {
    // 如果是移动端，则替换模板目录
    $filename = str_replace('/templets/default/', '/templets/mobile/', $filename);
}
// 原来的代码
$this->templets = $filename;

代码解释： 这段代码的作用是，当 IS_MOBILE 为 true 时，它会将模板路径中的 /templets/default/ 替换成 /templets/mobile/，从而 DedeCMS 会去加载移动端的模板文件。

第四步：清空缓存

完成修改后，请务必登录 DedeCMS 后台 -> 系统 -> 性能选项 -> 更新系统缓存及HTML缓存，点击“更新系统缓存”。

常见问题与解答 (FAQ)

Q1: 为什么我的移动端跳转后，图片和样式路径乱了？ A: 这是因为移动站和主站是同一个目录，但模板路径不同，请确保你的移动端模板（如 mobile/ 文件夹）中的 CSS 和图片路径是相对于 它自己 的，如果路径写的是 /images/，那是相对于网站根目录，没问题，如果写的是 ../images/，那就会出错，建议使用绝对路径（如 /images/）或 {dede:global.cfg_templeturl/}/images/ 这样的 DedeCMS 全局变量。

Q2: 响应式布局下，栏目列表页的分页按钮太丑了怎么办？ A: 你可以引入一个专门为移动端优化的分页插件，或者自己写一套 CSS 来美化分页样式，并通过媒体查询在 PC 和移动端显示不同的样式。

Q3: 方案三中，修改了核心文件，升级 DedeCMS 时怎么办？ A: 升级 DedeCMS 时，你 /include/dedetemplate.class.php 文件的修改会被覆盖，升级后你需要手动重新修改一遍这个文件,强烈建议你将修改的代码备份好。

Q4: 哪种方案对 SEO 最友好？ A: 响应式模板 对 SEO 最为友好，因为 Google 和百度等搜索引擎认为，内容在同一个 URL 下，通过不同 CSS 呈现给不同设备，是最好的实践，它会将 PC 和移动端视为同一个页面，权重不会分散，而自动跳转和独立移动站，如果处理不当（如没有规范的 rel="alternate" 和 rel="canonical" 标签），可能会导致 SEO 权重分散。

方案	优点	缺点	适用场景
自动跳转	实现简单，PC 和移动端内容完全独立	用户体验差，不利于 SEO	老旧网站改造，或 PC/移动端内容差异巨大的情况
响应式模板	强烈推荐，SEO 友好，一套代码维护方便	对前端技术要求稍高，首次开发成本可能较高	绝大多数现代网站，特别是内容型网站
独立移动站	内容管理灵活，可以完全定制移动端体验	需要修改核心文件，升级麻烦，对 SEO 要求高	需要在移动端提供与 PC 端完全不同功能的复杂网站

对于大多数用户来说，从方案二（响应式模板）开始是最好的选择，它代表了未来的趋势，并且能带来最好的用户体验和 SEO 表现。