织梦手机网站仿制有啥步骤和技巧？-织梦建站-盈思创科技

核心思想：一套后台，两套前台（PC端 + 移动端）

织梦CMS实现手机网站的核心机制是模板切换，当用户通过手机访问时，系统会自动识别其设备，并调用专门为手机设计的模板来渲染页面,而PC用户则继续使用原来的PC模板。

（图片来源网络，侵删）

第一步：准备工作

本地环境：确保你的电脑上已经搭建好了本地服务器环境，如 phpStudy、WampServer 或 XAMPP,并且已经成功安装了织梦CMS。
原PC网站数据：确保你已经有了完整的PC网站数据和模板，仿制是基于现有内容的,所以数据是基础。
仿制目标：明确你要仿制的手机网站，最好是保存好它的截图,以便在制作过程中对照。
FTP工具：如 FileZilla,用于上传文件到服务器。

第二步：仿制流程详解

创建移动端专属模板目录和文件

这是最关键的一步,织梦CMS有固定的规则来识别移动模板。

创建移动端模板目录：登录你的FTP工具，连接到网站服务器，在织梦CMS的安装目录下，找到 templets 文件夹，在 templets 文件夹内部，新建一个名为 m 的文件夹。
- 你的PC端模板通常在 templets\default\ 目录下。
- 你的移动端模板将要存放在 templets\m\ 目录下。
复制并修改核心模板文件：你需要将PC端模板的核心文件复制到 templets\m 目录下,然后进行修改。
- 必须复制的文件：
  - index.php (首页模板)
  - list.php (列表页模板)
  - article_article.php (文章内容页模板，文件名可能因模板不同而略有差异，通常是 article_ 开头)
  - head.htm (头部公共模板)
  - footer.htm (底部公共模板)
操作：从 templets\default\ 复制上述文件到 templets\m\。
（图片来源网络，侵删）

修改移动端模板文件（HTML + CSS）

你开始对 templets\m 目录下的文件进行“手术”,将其改造为手机版。

设置HTML视口：打开 templets\m 下的 head.htm 文件，在 <head> 标签内添加以下代码,这是手机网页适配的灵魂：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

viewport：告诉浏览器如何控制页面的尺寸和缩放。
apple-mobile-web-app-*：让网页在苹果手机上像App一样运行。

引入移动端样式：
- 方案A：修改现有CSS：直接修改 head.htm 中引用的CSS文件，将所有单位（如 px）改为更灵活的单位（如 rem 或 em），并简化CSS结构,移除PC端不必要的复杂样式。
- 方案B（推荐）：新建移动端CSS：在 templets\m 目录下新建一个 style.css 或 mobile.css 文件，在 head.htm 中引入它，并覆盖或重写PC端的CSS样式，这样做更清晰，不会影响PC端模板。
```

<link rel="stylesheet" type="text/css" href="{dede:global.cfg_cmsurl/}/templets/m/style.css">
```
重构HTML结构：
（图片来源网络，侵删）
- 简化布局：手机屏幕小，布局要简洁，通常采用顶部导航（Logo+搜索）、区、底部导航栏（首页、分类、个人中心等）的经典结构。
- 使用织梦标签：模板中的核心内容（如文章标题、图片、时间）仍然使用织梦的默认标签，
  - {dede:arclist titlelen='30' row='5'}...{/dede:arclist} (调用文章列表)
  - {dede:field.title/} (文章标题)
  - {dede:field.body/} (文章内容) 你只需要修改这些标签之外的HTML框架和CSS样式会自动从数据库中获取。
- 图片优化：确保所有图片都设置了 width="100%" 和 height="auto"，这样图片才能自适应容器宽度,考虑使用更小的图片尺寸以加快加载速度。

制作底部导航栏：这是手机网站用户体验的关键，在 footer.htm 中，你可以用 <a> 标签和 <span> 制作一个固定的底部菜单。

<!-- 在 footer.htm 中 -->
<div class="footer-nav">
    <a href="/"><span>首页</span></a>
    <a href="/list.php?tid=1"><span>新闻</span></a>
    <a href="/list.php?tid=2"><span>产品</span></a>
    <a href="/plus/list.php?tid=3"><span>关于我们</span></a>
</div>

然后在你的移动端CSS (style.css) 中为它添加样式，使其固定在底部,并美化图标和文字。

配置织梦后台以启用移动端

模板做好了,现在需要告诉织梦系统在什么情况下使用它。

开启手机站点：登录织梦后台，进入 “系统” -> “系统基本参数” -> “核心设置”。找到 “是否开启手机站” 选项，选择 “是”，然后点击“保存”。
设置移动端域名和模板目录：仍然在 “系统基本参数” 页面，找到 “手机站点” 相关的设置项：
- 手机站点域名：填写你的移动端域名，如果你还没有独立域名，可以暂时填写和PC站一样的域名，或者使用一个二级域名（如 m.yourdomain.com）。
- 手机版模板目录：填写 m，这是告诉织梦去 templets/m 目录下寻找移动模板。
- 手机版默认首页模板：填写 index.php。

设置PC站与移动站的跳转（可选但推荐）：为了让PC用户访问时自动跳转到手机版（反之亦然），你可以在PC端的 head.htm 和移动端的 head.htm 中加入相应的跳转代码。

在PC端 head.htm 中加入（当用户用手机访问PC站时，自动跳转到移动站）：

<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = 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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        window.location.href = "这里填写你的移动端域名"; //  "http://m.yourdomain.com"
    }
}
browserRedirect();
</script>

在移动端 head.htm 中加入（当用户用PC访问移动站时，提示或跳回PC站）：

<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = 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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
        // 可以弹窗提示，也可以直接跳转
        // alert("您当前为PC端访问，即将跳转到PC版网站");
        window.location.href = "这里填写你的PC端域名"; //  "http://www.yourdomain.com"
    }
}
browserRedirect();
</script>

测试与上线

本地测试：在本地环境中完成所有修改后，使用浏览器的“开发者工具”（F12）切换到手机模式（如 iPhone, Android 等），检查网站布局是否错乱、图片是否正常显示、链接是否有效。
上传服务器：确认本地测试无误后，通过FTP将整个 templets/m 目录以及修改过的后台配置上传到服务器。
线上测试：用你的手机访问网站域名，检查是否自动跳转到移动版，并逐一测试首页、列表页、内容页、底部导航等是否功能正常。
最终上线：测试通过后,你的织梦手机网站仿制就完成了。

总结与注意事项

版权问题：仿制他人网站时，请务必尊重原创版权，仅用于学习和技术研究目的,切勿直接用于商业盈利。
性能优化：手机网站对速度要求更高，确保图片经过压缩，CSS和JS文件尽量合并或压缩,减少HTTP请求。
响应式设计 vs. 独立移动站：本教程教你的是独立移动站（m目录），另一种方法是响应式设计，即一套模板通过CSS媒体查询（@media）同时适配PC和手机，响应式更现代，但开发难度稍高，对于快速仿制,独立移动站是更直接的方法。
织梦标签：不要害怕织梦标签，它们是动态内容的核心，你只需要专注于修改HTML结构和CSS样式,内容部分交给标签即可。

按照以上步骤，你就可以成功仿制出一个功能完善的织梦手机网站了,祝你成功！

织梦手机网站仿制有啥步骤和技巧？