dede手机列表模板如何调用与设置？-DEDE建站-盈思创科技

核心概念

在 DedeCMS 中,为手机端制作模板主要有两种方式：

（图片来源网络，侵删）

独立模板（推荐）：为手机端创建一套完全独立的模板文件（如 list_m.htm），当用户通过手机访问时，系统会自动调用这套手机模板，展示的内容可以和电脑端完全不同，这是最灵活、最专业的做法。
响应式模板：使用 CSS3 的媒体查询（@media），在同一个模板文件中，通过不同的 CSS 样式来适配不同尺寸的设备（手机、平板、电脑），这种方式代码更集中,但逻辑相对复杂。

本文将重点讲解独立模板的制作方法，因为它更清晰、更易于维护。

第一步：创建手机列表模板文件

我们需要为手机端创建一个列表页模板，DedeCMS 的默认规则是，在电脑端模板文件名后加上 _m 后缀,即可作为手机端的模板。

找到电脑端列表模板：通常位于 /templets/你的模板文件夹/ 目录下，文件名为 list_default.htm 或 list.htm。
复制并重命名：将这个电脑端列表模板文件复制一份，并将其重命名为 list_default_m.htm（如果你的电脑端模板是 list.htm，则复制为 list_m.htm）。
（图片来源网络，侵删）

文件命名规则：
- 电脑端列表模板：list_*.htm
- 手机端列表模板：list_*_m.htm
- 页模板：article_*.htm
- 页模板：article_*_m.htm
编辑手机端模板：用 Dreamweaver、VS Code 或任何文本编辑器打开 list_default_m.htm 文件，我们将对其进行修改,使其更适合手机端的浏览习惯。

第二步：修改手机端模板内容

手机端模板的核心是简洁、快速、易读，我们需要对 HTML 结构和样式进行调整。

修改头部声明和视口

在模板的最顶部，确保有正确的 HTML5 声明和 viewport 视口标签,这对于移动端页面的正确缩放和布局至关重要。

（图片来源网络，侵删）

<!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:global.cfg_webname/} - {dede:field.title/}</title>
    <!-- 引入手机端专用的 CSS 文件 -->
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/mobile_style.css">
</head>
<body>

width=device-width：宽度设置为设备宽度。
initial-scale=1.0：初始缩放比例为 1。
maximum-scale=1.0, user-scalable=no：禁止用户手动缩放,确保页面布局不被破坏。

简化整体布局结构

手机端的布局通常非常简单：一个顶部导航，一个主要内容区,一个底部导航。

<!-- 顶部导航 -->
<header>
    <a href="javascript:history.back(-1);">返回</a>
    <h1>{dede:field.title/}</h1>
</header>
<!-- 主要内容区 -->
<div class="main">
    {dede:list pagesize='10'}
    <article class="item">
        <a href="[field:arcurl/]">
            <h2>[field:title/]</h2>
            <div class="info">
                <span class="date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</span>
                <span class="views">阅读([field:click/])</span>
            </div>
        </a>
    </article>
    {/dede:list}
</div>
<!-- 分页 -->
<div class="pagination">
    {dede:pagelist listitem='index,pre,next,end,option' listsize='5'/
}
</div>
<!-- 底部导航 -->
<footer>
    <a href="/">首页</a>
    <a href="/list.php?tid=1">分类一</a>
    <a href="/list.php?tid=2">分类二</a>
</footer>
</body>
</html>

编写手机端专用 CSS

在模板的 <head> 部分，我们引入了一个新的 CSS 文件 mobile_style.css,这个文件需要我们自己创建。

创建 CSS 文件：在你的模板目录下，创建一个 css 文件夹，并在其中新建 mobile_style.css 文件。
编写 CSS 样式：打开 mobile_style.css,编写适合手机的样式。

