搜索
DEDE建站

dede手机模板单页模板如何制作？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 27 分钟
位置： 首页 › DEDE建站 › 正文

“单页模板”通常指的是网站的某个独立页面，关于我们”、“联系我们”、“服务介绍”等，这些页面在手机端和PC端可能布局完全不同,因此需要单独制作一个手机版的模板。

dede 手机模板单页模板
（图片来源网络，侵删）

下面我将从原理、步骤、代码示例三个方面为你详细拆解这个过程。

核心原理：模板判断机制

DedeCMS 本身不区分 PC 和手机，它只是一个内容管理系统，要让它在手机端自动调用不同的模板，我们需要通过 PHP 代码 来判断用户的访问设备，然后动态地改变 templets 目录的路径。

判断设备最简单的方法是检查 HTTP_USER_AGENT（用户代理字符串），看里面是否包含移动设备的关键词，如 Mobile, Android, iPhone 等。

详细制作步骤

假设我们要为“关于我们”页面（通常是 about）制作一个手机模板。

dede 手机模板单页模板
（图片来源网络，侵删）

步骤 1：准备模板文件

在你的 templets 目录下，创建一个专门存放手机模板的文件夹，mobile。

你的目录结构大概是这样：

/templets/
├── default/          # PC端默认模板
│   ├── index.htm
│   ├── list_article.htm
│   ├── article_article.htm
│   └── about.htm     # PC端关于我们页面
│
└── mobile/           # 手机端模板 (新建这个文件夹)
    ├── index.htm
    ├── list_article.htm
    └── about_m.htm   # 手机端关于我们页面 (新建这个文件)

注意：

  • 手机模板文件名可以任意，但为了区分，建议加上 _m 或 _mobile 后缀，about_m.htm。
  • 手机模板的样式（CSS）和脚本（JS）也需要是移动端适配的，通常的做法是在模板文件内部使用 <style> 和 <script> 标签，或者链接到专门的移动端CSS/JS文件。

步骤 2：编写手机端单页模板 (about_m.htm)

这是一个简单的手机端“关于我们”页面模板示例，它包含了移动端特有的 viewport 设置、更简洁的布局和字体。

dede 手机模板单页模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <style>
        /* 这里写一些简单的移动端样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            font-size: 16px; /* 防止iOS缩放 */
            line-height: 1.6;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            padding: 15px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            font-size: 24px;
            color: #0066cc;
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }
        .content {
            padding: 15px 0;
        }
        .content p {
            margin-bottom: 15px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{dede:field.title/}</h1>
        <div class="content">
            {dede:field.body/}
        </div>
    </div>
</body>
</html>

代码解释：

  • <meta name="viewport">：这是移动端页面的灵魂,用于控制页面的缩放和布局。
  • .container：设置一个最大宽度和居中,避免在大屏手机上内容过宽。
  • {dede:field.title/} 和 {dede:field.body/}：这是 DedeCMS 的模板标签,分别用来获取文章的标题和内容。

步骤 3：修改 PC 端模板，加入设备判断逻辑

这是最关键的一步，你需要修改 PC 端的模板文件（/templets/default/about.htm），在文件的最顶部（<!DOCTYPE html> 之前）加入 PHP 判断代码。

修改 /templets/default/about.htm 文件：

<?php
// 在模板文件最顶部加入以下PHP代码
if (isset($_SERVER['HTTP_USER_AGENT'])) {
    $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
    $mobile_browser = '0';
    if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|ipod|ios|iphone)/i', $user_agent)) {
        $mobile_browser++;
    }
    if ((strpos($user_agent, 'ipad') > 0) && $mobile_browser > 0) {
        $mobile_browser--;
    }
    if (strpos($user_agent, 'opera mini') > 0) {
        $mobile_browser++;
    }
    if (strpos($user_agent, 'iemobile') > 0) {
        $mobile_browser++;
    }
    if ($mobile_browser > 0) {
        // 如果是移动设备，则重定向到手机模板
        // 注意：这里使用的是 header 跳转，如果你的URL有特殊参数，需要相应调整
        // 更稳妥的方式是改变模板变量，但header跳转最直接
        header('Location: /templets/mobile/about_m.htm');
        exit; // 跳转后终止脚本执行
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <!-- PC端的其他CSS和JS -->
</head>
<body>
    <!-- PC端关于我们页面的原始内容 -->
    <h1>{dede:field.title/}</h1>
    <div>
        {dede:field.body/}
    </div>
</body>
</html>

代码解释：

  1. 这段 PHP 代码会获取访问者的 HTTP_USER_AGENT。
  2. 通过一系列 preg_match 和 strpos 判断,检查用户代理字符串中是否包含移动设备的关键词。
  3. $mobile_browser 计数大于 0,说明是移动设备访问。
  4. header('Location: /templets/mobile/about_m.htm'); 会立即将用户重定向到我们刚才创建的手机模板文件。
  5. exit; 确保跳转后，不再执行 PC 模板的剩余代码。

步骤 4：确保网站根目录可访问

为了让 header 跳转能够成功，你需要确保 /templets/mobile/about_m.htm 这个文件可以通过 URL 直接访问。

  • 方法一（推荐）： 将 templets 目录设置为网站的虚拟目录或别名，在 Nginx 配置中添加：

    location /templets/ {
    alias   /你的网站绝对路径/templets/;
    allow all;
}

    这样，用户就可以通过 http://你的域名/templets/mobile/about_m.htm 访问手机模板了。

  • 方法二（不推荐，有安全风险）： 直接将 templets 目录放在网站根目录下，这样虽然可以直接访问，但会暴露你的模板文件结构,有被下载和篡改的风险。

进阶与优化

创建更通用的判断函数

如果你的网站有很多页面都需要手机适配，在每个模板文件顶部都粘贴一大段 PHP 代码会很麻烦,你可以创建一个公共函数文件来存放这段判断逻辑。

  1. 在 include 目录下创建一个新文件，mobile_redirect.php。

  2. 将上面的判断逻辑（不含 header 跳转部分）封装成一个函数：

    // include/mobile_redirect.php
function is_mobile() {
    if (isset($_SERVER['HTTP_USER_AGENT'])) {
        $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        $mobile_browser = '0';
        if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|ipod|ios|iphone)/i', $user_agent)) {
            $mobile_browser++;
        }
        if ((strpos($user_agent, 'ipad') > 0) && $mobile_browser > 0) {
            $mobile_browser--;
        }
        if (strpos($user_agent, 'opera mini') > 0) {
            $mobile_browser++;
        }
        if (strpos($user_agent, 'iemobile') > 0) {
            $mobile_browser++;
        }
        return $mobile_browser > 0;
    }
    return false;
}

  3. 然后在每个需要手机适配的 PC 模板文件顶部,只需要这样调用即可：

    <?php
