织梦CMS模板如何快速转手机模板？-织梦建站-盈思创科技

核心原理：响应式设计 vs. 主题切换

在开始之前,你需要理解两种主流的移动端适配方案：

（图片来源网络，侵删）

响应式设计 - 推荐用于新项目或简单改版
- 原理：只创建一套模板，通过CSS媒体查询来针对不同屏幕尺寸（手机、平板、桌面）调整布局和样式。
- 优点：维护成本低，只有一套模板文件，内容完全同步。
- 缺点：所有设备的HTML结构都一样，对于老旧浏览器或复杂布局，CSS可能写得很复杂，影响加载性能（因为桌面端CSS也会被手机加载）。
- 适用场景：新建模板，或桌面模板本身结构比较简单。
主题切换 - 织梦官方推荐，用于已有复杂模板
- 原理：创建两套独立的模板文件（一个桌面主题 default，一个手机主题 mobile），织梦会根据用户访问的设备类型，自动选择并调用对应的模板来渲染页面。
- 优点：
  - 性能最优：手机用户只加载手机端的CSS和JS，文件体积小，加载速度快。
  - 布局自由：可以针对手机端设计完全不同的布局，比如隐藏侧边栏、调整文章列表样式等。
  - 兼容性好：不受桌面端CSS的束缚，可以更好地利用手机屏幕。
- 缺点：需要维护两套模板文件，工作量和文件存储空间都增加一倍。
- 适用场景：对现有成熟的桌面模板进行移动端适配，追求极致性能和体验。

本文将重点讲解织梦官方的“主题切换”方法，因为它最稳定、功能最完善。

准备工作：开启手机站点功能

在开始转换前,请确保你的织梦CMS后台已经开启了手机站点功能。

（图片来源网络，侵删）

登录织梦CMS后台。
进入 “系统” -> “系统基本参数”。
在左侧菜单选择 “核心设置”。
找到 “是否开启手机端” 选项，将其设置为 “是”。
保存设置。

转换步骤：创建并配置手机主题

我们开始一步步将你的桌面模板 default 转换为手机主题 mobile。

步骤 1：复制桌面模板，创建手机主题目录

在你的网站根目录下,找到模板文件夹 templets。
进入 templets，你会看到一个默认的桌面主题文件夹，通常是 default。
复制 default 文件夹，并将其重命名为 mobile。
- 你的目录结构现在应该是：/templets/default/ (桌面模板) 和 /templets/mobile/ (手机模板)。

步骤 2：修改手机模板中的全局文件

这是最关键的一步,你需要修改 mobile 主题下的几个核心文件，让它们能正确调用手机端的资源，并织梦的移动端标签。

修改 head.htm (或 header.htm)
- 打开 /templets/mobile/head.htm 文件。
- 引入移动端CSS和JS：将桌面版的CSS和JS路径替换为移动版的，将 css/style.css 改为 css/mobile_style.css（你需要自己创建这个文件）。
- 添加移动端专用JS：在底部引入织梦官方的移动端适配脚本 m.js，这个脚本非常重要，它用于处理图片自适应、字体大小调整等。
```

<script src="{dede:global.cfg_cmspath/}/static/js/pic_focus.js"></script>
<script type="text/javascript" src="{dede:global.cfg_mobileurl/}/m/js/mobile.js"></script>
```
  注意：{dede:global.cfg_mobileurl/} 是织梦获取手机站点的URL变量。
  （图片来源网络，侵删）
修改 index.htm (首页)
- 打开 /templets/mobile/index.htm。
- 调用移动端专属标签：织梦为移动端提供了一套独立的标签，它们通常以 mob_ 开头，或者参数不同。
  - 文章列表：将 {dede:arclist} 等标签替换为移动端专用标签，如 {dede:mobilearclist}，这个标签默认就是为手机端优化的，样式更紧凑。
