织梦如何快速仿制手机网站？-织梦建站-盈思创科技

使用织梦自带的移动端跳转功能（推荐，最常用）

这是最传统也是最官方的方法,它不创建一个独立的手机网站，而是让同一个网站在手机访问时自动切换到专门为手机设计的模板。

（图片来源网络，侵删）

核心原理：

识别设备： 当用户通过手机访问网站时，织梦会自动识别用户的浏览器 User-Agent。
跳转或切换： 如果识别为手机，系统会自动跳转到 /m/ 目录下的手机端首页。
独立模板： /m/ 目录下存放的是一套完整的、专为手机设计的模板文件（HTML、CSS、JS）。
共享数据： 手机网站和PC网站共享同一个后台数据库，数据是互通的。

操作步骤：

第1步：创建 `/m` 目录并上传手机端文件

在你的网站根目录下（与 /dede、/data 同级），创建一个名为 m 的文件夹。
将你准备好的手机网站模板的所有文件（HTML、CSS、JS、图片等）上传到这个 /m 目录中。
关键： 你需要修改手机模板中的链接，确保它们能正确跳转到织梦的动态页面，文章链接不要写成 article.html，而要写成 {dede:field name='arcurl'/}，这样才能调用织梦的动态地址。

第2步：修改织梦核心文件 `index.php`

这是实现自动跳转的核心步骤。

打开网站根目录下的 index.php 文件。

找到类似这样的代码段（通常在文件最顶部，require_once 语句之前）：

//自动移动设备适配
if ( isset($_GET['mobile']) )
{
    $mobile = $_GET['mobile'];
}
else
{
    $mobile = is_mobile();
}
if($mobile){
    //跳转到手机站
    $mobile_url = 'http://你的域名.com/m/';
    header("Location: $mobile_url");
    exit();
}

如果找不到,你可以手动添加上面的代码。is_mobile() 是一个判断函数，织梦默认不包含，所以你需要自己定义它。

第3步：添加 `is_mobile()` 判断函数

为了 index.php 能正常工作，你需要添加一个判断是否为移动设备的函数。

（图片来源网络，侵删）

打开 /include/extend.func.php 文件（如果这个文件不存在，就新建一个）。

在文件中添加以下函数代码：

/**
 * 判断是否为移动设备访问
 * @return bool
 */
function is_mobile() {
    // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
    if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) {
        return true;
    }
    // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
    if (isset ($_SERVER['HTTP_VIA'])) {
        // 找不到为flase,否则为true
        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那一定是移动设备
        // 如果支持wml和html但是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;
        }
    }
    return false;
}

这个函数可以很好地识别绝大多数移动设备。

第4步：配置PC端模板的跳转标签

为了更好的用户体验,通常在PC网站的首页或页脚添加一个“切换到手机版”的链接，反之亦然。

PC端模板 中添加“切换到手机版”链接：
```
<a href="/m/">切换到手机版</a>
```
或者使用带参数的链接,防止无限循环：
（图片来源网络，侵删）
```
<a href="/index.php?mobile=yes">切换到手机版</a>
```
这样,当用户点击时，index.php 中的 $_GET['mobile'] 就会被设置为 yes，直接执行跳转。
手机端模板 (/m/ 目录下) 中添加“返回电脑版”链接：
```
<a href="/index.php?mobile=no">返回电脑版</a>
```
当 mobile=no 时，is_mobile() 函数判断会被跳过，直接进入PC版首页。

第5步：生成手机端栏目和内容

登录织梦后台。
生成栏目： 进入“栏目管理”，选择你希望在手机端显示的栏目，点击“更新栏目HTML”或“生成HTML”，注意，此时你需要选择手机端的模板。
进入“文档列表”，选择需要生成文章的栏目，点击“一键生成”或“更新文档HTML”，同样，在生成选项中选择手机端的文章内容页模板。

优点：

官方支持,稳定可靠。
数据完全共享,一次发布，两端可见。
对SEO友好,因为域名只有一个，权重集中。

缺点：

维护两套模板,工作量大。
/m/ 目录下的文件需要手动生成和管理，容易出错。

使用响应式模板（现代、推荐）

这是目前更流行、更先进的方法，它不创建独立的手机网站，而是使用一套模板，通过CSS媒体查询（Media Queries）来自适应不同屏幕尺寸的设备。

核心原理：

一套模板，多端适配： 只需要制作一套PC网站的模板。
CSS魔法： 在CSS中定义不同屏幕宽度下的样式，当屏幕宽度小于768px时，应用手机端的布局、字体大小和隐藏某些元素。
织梦标签不变： 模板中的织梦标签（如 {dede:arclist}）完全不变，数据调用逻辑完全一致。

操作步骤：

第1步：选择或制作响应式模板