require_once(dirname(__FILE__)."/../include/mobile_redirect.php");
if (is_mobile()) {
    // 假设你的所有手机模板都在 /templets/mobile/ 目录下
    // 并且手机模板和PC模板文件名对应，about.htm -> about_m.htm
    $pc_template = __FILE__; // 当前PC模板的绝对路径
    $mobile_template = str_replace('/templets/default/', '/templets/mobile/', $pc_template);
    $mobile_template = preg_replace('/\.htm$/i', '_m.htm', $mobile_template);
    if (file_exists($mobile_template)) {
        header('Location: ' . str_replace($_SERVER['DOCUMENT_ROOT'], '', $mobile_template));
        exit;
    }
}
?>

使用更专业的移动适配方案

对于更复杂的项目，手动判断和跳转可能不够灵活,可以考虑以下两种现代方案：

  • 响应式设计： 这是最主流的方案，只制作一套模板，但使用 CSS3 的媒体查询 来为不同屏幕尺寸的设备（PC、平板、手机）提供不同的布局和样式。

    • 优点： 一套代码，维护简单，对SEO友好（URL不变）。
    • 缺点： 需要编写复杂的CSS,且可能加载一些在移动端用不上的资源。

  • DedeCMS 自带的移动端解决方案（/m/ 目录）： DedeCMS 官方提供了一套移动端解决方案，你需要在网站根目录下创建一个名为 m 的文件夹，然后将 templets/default 目录下的文件复制到 m 目录下,并进行修改。

    • 原理： 通过 .htaccess (Apache) 或 nginx.conf (Nginx) 的 URL 重写规则，将所有 http://你的域名/m/ 开头的请求，重写到后台的 php 文件，并设置一个全局变量 is_mobile = 1，系统在加载模板时，会检测这个变量，从而自动选择 mobile 文件夹下的模板。
    • 优点： 官方支持,相对规范。
    • 缺点： 需要配置服务器重写规则，并且会生成一套独立的移动端网站（URL不同），对SEO来说需要做适配（如添加 rel="alternate" 和 rel="canonical" 标签）。

对于你提出的“dede 手机模板单页模板”的需求，最直接、最容易上手的方案是 方案二：

  1. 在 templets 下创建 mobile 文件夹。
  2. 在 mobile 文件夹中创建你的手机单页模板（如 about_m.htm）。
  3. 在对应的 PC 端模板（如 about.htm）文件顶部，加入 PHP 设备判断和 header 跳转代码。
  4. 确保服务器配置允许直接访问 templets 目录下的文件。

这个方法简单粗暴，但对于制作几个独立的单页模板来说，非常有效，如果你的网站需要全面移动化，建议花时间学习响应式设计或研究 DedeCMS 官方的 /m/ 目录方案。

-- 展开阅读全文 --
头像
织梦CMS MySQL如何优化数据库性能？
« 上一篇 今天
织梦谷歌sitemap如何正确生成与提交？
下一篇 » 今天

相关文章

取消
微信二维码
支付宝二维码

目录[+]