dede手机模板怎么生成？-DEDE建站-盈思创科技

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

这是最核心的步骤,你需要创建一套专门为手机端优化的模板文件。

（图片来源网络，侵删）

准备工作：理解模板目录结构

你需要了解 DedeCMS 的模板存放位置，通常位于 /templets/ 目录下，默认情况下，PC 端的模板存放在 /templets/default/ 目录中。

为了管理方便,我们通常建议为手机端创建一个新的模板目录，/templets/mobile/。

/templets/
├── default/          # PC端默认模板
│   ├── index.htm
│   ├── list_article.htm
│   └── ...
└── mobile/           # 手机端模板 (新建这个目录)
    ├── index.htm
    ├── list_article.htm
    └── ...

创建手机版模板文件

你需要将 PC 端的模板文件（如 index.htm, list_article.htm, article_article.htm 等）复制到 /templets/mobile/ 目录中，然后对这些文件进行修改，使其适应手机屏幕。

手机模板修改要点：

（图片来源网络，侵删）

响应式设计（推荐）：使用 viewport 标签和 CSS 媒体查询，让一套模板能同时适应 PC 和手机，这是目前最主流和高效的方式。
简化布局：手机屏幕小，要减少不必要的侧边栏、顶部横幅等复杂元素，突出核心内容。
增大字体和按钮：确保文字大小易于阅读，按钮（如“返回首页”、“分享”）有足够大的点击区域。
使用更简单的 CSS：避免使用复杂的 CSS3 动画和效果，保证在移动设备上的流畅性。

一个简单的手机模板 index.htm 示例：

<!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/}</title>
    <style>
        /* 简单的移动端样式 */
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; }
        .header { text-align: center; margin-bottom: 20px; }
        .header h1 { font-size: 24px; }
        .content { background: #fff; padding: 15px; border-radius: 5px; }
        .article-list { list-style: none; padding: 0; }
        .article-list li { border-bottom: 1px solid #eee; padding: 10px 0; }
        .article-list a { text-decoration: none; color: #333; font-size: 16px; }
        .article-list a:hover { color: #0066cc; }
    </style>
</head>
<body>
    <div class="header">
        <h1>{dede:global.cfg_webname/}</h1>
    </div>
    <div class="content">
        <ul class="article-list">
            {dede:arclist titlelen='50' row='10'}
            <li>
                <a href="[field:arcurl/]">[field:title/]</a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
</body>
</html>

关键点：

<meta name="viewport" ...>：这是移动端页面的灵魂，用于控制页面的缩放和布局。
{dede:arclist ...}：这是 DedeCMS 的标签，用于调用文章列表，和 PC 模板中的用法一样。

第二步：生成并配置手机版页面

模板文件准备好后,你需要告诉 DedeCMS 系统这套手机模板，并生成对应的 HTML 文件。

进入“手机模板”设置后台

登录你的 DedeCMS 后台。
在左侧菜单中找到并点击 【模板】 -> 【手机模板】。

设置默认手机模板

在“手机模板”设置页面，你会看到系统内置的默认模板（如 default）。
点击右上角的 【设置默认模板】 按钮。
在弹出的设置页面中,你需要为不同的页面指定手机模板。
- 主页模板：选择你刚才创建的 mobile 目录下的 index.htm。
- 列表页模板：选择 mobile 目录下的 list_article.htm。
- 文章页模板：选择 mobile 目录下的 article_article.htm。
- ... (其他页面如搜索页、图片集等也按需设置)
点击 【保存】 按钮。

生成手机版 HTML 页面

设置好模板后,你需要重新生成网站，让 DedeCMS 使用新的手机模板来创建静态文件。

在后台左侧菜单中,找到并点击 【生成】 -> 【更新主页HTML】。
在更新主页页面,你会看到一个选择下拉框。
在这个下拉框中,选择 【m】 (代表 mobile)。
点击 【开始生成】 按钮。
系统会开始为你生成手机版的首页,生成成功后，它会提示你“成功更新首页HTML！”。
同样地，你还需要生成列表页和文章页：
- 进入 【生成】 -> 【列表页更新】，选择列表页模板（如 list_article.htm），然后点击“生成”。
- 进入 【生成】 -> 【文档HTML更新】，选择“所有栏目”，然后点击“开始生成”。

配置域名跳转（可选但推荐）

为了让用户在访问 PC 网址时能自动跳转到手机版，或者通过一个专门的二级域名访问手机版，你需要进行域名配置。

自动跳转：在网站根目录的 index.php 文件开头加入以下 PHP 代码，它会检测用户的 User-Agent，如果是手机设备，就自动跳转到 /m/ 目录。

<?php
// 自动跳转到手机版
if(isset($_GET['mobile'])){
    $mobile = $_GET['mobile'];
}else{
    $mobile = '';
}
if(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'], 'iPod') !== false || $mobile=='yes'){
    // 如果手机版目录是 /m/，则跳转到 /m/
    $mobile_url = 'http://'.$_SERVER['HTTP_HOST'].'/m/';
    // 如果要跳转到二级域名，如 m.yourdomain.com，则使用下面的代码
    // $mobile_url = 'http://m.yourdomain.com/';
    Header("Location: $mobile_url");
}
?>
// ... 后面是原来的 index.php 代码

二级域名访问：
1. 在你的服务器或虚拟主机控制面板中,为 m.yourdomain.com (替换成你的域名) 创建一个域名解析，指向你网站服务器的 IP。
2. 在服务器上为这个二级域名创建一个网站目录,并将其指向你网站目录下的 /m/ 文件夹。
3. 确保 /m/ 目录下有 index.php 和 data 等必要文件（可以从根目录复制过来）。

总结与排查

完成以上步骤后,你的 DedeCMS 手机模板应该就可以正常工作了。

如何验证是否成功？

直接访问 /m/ 目录：在浏览器地址栏输入 你的域名/m/，看是否能正确显示你设计的手机版首页。
使用手机浏览器：用手机访问你的主域名，看是否会自动跳转到 /m/，并且页面样式是手机版的。
使用开发者工具：在 PC 浏览器上按 F12 打开开发者工具，点击设备模拟器图标，选择一个手机型号，然后刷新页面，查看显示效果。

常见问题排查：

样式错乱/不生效：检查 /templets/mobile/ 目录下的模板文件名是否正确，后台设置是否选择了正确的模板文件，检查 CSS 代码是否被浏览器缓存，可以尝试强制刷新 (Ctrl+F5)。
标签不显示内容：确保你使用的 DedeCMS 标签（如 {dede:arclist}）在手机模板中是正确的，并且后台已经成功生成了对应的 HTML 文件。
跳转不生效：检查 index.php 中的跳转代码是否正确放置，以及服务器的 PHP 解析是否正常。

希望这份详细的指南能帮助你成功生成 DedeCMS 的手机模板！

dede手机模板怎么生成？