Dede PC与手机如何同步？教程步骤详解

DedeCMS PC 端与手机端网站同步终极教程

实现 PC 和手机网站同步，核心思想是：“一套数据源，两套模板”，也就是说，文章、产品等所有内容数据只在后台录入一次，但通过不同的模板文件（一套给 PC，一套给手机）来展示，从而实现同一个数据源在不同设备上的不同呈现。

我们将通过以下两种主流方法来实现：

1. 推荐 - 通过官方的 m 目录实现（推荐）

   这是最原生、最稳定、最推荐的方法，DedeCMS 从早期版本就内置了移动端支持。

2. 通过第三方插件（如 p_w_picpath 插件）实现
   • 适合希望 PC 和手机端拥有完全独立域名（如 www.yoursite.com 和 m.yoursite.com）的场景，实现更彻底的“伪静态”同步。

准备工作

在开始之前,请确保你已经完成以下工作：

1. 服务器环境：已安装并运行 DedeCMS 程序（以 DedeCMS 5.7 GBK 版本为例，UTF-8 版本操作类似）。
2. 域名解析：已将你的域名解析到服务器 IP。
3. 文件权限：确保服务器目录有可写权限，特别是 /data 和 /templets 目录。
4. 备份！备份！备份！：在进行任何修改之前，请务必备份你的网站数据库和所有文件，这是最重要的步骤！

官方 m 目录实现（最推荐）

这种方法的核心是利用 DedeCMS 自带的 /m 目录，通过一个判断脚本，自动将移动设备用户跳转到 /m 目录下的手机版页面。

第一步：创建手机端模板目录

1. 在你的网站根目录下,找到 templets 文件夹。

2. 在 templets 文件夹内，新建一个文件夹，命名为 mobile，这个 mobile 文件夹将专门存放手机端的模板文件。

   /templets/
   ├── default/       # PC端模板
   └── mobile/        # 手机端模板 (新建)

3. 将 default 文件夹中的主要模板文件（如 index.htm, article_article.htm, list_article.htm 等）复制一份到 mobile 文件夹中。

4. 修改 mobile 文件夹中的模板：使用 Dreamweaver、VS Code 等工具打开这些复制的模板文件，删除掉 PC 端复杂的布局、广告位、大图片等，保留核心内容，并采用更适合手机屏幕的响应式设计或固定宽度设计（通常宽度为 320px, 360px, 640px 等）。

   
   （图片来源网络，侵删）

第二步：设置并生成手机端页面

1. 登录 DedeCMS 后台。

2. 进入 [系统] -> [系统基本参数] -> [核心设置]。

3. 找到 “手机版模板目录” 选项，将其值修改为你刚刚创建的目录名，即 mobile。

4. 保存设置。

5. 重新生成网站首页、栏目页、文章页等，操作路径为：

   • 首页：[生成] -> [主页更新]
   • 栏目/文章：[生成] -> [一键更新所有]

   你的 /m 目录下应该已经生成了手机版的页面文件。

第三步：实现自动跳转（关键步骤）

这一步是实现“同步”体验的核心，当用户用手机访问你的网站时，会自动跳转到手机版页面。

1. 在你的网站根目录下,找到并打开 index.php 文件。

2. 在文件最顶部,在 <?php 这行代码的后面，添加如下 PHP 代码：

   // 自动跳转到手机版
   if($_GET['mobile'] == 'no') {
       // 如果用户选择“不跳转”或“返回PC版”，则设置一个 cookie
       setcookie('mobile', 'no', time()+3600*24*30);
   } elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Windows Phone') !== false) {
       // 如果是移动设备访问，并且之前没有选择过“不跳转”
       if(!isset($_COOKIE['mobile']) || $_COOKIE['mobile'] != 'no') {
           // 跳转到手机版首页
           $mobile_url = 'http://'.$_SERVER['HTTP_HOST'].'/m/';
           header("Location: $mobile_url");
           exit();
       }
   }

   代码解释：

   • 这段代码首先检测 HTTP 请求头中的 User-Agent 字符串。
   • 如果发现关键词如 Mobile, Android, iPhone 等，就判断用户是移动设备。
   • 然后它会检查用户的浏览器中是否有名为 mobile 且值为 no 的 Cookie，如果没有，就自动跳转到 /m/ 目录。
   • 如果用户访问 ?mobile=no，则会设置一个 Cookie，记录用户选择不跳转，这样在有效期内（30天）就不会再自动跳转了，方便 PC 用户测试。
   • 你可以在 PC 端的模板中加一个链接 您的网站有手机版，<a href="/index.php?mobile=no">点击访问</a> 或 <a href="/m/">访问手机版</a>。

