DedeCMS 织梦仿手机站完整教程

本教程将教你如何利用 Dedecms 自带的移动端模板功能，快速制作一个与 PC 站风格统一的手机站。

dedecms织梦仿手机站教程
（图片来源网络，侵删）

核心思路

  1. 复制模板：将 PC 站的模板文件夹复制一份，作为手机站的模板。
  2. 修改样式：在手机站模板中，引入移动端专用的 CSS 和 JS 文件，并修改 HTML 结构以适应移动端布局（如使用 REM、流式布局等）。
  3. 配置后台：在 DedeCMS 后台开启并配置手机站功能，指定手机端默认模板。
  4. 实现跳转：通过修改 PC 站的首页 index.php 文件，添加一段代码，实现用户用手机访问时自动跳转到手机站域名（或 m 目录）。

第一步：准备工作

  1. 环境：一个已经安装好的 Dedecms 程序（以 DedeCMS V5.7 SP2 为例，其他版本类似）。
  2. FTP/SFTP 工具：用于上传和下载文件。
  3. 代码编辑器：如 VS Code、Sublime Text、Notepad++ 等。
  4. 手机站域名：最好为手机站准备一个独立的域名，如 m.yourdomain.com，如果暂时没有，也可以使用 /m/ 目录形式。

第二步：创建手机站模板目录和文件

DedeCMS 默认会在 /templets/ 目录下寻找移动端模板，我们遵循这个规则。

  1. 登录 FTP，进入你的网站根目录。
  2. 找到并进入 /templets/ 目录。
  3. 复制 PC 站模板文件夹：将你 PC 站正在使用的模板文件夹（default/）完整复制一份，并重命名为 mobile，这个 mobile 文件夹就是我们的手机站模板目录。
  4. 进入 mobile 文件夹，你会发现里面包含了 index.html、article_article.html、list_channel.html 等所有 PC 站的模板文件。

第三步：修改手机站模板

我们需要修改 mobile 文件夹里的模板，让它们在手机上看起来更美观。

  1. 引入移动端样式和 JS：

    • 在 mobile 文件夹下新建一个 CSS 文件，mobile.css，用于存放手机端专用的样式。
    • 在 mobile 文件夹下新建一个 JS 文件，mobile.js，用于存放手机端专用的脚本（如触摸滑动、字体缩放等）。
    • 打开 mobile/index.html（首页模板），在 <head> 标签内引入这两个新文件，可以引入一个移动端常用的 viewport 设置。
    <!-- 在 <head> 标签内添加 -->
<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/}/mobile.css" type="text/css" />
<script src="{dede:global.cfg_templets_skin/}/mobile.js"></script>

  2. 修改 HTML 结构和 CSS：

    dedecms织梦仿手机站教程
    （图片来源网络，侵删）
    • 简化结构：手机端不需要 PC 站那么复杂的导航和侧边栏，可以删除首页模板中不必要的模块，比如右侧的“热门排行”、“友情链接”等。
    • 响应式布局：这是最关键的一步。
      • 推荐方案：REM 布局，这是一种非常流行且高效的移动端适配方案，你需要一个 lib-flexible.js 来动态设置 html 的 font-size，然后在 mobile.css 中所有尺寸都使用 rem 单位。
      • 简单方案：流式布局，将固定宽度（如 width: 960px;）改为百分比宽度（如 width: 100%; max-width: 640px; margin: 0 auto;）。
    • 调整样式：修改 mobile.css 文件，调整字体大小、行高、图片大小、按钮样式等，使其更适合手机屏幕。

    示例：修改首页文章列表 在 mobile/index.html 中，找到文章列表循环标签 {dede:arclist}，可以调整其输出结构，使其更紧凑。

    <!-- mobile/index.html 中的文章列表部分 -->
<div class="news-list">
  {dede:arclist titlelen='40' row='10'}
  <div class="news-item">
    <a href="[field:arcurl/]">
      <h2>[field:title/]</h2>
      <p class="summary">[field:description function='cn_substr(@me, 80)'/]...</p>
      <span class="date">[field:pubdate function='MyDate('m-d', @me)'/]</span>
    </a>
  </div>
  {/dede:arclist}
</div>

    然后在 mobile.css 中为 .news-item 等类编写样式。

第四步：配置 DedeCMS 后台

模板准备好了,现在需要告诉 Dedecms 使用这些模板。

  1. 登录 DedeCMS 后台。
  2. 进入 【系统】-> 【系统基本参数】-> 【核心设置】**。
  3. 找到 “mobile 模板目录” 选项，将其值修改为你刚才创建的模板文件夹名 mobile。
  4. 点击 【保存】。

第五步：设置默认手机模板

DedeCMS 可以针对不同栏目设置不同的手机端模板。