```

{dede:arclist row='5' titlelen='20'}

{dede:mobilearclist row='5' titlelen='20'}
```
  - 栏目列表：同样使用 {dede:mobilechannel}。
  - 幻灯片/广告位：使用 {dede:myad} 标签时，确保后台添加的广告位是专门为手机端创建的，或者使用移动端专用的幻灯片标签。
- 简化布局：删除桌面端的复杂布局，如顶部通栏、侧边栏等，保留核心内容，如Logo、主导航、文章列表、页脚。
修改 article_article.htm (文章页) 和 list_article.htm (列表页)
- 文章页 (article_article.htm)：
  - 优化文章标题字体大小。
  - 调整文章内容区域的宽度和字体,使其适合手机阅读。
  - 简化文章顶部的“相关文章”、“顶踩”等功能，或将其移至文章底部。
  - 确保文章图片是响应式的（通常由 m.js 自动处理，但最好在CSS中也做设置 img { max-width: 100%; height: auto; }）。
- 列表页 (list_article.htm)：
  - 使用 {dede:mobilearclist} 来展示文章列表。
  - 设计适合手机浏览的列表项样式,比如大标题、小图、摘要等。

步骤 3：创建移动端专属的CSS文件

在 /templets/mobile/ 目录下新建一个CSS文件，css/mobile_style.css。
将桌面模板的 css/style.css 中的内容复制过来，作为基础。
重写和优化样式：
- 设置视口：在 head.htm 中确保有 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。
- 重置布局：将所有容器的宽度（如 width: 1200px;）改为 width: 100%;。
- 隐藏不必要元素：使用 display: none; 隐藏桌面端的侧边栏、顶部横幅等。
- 优化字体和间距：增大字体大小，增加行高和元素间距，提升可读性。
- 优化按钮和链接：确保按钮和链接有足够大的点击区域。

步骤 4：后台配置手机站点路径

回到织梦后台,进入 “系统” -> “系统基本参数” -> “核心设置”。
找到 “手机站点路径” 选项。
填写你的手机站URL,如果你将手机站放在 http://www.yourdomain.com/m/，这里就填写 /m/。
- 注意：你需要通过服务器配置（如Nginx或Apache的伪静态规则）将 /m/ 这个路径指向你的网站根目录，织梦官方提供了伪静态规则，你可以在后台 “系统” -> “手机站点” -> “手机版伪静态设置” 中找到并配置。

测试与发布

清空缓存：在后台的 “系统” -> “一键更新缓存” 中，清空所有缓存。
前台测试：
- 通过 “系统” -> “手机站点” -> “手机站点前台” 获取手机站的访问地址，直接在手机浏览器或PC浏览器的开发者工具（切换到手机模式）中访问。
- 检查首页、列表页、文章页是否显示正常，样式是否符合预期，链接是否正确。
设置跳转（可选）：
- 你可以设置当PC端用户用手机访问时,自动跳转到手机站，这个功能在后台 “系统” -> “手机站点” 中有详细配置选项。

进阶技巧与注意事项

使用 {dede:global.cfg_mobileurl/}：在所有需要引用手机站资源（如图片、CSS、JS链接）的地方，尽量使用这个全局变量，以确保路径正确。
图片压缩：手机端流量宝贵，务必对图片进行压缩，可以使用织梦自带的缩略图功能，或者使用WebP等现代图片格式。
简化JS：移除不必要的桌面端JavaScript效果，减少JS文件体积，加快加载速度。
内容同步：主题切换方案下，PC端和手机端的内容是同步的，你在后台发布的文章，会同时在两个主题的模板中显示，你只需要控制好它们的显示样式即可。
：如果你想在手机端显示完全不同的内容（比如不同的推荐位），你需要手动在后台进行内容管理，或者通过二次开发来实现内容分离，这超出了模板转换的范畴。

通过以上步骤,你就可以成功地将织梦CMS的桌面模板转换为一个功能完善、体验流畅的手机模板了，这个过程虽然需要一些耐心，但遵循官方规范，能确保稳定性和兼容性。