dede如何制作手机版-DEDE建站-盈思创科技

使用 DedeCMS 自带的手机模板功能（传统方法）

这是 DedeCMS 早期版本内置的功能，通过检测用户设备，自动切换到对应的手机模板。

原理： 在网站根目录下创建一个名为 m 或 mobile 的文件夹，并放入一套专门为手机设计的模板，当用户通过手机访问时，系统会自动识别并调用这个文件夹里的模板。

优点：

官方支持： 无需安装额外插件，系统原生功能。
简单直接： 对于简单的网站，可以快速实现移动端适配。

缺点：

维护困难： 需要维护两套独立的模板（PC端和移动端），内容修改需要同步两次，非常容易出错。
代码冗余： 网站文件体积变大，服务器负载增加。
体验不佳： 无法实现响应式设计，手机端和PC端是两套完全不同的代码，无法完美适配各种尺寸的手机屏幕。
已被淘汰： 这种方法在现代Web开发中已经基本被淘汰，不推荐用于新项目。

操作步骤（以 m 文件夹为例）：

创建移动端模板目录： 在网站根目录（与 /dede、/include 等同级的目录）下，新建一个名为 m 的文件夹。
复制并修改模板文件：
- 将你PC端的模板文件夹（/templets/default）中的所有文件，复制一份到 /m 文件夹中。
- 修改 /m 文件夹中的模板文件（如 index.htm, list.htm, article.htm 等），删除不适合手机显示的代码（如侧边栏 sidebar、顶部复杂导航等），并使用适合手机的CSS样式（字体更大、按钮更大、布局更简单）。

修改织梦核心文件（重要！）： 这是实现自动跳转的关键，你需要修改 include/arc.archives.class.php 和 include/arc.listview.class.php 这两个文件，在其中添加移动端模板的解析逻辑。

打开 arc.archives.class.php 文件，找到 ParseTemplets() 函数，在函数内部找到类似 $this->Fields['templet'] = $this->TypeLink->TypeInfos['templet']; 的代码，在其后添加以下逻辑：

// 检测是否为移动端
if (isMobile()) {
    // 如果是移动端，则使用m目录下的模板
    $this->Fields['templet'] = str_replace('/templets', '/m/templets', $this->Fields['templet']);
}

同样,在 arc.listview.class.php 文件中找到 ParseTemplets() 函数，也添加类似的逻辑。

注意： 你还需要一个 isMobile() 函数，可以在 include/common.func.php 文件中添加以下代码：

// 判断是否为移动设备
function isMobile() {
    // 如果有HTTP_X_WAP_PROFILE，则一定是移动设备
    if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) {
        return true;
    }
    // 如果via信息含有wap，则一定是移动设备
    if (isset($_SERVER['HTTP_VIA'])) {
        return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
    }
    // 脑残法，判断手机发送的客户端标志
    if (isset($_SERVER['HTTP_USER_AGENT'])) {
        $clientkeywords = array('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile');
        // 从HTTP_USER_AGENT中查找手机浏览器的关键字
        if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) {
            return true;
        }
    }
    // 协议法，因为有可能不准确，放到最后判断
    if (isset($_SERVER['HTTP_ACCEPT'])) {
        // 如果只支持wml并且不支持html，那么是移动设备
        if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) {
            return true;
        }
        // 如果支持wml和html，但是wml在html之前，则是移动设备
        if ((strpos($_SERVER['HTTP_ACCEPT'], 'text/vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'text/vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) {
            return true;
        }
    }
    return false;
}

更新缓存： 登录DedeCMS后台，点击“系统” -> “清除缓存”，确保修改生效。

使用第三方响应式模板（推荐方法）

这是目前最流行、最推荐的方法，你只需要使用一套模板，通过CSS和JavaScript技术，让网站自动适应不同尺寸的屏幕（手机、平板、PC）。

原理： 使用响应式网页设计（Responsive Web Design, RWD）技术，核心是使用媒体查询（Media Queries）和弹性布局（Flexbox/Grid），当浏览器窗口大小改变时，CSS会自动应用不同的样式规则，从而重新排列和调整页面元素。

优点：