dedecms织梦仿手机站教程
（图片来源网络，侵删）
  1. 在后台左侧菜单,进入 【模板】-> 【默认模板管理】**。
  2. 你会看到一个模板列表,包括首页、列表页、文章页等。
  3. 在每一行的 “选择模板” 列，点击下拉框，选择 mobile 目录下对应的模板文件。
    • 主页模板：选择 mobile/index.html
    • 列表页模板：选择 mobile/list_channel.html (或你的列表模板名)
    • 文章页模板：选择 mobile/article_article.html (或你的文章模板名)
    • ...以此类推。
  4. 点击 【保存】。

你的网站已经具备了手机端的展示能力,你可以通过访问 你的域名/?mobile=yes 来预览手机端效果（这是 DedeCMS 的一个测试参数）。

第六步：实现 PC 站与手机站自动跳转

这是最后一步,也是用户体验最重要的一步，当用户用手机访问你的 PC 站时，自动跳转到手机站。

跳转到独立手机域名（推荐）

如果你的手机站有独立域名（如 m.yourdomain.com），这是最佳实践。

  1. 登录 FTP，下载网站根目录下的 index.php 文件。

  2. 用代码编辑器打开 index.php。

  3. 在文件最顶部,在 <?php 这行代码的正下方，添加如下 PHP 代码：

    <?php
// 获取HTTP_USER_AGENT
$user_agent = $_SERVER['HTTP_USER_AGENT'];
// 定义手机端访问的域名
$mobile_domain = 'm.yourdomain.com'; // 请替换成你自己的手机域名
// 判断是否为移动设备
if (strpos($user_agent, 'Android') !== false || strpos($user_agent, 'iPhone') !== false || strpos($user_agent, 'iPad') !== false || strpos($user_agent, 'iPod') !== false || strpos($user_agent, 'Symbian') !== false || strpos($user_agent, 'Windows Phone') !== false) {
    // 如果访问的域名不是手机域名，则跳转
    if ($_SERVER['HTTP_HOST'] != $mobile_domain) {
        header("Location: http://" . $mobile_domain . $_SERVER['REQUEST_URI']);
        exit;
    }
}
?>

  4. 保存文件，并重新上传到你的网站根目录，覆盖原文件。

  5. 注意：确保你的 m.yourdomain.com 域名已经解析到你的服务器IP，并且该目录下的 index.php 和 data 等核心文件与 PC 站是共用的（通常只需要一个 dedecms 程序，通过二级域名访问即可）。

跳转到 /m/ 目录

如果你的手机站放在 /m/ 目录下。

  1. 同样，修改 index.php 文件。

  2. 在文件顶部添加如下代码：

    <?php
// 获取HTTP_USER_AGENT
$user_agent = $_SERVER['HTTP_USER_AGENT'];
// 判断是否为移动设备
if (strpos($user_agent, 'Android') !== false || strpos($user_agent, 'iPhone') !== false || strpos($user_agent, 'iPad') !== false || strpos($user_agent, 'iPod') !== false || strpos($user_agent, 'Symbian') !== false || strpos($user_agent, 'Windows Phone') !== false) {
    // 如果访问的路径不是 /m/ 目录，则跳转
    if (strpos($_SERVER['REQUEST_URI'], '/m/') !== 0) {
        header("Location: /m/" . $_SERVER['REQUEST_URI']);
        exit;
    }
}
?>

  3. 保存并上传，你需要确保 /m/ 目录下有一个指向网站根目录的 index.php 文件，/m/ 目录也有一个 templets 文件夹（里面是 mobile 模板）。

第七步：清理缓存与测试

  1. 清理缓存：在 DedeCMS 后台，进入 【系统】-> 【一键更新网站】-> 【更新缓存】，点击开始。
  2. 测试：
    • 用手机访问你的 PC 站域名，看是否自动跳转到了手机站。
    • 用电脑访问,确保 PC 站正常显示。
    • 检查手机站的各个页面（首页、列表页、文章页）是否样式错乱，链接是否有效。

总结与进阶

至此,一个基础的仿手机站就搭建完成了。

  • 优点：快速、简单，复用了 PC 站的数据和部分结构。
  • 缺点：PC 站和手机端的模板代码是分离的，当 PC 站改版时，手机站也需要手动同步修改，维护成本较高。

进阶方向：

  • 响应式模板：更高级的做法是只做一套模板，通过 CSS 的媒体查询（@media）来适配不同设备，这需要前端开发能力，但长期维护更方便。
  • 使用现成模板：在网上购买或下载 DedeCMS 的响应式模板，这些模板已经内置了移动端适配，省去大量手动修改的时间。

希望这份教程对你有帮助！如果在操作过程中遇到问题，可以随时提问。