/* 重置默认样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #f4f4f4; }
/* 顶部导航 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
}
header a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}
header h1 {
    margin-left: 15px;
    font-size: 18px;
    font-weight: normal;
    flex: 1;
    text-align: center;
}
区 */
.main {
    margin-top: 50px; /* 防止被顶部导航遮挡 */
    padding: 15px;
}
.item {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.item a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.item h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item .info {
    font-size: 14px;
    color: #999;
}
.item .info span {
    margin-right: 15px;
}
/* 分页 */
.pagination {
    text-align: center;
    margin: 20px 0;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}
.pagination .thisclass {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
/* 底部导航 */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer a {
    text-decoration: none;
    color: #666;
    font-size: 14px;
}

第三步：启用手机模板并设置跳转

模板文件准备好了，现在需要告诉 DedeCMS 使用它,并实现手机自动跳转。

后台启用手机模板

登录 DedeCMS 后台。
进入 【系统】-> 【系统基本参数】-> 【核心设置】**。
找到 “是否开启手机端模板” 选项，选择 “是”。
保存设置。

设置手机域名（可选但推荐）

在 【核心设置】 页面，找到 “手机端访问域名” 选项。
填写你为手机端准备的域名，m.yourdomain.com。
保存设置。

设置自动跳转代码

这是最关键的一步，用于在用户用手机访问电脑端域名时,自动跳转到手机端模板。

打开你电脑端模板的 head.htm 文件（通常在 /templets/你的模板文件夹/ 目录下）。
在 <head> 标签内的合适位置（<title> 标签后面），添加以下 PHP 代码：

<?php
if(!defined('DEDEMOBILE')) {
    // 检测是否为移动设备
    if (isset($_SERVER['HTTP_USER_AGENT'])) {
        $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        $is_mobile = false;
        // 常见的移动设备关键词
        $mobile_agents = array('iphone', 'android', 'ipod', 'ipad', 'windows phone', 'blackberry', 'opera mini', 'ucweb', 'fennec', 'iemobile');
        foreach ($mobile_agents as $device) {
            if (strpos($user_agent, $device) !== false) {
                $is_mobile = true;
                break;
            }
        }
        // 如果是移动设备，并且设置了手机域名，则跳转
        if ($is_mobile && isset($cfg_mobileurl) && $cfg_mobileurl != '') {
            header("Location: $cfg_mobileurl");
            exit();
        }
    }
}
?>

代码解释：

!defined('DEDEMOBILE')：这是一个判断，防止死循环，如果已经是在手机端模板中，这个常量会被定义,就不会再执行跳转。
$_SERVER['HTTP_USER_AGENT']：获取用户的浏览器代理信息,里面包含了设备类型。
我们检查这个字符串中是否包含了常见的移动设备关键词。
如果是移动设备，并且后台设置了“手机端访问域名”（$cfg_mobileurl），就使用 header() 函数进行 301 跳转。

第四步：测试

完成以上所有步骤后,进行测试：

用电脑浏览器访问你的网站,应该显示电脑端模板。
用手机浏览器访问你的网站，应该自动跳转到手机端域名（如果设置了），或者直接显示 list_default_m.htm 的内容,布局是适配手机的。

制作 DedeCMS 手机列表模板的完整流程如下：

创建文件：复制电脑端 list_default.htm 为 list_default_m.htm。
修改模板：在 list_default_m.htm 中添加 viewport 标签，简化 HTML 结构，并引入手机专用的 CSS 文件。
编写 CSS：创建 mobile_style.css，编写移动端友好的样式，如固定导航栏、卡片式布局、合适的字体大小等。
后台设置：在 DedeCMS 后台开启手机模板功能,并设置手机域名。
添加跳转代码：在电脑端模板的 head.htm 中添加 PHP 代码,实现移动设备自动跳转。

遵循这个流程，你就可以为你的 DedeCMS 网站打造一个功能完善、体验良好的手机列表页面了。

dede手机列表模板如何调用与设置？