购买/下载： 从模板网站（如织梦之家、站长素材等）购买或下载一个已经做好响应式布局的织梦模板。
自行开发： 如果你懂HTML和CSS，可以在现有PC模板的基础上，自己添加响应式代码。

第2步：关键CSS代码示例

在你的CSS文件中（通常是 style.css），添加类似下面的代码：

/* 默认样式（PC端） */
.header { width: 1200px; margin: 0 auto; }
.main-content { float: left; width: 70%; }
.sidebar { float: right; width: 28%; }
/* 当屏幕宽度小于等于768px时（平板和手机） */
@media screen and (max-width: 768px) {
    .header { width: 100%; }
    .main-content, .sidebar { 
        float: none; 
        width: 100%; 
    }
    /* 可以隐藏PC端才有的元素 */
    .pc-only { display: none; }
    /* 可以显示手机端才有的元素 */
    .mobile-only { display: block; }
}
/* 当屏幕宽度小于等于480px时（小屏手机） */
@media screen and (max-width: 480px) {
    .header h1 { font-size: 20px; }
    .menu { font-size: 14px; }
}

max-width: 768px 是一个常见的断点，你可以根据你的设计调整。
.pc-only 和 .mobile-only 是非常有用的类名，你可以用它们来控制某些元素只在特定设备下显示。

第3步：在HTML模板中使用类

在你的HTML模板中,给需要控制的元素添加相应的类。

<!-- 在HTML中 -->
<div class="header pc-only">这是只在PC端显示的顶部横幅</div>
<div class="mobile-only">这是只在手机端显示的返回顶部按钮</div>
<div class="main-content">
    {dede:arclist row="10" titlelen="30"}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:arclist}
</div>
<div class="sidebar">
    {dede:include filename="side.htm"/}
</div>

第4步：优化移动端体验

设置视口： 在HTML的 <head> 部分必须加上 <meta name="viewport" content="width=device-width, initial-scale=1.0">，这是响应式网页的灵魂，它告诉浏览器如何控制页面的尺寸和缩放。
图片自适应： 使用 max-width: 100%; height: auto; 让图片不会超出屏幕宽度。

优点：

一套模板，维护简单。 只需要管理和更新一套文件。
体验流畅。 无需跳转，用户在切换设备时内容无缝衔接。
代码更规范。 符合现代Web开发标准。

缺点：

对CSS要求较高。 需要前端开发能力来编写和调试响应式CSS。
所有资源都会加载。 即使在手机上，PC端的一些隐藏元素也可能被加载，对加载速度有一定影响（但可通过现代技术如picture标签优化）。

总结与对比

特性	方法一 (移动端跳转 `/m/`)	方法二 (响应式模板)
实现原理	设备识别，跳转到独立模板	CSS媒体查询，自适应布局
模板数量	两套（PC + Mobile）	一套
维护成本	较高，需维护两套模板	较低，只需维护一套模板
用户体验	有跳转，体验稍割裂	无缝切换，体验流畅
开发难度	低，主要后台配置	中，需要CSS知识
SEO	集中于一个域名，SEO友好	集中于一个域名，SEO友好
适用场景	旧站改造，对手机版有特殊设计需求，团队前端能力较弱	新建站，追求现代体验，团队有一定前端能力

最终建议：

对于新项目或希望长期发展的网站，强烈推荐使用方法二（响应式模板）。 它是未来的趋势，维护更简单，用户体验也更好。
对于已经存在的PC网站，且不想大改模板，或者手机版有非常独特的设计（与PC版差异巨大），可以考虑使用方法一（移动端跳转）。 它能快速实现移动端适配。

希望这个详细的教程能帮助你成功在织梦中仿制出手机网站！

织梦如何快速仿制手机网站？

使用织梦自带的移动端跳转功能（推荐，最常用）

第1步：创建 `/m` 目录并上传手机端文件

第2步：修改织梦核心文件 `index.php`

第3步：添加 `is_mobile()` 判断函数

第4步：配置PC端模板的跳转标签

第5步：生成手机端栏目和内容

使用响应式模板（现代、推荐）

第1步：选择或制作响应式模板

第2步：关键CSS代码示例

第3步：在HTML模板中使用类

第4步：优化移动端体验

总结与对比

相关文章

目录[+]

使用织梦自带的移动端跳转功能（推荐，最常用）

第1步：创建 /m 目录并上传手机端文件

第2步：修改织梦核心文件 index.php

第3步：添加 is_mobile() 判断函数

第4步：配置PC端模板的跳转标签

第5步：生成手机端栏目和内容

使用响应式模板（现代、推荐）

第1步：选择或制作响应式模板

第2步：关键CSS代码示例

第3步：在HTML模板中使用类

第4步：优化移动端体验

总结与对比

相关文章

目录[+]

第1步：创建 `/m` 目录并上传手机端文件

第2步：修改织梦核心文件 `index.php`

第3步：添加 `is_mobile()` 判断函数