dedewap教程如何适配手机端？-DEDE建站-盈思创科技

DedeCMS WAP建站完整教程

本教程主要适用于 DedeCMS 5.7 / 5.8 等主流版本。

（图片来源网络，侵删）

第一部分：准备工作

在开始之前,请确保你已经：

拥有一套完整的DedeCMS PC站点：并且已经正常运行，后台可以登录。
准备好移动端主题模板：你可以选择自己制作，或者在网上下载现成的移动端模板，常见的移动端模板类型有：
- 响应式模板：同一套模板，通过CSS和JavaScript在不同设备上自动调整布局，这是目前最推荐的方式。
- 独立模板：为移动端准备一套完全独立的模板文件，通过PHP代码判断设备类型来调用。
FTP/SFTP工具：用于上传文件到你的服务器。
文本编辑器：如 VS Code、Sublime Text、Notepad++ 等，用于修改模板文件。

第二部分：安装与配置移动端模板

这里我们以安装一套独立的移动端模板为例,这是最清晰、最容易理解的方式。

步骤 1：上传移动端模板文件

下载你准备好的移动端模板（通常是一个包含 index.html, list.html, article.html 等文件的文件夹）。
通过FTP工具,将这个文件夹上传到你的DedeCMS站点的 /templets/ 目录下，为了方便管理，可以将其重命名为 m 或 mobile。
- 你的目录结构会变成：/templets/m/

步骤 2：创建移动端专属的首页

（图片来源网络，侵删）

移动端的首页通常和PC端不同,需要更简洁的布局。

在 /templets/m/ 目录下，复制一份 index.html，并命名为 index_default.html，这个文件将作为你的移动端首页模板。
登录你的DedeCMS后台。
进入 【系统】-> 【系统基本参数】-> 【核心设置】。
找到 “主页模板” 这一项，将其值修改为你的移动端首页模板路径：m/index_default.html。
点击 “保存”。

当你用手机访问你的网站时,应该就会调用这套新的移动端首页了。

第三部分：创建移动端列表页和内容页模板

这是最关键的一步,我们需要为栏目和文章创建移动专用的显示模板。

步骤 1：创建移动端列表页模板

在 /templets/m/ 目录下，创建一个文件，命名为 list_m.html，这个文件就是移动端的列表页模板。
你可以复制PC端的 list.html 文件内容过来，然后进行大幅修改，使其适合手机屏幕（简化布局、缩小字体、调整图片大小等）。

关键代码：在 list_m.html 模文件的开头，必须加入以下代码，用于获取栏目信息：

{dede:include filename="head_m.htm"/}
<div class="listbox">
{dede:list pagesize='10'}
<dl>
    <dt><a href="[field:arcurl/]">[field:title/]</a></dt>
    <dd class="intro">[field:description function='cn_substr(@me,100)'/]...</dd>
    <dd class="time">[field:pubdate function="MyDate('Y-m-d',@me)"/]</dd>
</dl>
{/dede:list}
</div>
<!-- 分页 -->
<div class="page">
    {dede:pagelist listsize='5'/}
</div>
{dede:include filename="footer_m.htm"/}

步骤 2：创建移动端内容页模板

在 /templets/m/ 目录下，创建一个文件，命名为 article_m.html，这个文件是移动端的文章内容页模板。
同样,你可以基于PC端的 article.html 进行修改，优化阅读体验（调整字体、行间距、添加返回按钮等）。

关键代码：在 article_m.html 模文件的开头，必须加入以下代码，用于获取文章内容：