3. 保存 index.php 文件。

第四步：修改手机端链接

为了让手机端内部的链接也能正确跳转到手机版页面,你需要修改手机端的模板文件。

1. 打开 /templets/mobile/ 目录下的模板文件，index.htm。
2. 找到所有站内链接,如：
   • {dede:global.cfg_basehost/} (网站首页)
   • {dede:field name='typelink'/} (栏目链接)
   • {dede:field name='arcurl'/} (文章链接)
3. 修改这些链接，让它们指向 /m/ 目录下的对应页面，将 {dede:field name='arcurl'/} 修改为：

   <a href="/m/{dede:field name='arcurl'/}">

   注意：这种方法比较繁琐，需要修改所有模板文件，更高级的做法是修改 include/helpers/channelunit.helper.php 文件来自动处理，但这有一定风险，不推荐新手操作，对于大多数网站，手动修改几个核心模板文件已经足够。

至此,方法一已经完成，你的网站现在具备了 PC/手机自动识别和跳转的能力。

使用 p_w_picpath 插件实现独立域名同步

这种方法更适合希望 PC 端和手机端拥有完全独立域名（如 www 和 m）的场景，它通过一个插件，在内容发布时自动生成两套页面。

第一步：安装 p_w_picpath 插件

1. 从可靠的 DedeCMS 资源网站下载 p_w_picpath 插件包（通常是一个 .zip 文件）。
2. 解压后,将文件夹内的所有文件和文件夹上传并覆盖到你网站根目录下的 /dede/ 文件夹中。
3. 登录 DedeCMS 后台，在 [系统] -> [插件管理] 中，你应该能看到 p_w_picpath 插件并启用它。

第二步：配置插件

1. 进入 [系统] -> [p_w_picpath 插件设置]。
2. 在这里你需要配置手机端的域名、模板目录等信息。
   • 手机域名：填写你的手机端域名，如 http://m.yoursite.com。
   • 手机模板目录：填写手机端模板目录，如 mobile。
   • 其他设置：根据你的需求进行配置，如是否自动生成、是否开启同步等。
3. 保存设置。

第三步：发布内容并生成

1. 在后台发布或修改文章时,插件会自动工作，它会在你保存文章的同时，在手机端域名对应的目录下生成一份手机版页面。
2. 你需要确保你的服务器已经将 m.yoursite.com 这个域名指向与 www.yoursite.com 完全相同的网站根目录。
3. 后台的文章、栏目、分类等，在生成时都会自动生成 PC 和手机两套页面。

第四步：设置域名跳转

1. 在服务器上（如 Nginx 或 Apache），为 m.yoursite.com 配置一个虚拟主机。
2. 在虚拟主机的配置中,设置301永久重定向，将所有访问 m.yoursite.com 的请求指向你的主网站目录。

Nginx 示例配置:

server {
    listen 80;
    server_name m.yoursite.com;
    # 将所有请求重定向到主网站目录
    rewrite ^/(.*)$ http://www.yoursite.com/$1 permanent;
}

Apache 示例配置 (在 .htaccess 文件中):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^m.yoursite.com [NC]
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [L,R=301]

注意：这里的重定向是为了让 m 域名也能访问到你的网站文件。p_w_picpath 插件会根据你后台的配置，在用户访问时智能地展示 PC 或手机版的页面，插件会通过判断 User-Agent 来决定返回 /www/ 下的页面还是 /m/ 下的页面。

总结与对比

给你的建议：

• 如果你是新手，或者网站不需要独立域名，请直接使用方法一，它简单、稳定、足够用。
• 如果你是资深用户，对 SEO 有极致要求，并且愿意投入时间配置，可以考虑方法二，它能给你带来更专业的移动端网站体验。

希望这份详细的教程能帮助你成功实现 DedeCMS 的 PC 与手机端同步！如果在操作中遇到问题，欢迎随时提问。