一套代码，多端适配： 无需维护两套模板，修改内容一次即可。
维护成本低： 只需管理和更新一套模板文件。
SEO友好： Google等搜索引擎明确推荐响应式设计，因为它只有一个URL，有利于权重集中。
用户体验好： 页面布局可以根据屏幕大小智能调整，提供最佳浏览体验。

缺点：

对CSS要求高： 需要具备一定的CSS和响应式设计知识。
加载时间可能稍长： 因为所有设备的代码都在一起，但可以通过优化CSS和图片来缓解。

操作步骤：

寻找或购买响应式模板：
- 模板市场： 在DedeCMS官方模板市场、站长素材网等地方搜索“DedeCMS 响应式模板”。
- 专业模板网站： 购买一些高质量的响应式模板，它们通常已经做好了所有适配工作。
- 使用框架： 如果你懂技术，可以基于 Bootstrap、Tailwind CSS 等现代前端框架来构建自己的响应式模板。
安装模板： 将下载的响应式模板文件夹上传到 /templets/ 目录下，然后在DedeCMS后台“系统” -> “默认模板管理”中，将其设置为默认模板。
自定义和优化：
- 根据你的需求修改模板的HTML结构和CSS样式。
- 关键点： 检查模板中的媒体查询（@media）部分，确保在手机屏幕（如 max-width: 768px）下，导航栏会变成汉堡菜单，图片会等宽缩放，布局会从多列变为单列等。

生成独立的移动站点（m.domain.com）

这种方法是创建一个完全独立的、域名或子域名为 m.yourdomain.com 的移动网站。

原理： 将移动端的所有文件（HTML、CSS、JS）放在一个独立的目录下（如 /mobile），并绑定一个子域名，用户访问时，通过一段JavaScript或PHP代码判断设备，然后自动跳转到移动站点。

优点：

极致优化： 可以针对移动端进行完全独立的代码、图片和资源优化，加载速度可以做到最快。
最佳用户体验： 可以完全为触摸操作设计，提供类似App的流畅体验。
灵活性强： 可以使用与PC端完全不同的技术栈（移动端可以采用更现代的前端框架）。

缺点：

成本最高： 需要开发两套独立的网站，工作量和维护成本都非常高。
SEO复杂： 需要使用 rel="alternate" 和 rel="canonical" 标签来告诉搜索引擎两个版本之间的关系，处理不当可能导致权重分散。
开发周期长： 适合大型商业项目，对于中小型网站来说过于复杂。

操作步骤（简述）：

创建移动站点目录： 在网站根目录下创建 /mobile 文件夹。
开发移动站点： 将 /mobile 文件夹开发成一个独立的网站，包含自己的模板、逻辑和数据库（通常与PC端共享同一数据库）。
配置子域名： 在你的服务器或虚拟主机控制面板中，将子域名 m.yourdomain.com 指向 /mobile 目录。

添加跳转代码： 在PC端模板的 <head> 标签内添加一段跳转脚本，

<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphone = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        window.location.href = "http://m.yourdomain.com"; // 你的移动站地址
    }
}
browserRedirect();
</script>

总结与建议

方法	优点	缺点	推荐度
自带手机模板	简单、官方支持	维护困难、体验差、代码冗余	⭐☆☆☆☆ (不推荐)
响应式模板	一套代码、维护成本低、SEO友好	需要CSS知识、加载稍慢	⭐⭐⭐⭐⭐ (强烈推荐)
独立移动站点	极致优化、体验最佳	成本高、开发复杂、SEO处理难	⭐⭐☆☆☆ (仅大型项目)

对于绝大多数 DedeCMS 用户，我强烈推荐你使用【方法二：使用第三方响应式模板】。

这是目前行业内的标准做法,既能满足移动端访问的需求，又能最大程度地节省你的时间和精力，同时保证网站在搜索引擎中的良好表现，你可以花一些时间去寻找一个合适的响应式模板，这会是你做过的最明智的决定之一。

dede如何制作手机版

使用 DedeCMS 自带的手机模板功能（传统方法）

使用第三方响应式模板（推荐方法）

生成独立的移动站点（m.domain.com）

总结与建议

相关文章

目录[+]