{dede:include filename="head_m.htm"/}
<div class="article">
    <h1>[field:title/]</h1>
    <div class="info">
        <span>作者：[field:writer/]</span>
        <span>来源：[field:source/]</span>
        <span>时间：[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span>
        <span>点击：[field:click/]</span>
    </div>
    <div class="content">
        [field:body/]
    </div>
    <!-- 上下篇 -->
    <div class="pages">
        <span>上一篇：{dede:prenext get='pre'/}</span>
        <span>下一篇：{dede:prenext get='next'/}</span>
    </div>
</div>
{dede:include filename="footer_m.htm"/}

步骤 3：创建移动端公共头部和尾部

在 /templets/m/ 目录下，创建 head_m.htm 和 footer_m.htm。

head_m.htm 通常包含移动端页面的 <head> 部分，比如设置视口、引入移动端CSS和JS等。

<!-- head_m.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">
    <title>{dede:global.cfg_webname/} - {dede:field.title/}</title>
    <link rel="stylesheet" href="/templets/m/css/style.css">
</head>
<body>

footer_m.htm 包含页脚信息、返回顶部按钮等。

<!-- footer_m.htm -->
<div class="footer">
    Copyright © {dede:global.cfg_webname/} All Rights Reserved.
</div>
<script src="/templets/m/js/jquery.min.js"></script>
<script src="/templets/m/js/main.js"></script>
</body>
</html>

第四部分：让移动端模板生效

现在模板文件已经准备好了,但DedeCMS还不知道在什么情况下使用它们。

通过栏目设置（推荐）

这是最规范的方法,为每个栏目指定移动端模板。

登录DedeCMS后台,进入 【栏目管理】。
选择你想要设置为移动端的栏目（公司新闻”）。
点击 【修改】。
在栏目编辑页面,找到 “列表模板” 选项，将其修改为你的移动端列表模板：m/list_m.html。
找到 “文章模板” 选项，将其修改为你的移动端内容页模板：m/article_m.html。
点击 “保存”。

这样,当用户访问这个栏目的列表页或文章页时，如果系统判断是移动设备，就会自动调用你设置的移动端模板。

通过PHP自动判断（万能方法）

如果你不想逐个修改栏目,或者希望网站能自动适配所有设备，可以修改核心文件。

找到并打开 include/arc.archives.class.php 文件（用于文章页）和 include/arc.listview.class.php 文件（用于列表页）。（注意：修改核心文件升级后可能会被覆盖，请做好备份）

在 arc.archives.class.php 中：搜索 ($this->Fields['templet'] = $this->Type->GetTemplet($this->Fields['typeid'])); 这一行代码。在它后面添加以下代码：

// 自动判断并使用移动端模板
if (IsMobile()) {
    $m_templet = str_replace('/templets/', '/templets/m/', $this->Fields['templet']);
    if (file_exists($m_templet)) {
        $this->Fields['templet'] = $m_templet;
    }
}

IsMobile() 是DedeCMS自带的判断函数。

在 arc.listview.class.php 中：搜索 ($this->ParseTemplets()); 这一行代码。在它前面添加以下代码：

// 自动判断并使用移动端模板
if (IsMobile()) {
    $m_templet = str_replace('/templets/', '/templets/m/', $this->Fields['templet']);
    if (file_exists($m_templet)) {
        $this->Fields['templet'] = $m_templet;
    }
}

这样,系统在生成页面时，会自动检测访问设备，如果手机访问，就会尝试调用 /templets/m/ 目录下的对应模板。

第五部分：实现PC端和移动端内容同步

这是非常重要的一步,确保用户在PC端和移动端看到的内容是一致的。

推荐方法：使用“手机网站生成插件”

DedeCMS官方或第三方开发者提供了一些插件,可以一键生成移动端站点，并自动同步内容。

在DedeCMS官网或可靠的资源网站搜索“DedeCMS 手机网站生成插件”。
下载插件并按照说明安装到后台。
激活插件后,通常会有一个“一键生成移动站”的按钮，点击它，插件会自动扫描你所有的栏目和文章，并生成对应的移动端静态页面。
这种方法的优势在于：
- 自动化：无需手动为每个栏目设置模板。
- 同步性好更新后，可以重新生成，保持同步。
- SEO友好：通常自动配置好了跳转和声明。

第六部分：设置移动站跳转（非常重要）

为了让搜索引擎（特别是百度）正确识别你的移动站，你需要设置跳转规则。

PC端跳转到移动端：在PC端的 head_m.htm（或者PC端的 head.htm）中，加入以下PHP代码：

<?php
if (IsMobile()){
    $mobileurl = 'http://m.yourdomain.com'; // 替换成你的移动域名
    echo "<script>window.location.href='".$mobileurl."';</script>";
    exit;
}
?>

移动端跳回PC端：在移动端的 head_m.htm 中，可以加一个“电脑版”的链接，让用户方便切换。
```
<a href="http://www.yourdomain.com">电脑版</a>
```
使用自适应（响应式）模板：如果你使用的是响应式模板，这一步可以省略，因为同一套URL，CSS会自动适配设备。

总结与最佳实践

首选响应式：如果条件允许，直接使用响应式模板是最高效、最现代的解决方案，能避免维护两套模板的麻烦。
独立模板更灵活：如果移动端和PC端的栏目结构、内容差异很大，使用独立模板（如本教程所述）是更好的选择。
插件是捷径：对于新手或不希望修改核心文件的用户，使用“手机网站生成插件”是最快、最安全的方法。
备份！备份！备份！：在修改任何文件（尤其是核心文件）之前，务必备份你的网站。
测试：在配置完成后，务必使用不同的手机、平板进行测试，确保页面显示正常、链接无误。

希望这份详细的教程能帮助你成功搭建DedeCMS的移动站点！如果在操作中遇到任何问题，可以随时提问。

dedewap教程如何适配手机端？