dede手机模板如何使用？

第一步：制作或准备手机模板

手机模板和电脑模板的结构类似,但样式和布局需要针对手机屏幕进行优化。

手机模板目录结构

你需要在 DedeCMS 的 /templets/ 目录下创建一个新的文件夹来存放手机模板，我们会命名为 mobile。

你的目录结构会是这样：

/dede/          (后台管理目录)
/templets/      (电脑模板目录)
  /default/     (默认电脑模板)
  /mobile/      (手机模板目录，需要新建)
    /index.htm  (手机首页模板)
    /list_*.htm (手机列表页模板)
    /article_*.htm (手机文章页模板)
    ...         (其他手机页面模板)
/uploads/       (附件上传目录)
...

手机模板文件命名规则

为了能让 DedeCMS 自动识别并调用手机模板，文件命名需要遵循一定的规则，通常是在原电脑模板文件名的基础上加上 m_ 前缀。

注意： 你也可以不使用 m_ 前缀，而是直接在 /mobile/ 目录下创建和电脑模板同名的文件，DedeCMS 在调用时会优先检查 /mobile/ 目录下是否存在同名模板。

手机模板内容编写

手机模板的制作方法与电脑模板基本相同,都是使用 DedeCMS 的模板标签（如 {dede:arclist}, {dede:field} 等）。

关键点：

• 响应式设计 (推荐): 最简单的方法是制作一个响应式的电脑模板，通过 CSS 媒体查询 (@media)，让同一个模板在不同尺寸的设备上（手机、平板、电脑）都能良好显示，这样你就不需要维护两套模板了。
• 独立模板: 如果需要完全不同的布局，就制作独立的手机模板，你需要：
  • 调用正确的标签： 确保所有 DedeCMS 标签都正确无误。
  • 优化 CSS 和 JS： 使用移动端专用的 CSS 框架（如 Bootstrap, Foundation）或自定义移动端样式，确保图片、字体等资源大小合适，加载速度快。
  • 简化导航： 手机端导航要简洁明了，方便用户点击。

第二步：设置 DedeCMS 以识别并调用手机模板

模板准备好后,你需要告诉 DedeCMS 如何在用户访问时自动切换到手机模板，这通常通过修改配置文件或开启特定功能来实现。

开启“手机门户”功能 (DedeCMS V5.7 及以上版本推荐)

这是最官方、最简单的方法。

1. 登录后台： 进入你的 DedeCMS 后台管理。

2. 找到设置： 在左侧菜单栏中，找到并点击 【系统】 -> 【系统基本参数】。

3. 选择手机设置： 在右上角，你会看到一个切换按钮，选择 【手机版参数设置】。

4. 配置参数：

   • 是否开启手机站点： 选择 “是”。
   • 手机模板目录： 输入你之前创建的手机模板文件夹名称，通常是 mobile。
   • 手机网址： (可选) 如果你有一个独立的手机域名（如 m.yoursite.com），可以在这里填写，如果不需要，可以留空。
   • WAP首页文件名： 输入你的手机首页模板文件名，通常是 index.htm。
   • 其他设置： 根据需要设置是否开启评论、搜索等功能。

5. 保存： 点击页面底部的 【保存】 按钮。

完成以上设置后，DedeCMS 会自动进行判断：

• 当检测到用户使用手机、平板等移动设备访问时，系统会自动从 /templets/mobile/ 目录下调用相应的模板文件。
• 当用户使用电脑访问时,则继续使用默认的电脑模板。

通过修改 index.php 实现跳转 (通用方法)

如果你的 DedeCMS 版本较旧，或者官方方法不满足你的需求（你想实现跳转到一个 m. 子域名），可以手动修改网站根目录下的 index.php 文件。

1. 打开文件： 用 FTP 或文件管理器打开网站根目录下的 index.php 文件。
2. 添加判断代码： 在文件的最顶部，<?php 这行代码之后，添加以下 PHP 代码：

<?php
// 引入DedeCMS系统
require_once (dirname(__FILE__) . "/include/common.inc.php");
// ---------- 以下为手机端跳转判断代码 ----------
if( isset($_GET['mobile']) ) {
    $mobile = $_GET['mobile'];
} else {
    $mobile = is_mobile();
}
if($mobile){
    // 如果是手机访问，跳转到手机版
    // 方式一：跳转到同目录下的m文件夹（推荐）
    header("Location: /m/"); 
    exit();
    // 方式二：跳转到m.子域名
    // header("Location: http://m.yoursite.com/");
    // exit();
}
// ---------- 手机端跳转判断代码结束 ----------
// ... 后面是 index.php 原有的代码 ...

3. 创建 is_mobile() 函数 (可选但推荐)： 为了让代码更清晰，你可以在 include/ 目录下创建一个 helper.php 文件，并将判断移动设备的函数放在里面。

   include/helper.php 文件内容：

   <?php
   // 判断是否为移动设备
   function is_mobile() {
       // 如果有明确的 mobile 参数，则按参数判断
       if (isset($_GET['mobile'])) {
           return $_GET['mobile'] == 'yes';
       }
       // 常见的移动设备 User-Agent
       $mobile_agents = array(
           'iphone', 'android', 'ipod', 'ipad', 'windows phone', 'blackberry', 'mobile'
       );
       // 检查 User-Agent
       $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
       foreach ($mobile_agents as $device) {
           if (strpos($user_agent, $device) !== false) {
               return true;
           }
       }
       return false;
   }

   在修改 index.php 时，先引入这个文件：

   require_once (dirname(__FILE__) . "/include/common.inc.php");
   require_once (dirname(__FILE__) . "/include/helper.php");
   // ... 后续代码 ...

注意： 这种方法需要你额外创建一个 /m/ 目录，并把网站程序和手机模板都复制进去，或者配置好子域名的解析。

第三步：测试与验证

完成设置后,一定要进行测试。

1. 使用手机浏览器访问： 在手机浏览器中输入你的网站网址，检查是否正确显示了手机模板。
2. 使用开发者工具模拟： 在电脑的 Chrome 或 Firefox 浏览器中，按 F12 打开开发者工具，然后点击左上角的手机图标，选择不同的设备型号来模拟访问，检查页面效果。
3. 检查 URL： 确认手机访问时 URL 是否符合你的预期（是同目录 /m/ 还是子域名 m.yoursite.com）。
4. 检查功能： 测试手机模板上的导航、链接、评论、搜索等功能是否都正常工作。

对于大多数用户来说,使用方法一（开启后台的手机门户功能） 是最简单、最稳妥的选择，希望这个详细的指南能帮助你成功设置 DedeCMS 的手机模板！