织梦手机端网站怎么做-织梦建站-盈思创科技

下面我将为你详细讲解织梦手机站制作的完整流程,从最传统的“PC站+手机站”双站方案，到更现代的“响应式”方案，并附上常见问题解答。

传统双站独立方案（PC站 + 手机站）

这是织梦最经典、最稳定的手机站实现方式，核心思想是：为手机端创建一个独立的模板，通过一个判断脚本，根据用户访问的设备类型，自动跳转到对应的模板。

第一步：准备工作

完整备份：在进行任何修改前，请务必备份你的整个网站程序和数据库，这是最重要的安全措施！
下载手机端模板：
- 你可以从织梦官方模板库、模板网站或淘宝等平台购买专门为织梦设计的手机端模板，手机端模板通常包含 index.html、list_article.html、article_article.html 等文件。
- 也可以自己制作或修改,确保模板样式适合移动端（宽度、字体大小、触摸友好等）。

上传手机端模板文件：

将下载或制作好的手机端模板文件夹（例如命名为 m）通过FTP上传到你网站的根目录 /templets/ 目录下。

你的目录结构应该类似这样：

/你的网站根目录/
├── /templets/
│   ├── /default/     (PC端模板)
│   ├── /m/           (手机端模板)
│   └── ...
├── /dede/           (后台管理目录)
├── /include/        (核心函数库)
├── /index.php       (网站入口文件)
└── ...

第二步：修改PC端首页，添加跳转判断

这是最关键的一步,你需要修改PC端的首页模板文件，在 <head> 标签内加入一段JavaScript代码，用于检测用户设备。

找到你的PC端首页模板文件,通常是 /templets/default/index.html。

用代码编辑器打开它,在 <head> 和 </head> 之间添加以下代码：

<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/index.php";
    }
}
browserRedirect();
</script>

替换域名：将代码中的 http://你的域名/m/index.php 替换成你自己的手机站地址。

第三步：配置手机站

修改手机站首页模板：
- 打开 /templets/m/index.html 文件。
- 找到织梦的模板标签,如 {dede:arclist}、{dede:global.cfg_webname/} 等，确保它们能正确调用数据。
- 重要：手机站的首页也需要调用 {dede:include filename='head.htm'/} 和 {dede:include filename='footer.htm'/}，这些文件也需要在 /templets/m/ 目录下存在。
修改手机站文章页模板：
- 手机站的列表页（list_article.html）和文章页（article_article.html）也需要修改。
- 在文章页模板中,你需要修改文章内容的调用方式，确保图片等资源能正确显示，手机端文章页会调用 {dede:field.body/} 来显示正文。
修改后台“系统参数”：
- 登录织梦后台,进入【系统】-> 系统基本参数 -> 核心设置。
- 找到 “cfg_mobileurl” 这一项，将其值设置为你手机站的首页地址，http://你的域名/m/。
- 这样做的目的是让织梦系统在生成某些特定链接（如分享链接）时，能自动指向手机站。

第四步：生成和测试

更新首页：在后台【生成】-> 主页更新 中，重新生成你的PC端首页，以使跳转代码生效。
更新手机站页面：进入手机站模板所在的目录（/templets/m/），在后台【生成】-> 批量更新栏目/文档页 中，选择手机站的栏目，生成对应的列表页和文章页。
测试：
- 用电脑浏览器访问网站,应正常显示PC端。
- 用手机浏览器访问网站,应自动跳转到手机站。
- 可以使用浏览器的“开发者工具”中的“设备模拟器”功能来测试跳转是否正常。

响应式方案（推荐，更现代）

响应式设计的核心是使用同一套模板,通过CSS媒体查询（Media Queries）来适应不同屏幕尺寸的设备，这是目前的主流做法，体验更好，且对SEO更友好。

第一步：准备响应式模板

获取响应式模板：购买或下载一个支持响应式设计的织梦模板，这些模板通常包含大量的CSS代码和媒体查询，能自动调整布局。
上传模板：将响应式模板上传到 /templets/default/ 目录下（或你自定义的模板目录）。

第二步：移除双站跳转代码

如果你之前做过方案一,请务必删除PC端首页模板中的那JavaScript跳转代码，否则会破坏响应式体验。

第三步：配置和生成

检查模板标签：确保响应式模板中的所有织梦标签都正确无误。
更新系统参数：同样，在后台的“系统基本参数”中设置好 cfg_mobileurl。
生成页面：在后台重新生成所有页面，包括首页、栏目页和文章页。

第四步：测试

测试方法与方案一类似,但重点在于测试不同尺寸下的显示效果：

在电脑上,不断调整浏览器窗口大小，观察网站布局是否随之平滑变化（例如从三列变成两列，再变成一列）。
在手机、平板等不同设备上访问，看显示是否正常且美观。

常见问题与注意事项 (FAQ)

为什么我的手机站图片显示不出来？

原因：最常见的原因是图片路径问题，手机站模板中调用的图片路径可能是绝对路径（http://...），在本地或某些服务器环境下会失效。
解决：
1. 打开手机站模板文件,找到调用图片的标签，如 {dede:field.litpic/}。
2. 将路径修改为织梦的全局标签,[field:litpic function='str_replace("../", "", "@me")'/] 或者直接使用 {dede:field.litpic/}，织梦会自动处理相对路径。
3. 检查图片文件是否确实上传到了服务器的正确位置。

手机站和PC站的数据库是同一个吗？

是的，无论是双站方案还是响应式方案，它们都使用同一个数据库，只是根据设备类型调用不同的模板文件来展示数据而已。

双站方案对SEO有影响吗？？

有，如果处理不当，可能会导致内容重复，被搜索引擎判定为“重复内容”，影响排名。
如何优化：
- 添加 canonical 标签：在手机站的文章页 <head> 中，添加一个 canonical 标签，指向对应的PC端文章页，告诉搜索引擎这是同一内容的原始版本。
```
<link rel="canonical" href="http://你的域名/对应的PC端文章URL.html" />
```
- 使用响应式设计：响应式方案是解决SEO问题的最佳方式，因为它只有一个URL，一套内容。

如何让用户手动切换PC/手机端？

你可以在网站页面的某个角落（如页脚）添加一个切换链接。

PC端模板中添加：

<a href="javascript:void(0);" onclick="window.location.href='http://你的域名/?mobile=1'">切换到手机版</a>

手机端模板中添加：

<a href="javascript:void(0);" onclick="window.location.href='http://你的域名/'">切换到电脑版</a>

修改入口文件 index.php：为了支持这个切换，你需要修改根目录下的 index.php 文件，让它能识别 ?mobile=1 这个参数，这个修改稍微复杂一些，需要一定的PHP基础，就是在这个参数存在时，强制加载手机端模板。

特性	双站独立	响应式设计
实现原理	设备检测，跳转到独立模板	CSS媒体查询，一套模板自适应
用户体验	跳转有延迟，体验稍差	流畅无缝，体验极佳
维护成本	需要维护两套模板，成本高	只需维护一套模板，成本低
SEO友好度	较差，易产生重复内容	极佳，URL唯一
推荐度	适用于维护旧网站	强烈推荐，新建网站首选

对于新项目,强烈建议你直接采用方案二（响应式设计），如果你正在维护一个已经采用双站方案的旧网站，那么方案一是最稳妥的选择，希望这份详细的教程能帮助你顺利完成织梦手机站的搭建！

织梦手机端网站怎么做