织梦手机模板制作步骤有哪些？-织梦建站-盈思创科技

核心概念：织梦手机模板的原理

在开始之前,你需要理解织梦手机模板的工作原理：

模板文件：手机模板的文件结构和PC模板类似，都存放在 /templets/ 目录下，通常会有一个专门的文件夹，mobile/。
模板标签：手机模板使用和PC模板几乎一样的织梦标签（{dede:}）来获取数据，如文章列表、文章内容等。
模板识别：织梦通过一个核心文件 /include/dedeconfig.php 中的 $cfg_mobileurl 变量来设置你的手机网站域名，当用户通过手机访问这个域名时，织梦系统就会自动加载 /templets/mobile/ 目录下的模板文件。
响应式设计 vs 独立模板：
- 独立模板（本教程重点）：为手机创建一套完全独立的模板文件，优点是针对性强，可以极致优化手机端的用户体验；缺点是维护两套模板比较麻烦。
- 响应式模板：制作一套PC模板，通过CSS媒体查询（Media Queries）让页面在不同尺寸的设备上（PC、平板、手机）有不同的显示样式，优点是一套代码多端适配；缺点是代码可能臃肿，且难以进行深度的手机端功能定制。

我们将重点讲解独立模板的制作方法。

【推荐方法】从PC模板修改（最常用、最快捷）

对于大多数人来说,最快的方法就是基于你现有的PC模板进行修改，这种方法可以保留你网站的布局和设计风格，只针对手机端进行优化。

第一步：准备工作

环境准备：确保你的本地或服务器上已经安装了织梦CMS（DedeCMS）。
PC模板：确保你的PC端模板已经制作完成并可以正常使用。
工具准备：
- 代码编辑器：如 VS Code、Sublime Text、Dreamweaver 等。
- 浏览器开发者工具：这是最重要的工具！按 F12 可以打开，它有一个“设备模拟”功能，可以让你在电脑上预览手机端的效果，非常方便。
- FTP工具：如 FileZilla，用于上传下载文件。

第二步：创建手机模板目录和文件

在织梦的 /templets/ 目录下，新建一个文件夹，命名为 mobile。
将你PC模板文件夹（/templets/default/）中的所有文件复制一份到 /templets/mobile/ 目录中。
重要：为了保持清晰，建议在 /templets/mobile/ 内再创建一个子文件夹，用你的模板名命名，/templets/mobile/my_site/，然后把刚才复制的所有文件移动到这个子文件夹里，这样结构就是 /templets/mobile/my_site/。

第三步：修改织梦配置以启用手机模板

登录你的织梦后台。
进入 【系统】-> 【系统基本参数】。
在“站点设置”选项卡中，找到 “手机版网址” 这一栏。
填写你的手机网站域名,如果你的PC站是 www.example.com，手机站可以设置为 m.example.com。（注意：这个域名需要提前解析到你的服务器上）。
点击“保存”。

当你访问 m.example.com 时，织梦就会尝试加载 /templets/mobile/ 下的模板，如果找不到，就会默认使用PC模板。

第四步：核心修改 - 手机模板文件

你需要修改 /templets/mobile/my_site/ 目录下的文件，让它们适配手机。

修改 index.html (首页)
- 设置移动端视口：在 <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">
```
- 简化布局：删除PC端首页中不必要的复杂布局，如侧边栏、复杂的广告位等，保留核心内容，如顶部导航、轮播图、文章列表、底部导航。
- 优化CSS：
  - 将所有CSS样式中的固定宽度（如 width: 960px;）改为百分比宽度（如 width: 100%;）或使用 max-width 限制最大宽度。
  - 使用 box-sizing: border-box; 可以让 padding 和 border 不会增加元素的宽度，方便布局。
  - 字体大小使用 rem 或 em 单位，而不是 px，这样用户可以在手机上通过缩放来调整字体大小。
- 优化图片：
  - 轮播图和列表图尺寸要适合手机屏幕（640x300 像素）。
  - 使用织梦的图片缩略图标签时,可以指定手机端尺寸，[field:picname function='GetImgName(@me, 300, 200)'/]。
- 优化交互：
  - 顶部和底部增加固定导航栏，方便用户随时切换栏目和返回首页。
  - 按钮和链接的点击区域要足够大,方便手指操作。
*修改 `list_article.html` (列表页)**
- 列表页的修改思路和首页类似,主要是简化布局，优化文章列表的显示。
- 可以考虑使用更紧凑的列表样式,或者使用带图片的“九宫格”布局。
- 分页导航要简化,可以使用更简洁的上一页/下一页样式，或者更现代的无限滚动加载（这个需要JS实现）。
*修改 `article_article.html` (文章内容页)**
- 字体和行间距：手机端阅读，字体不能太小，行间距和段间距要适当加大，提升阅读体验。
- 文章图片：文章中的图片宽度最好设置为100%，并设置 max-width: 100%; height: auto;，防止图片撑破屏幕。
- 分享和评论：将分享按钮和评论框放在更显眼的位置。
- 相关文章/推荐阅读：简化这部分模块，用列表形式展示即可。

第五步：使用织梦的“手机模板”功能（高级技巧）

织梦后台自带了一个“手机模板”功能，可以让你更精细地控制。

进入后台 【模板】-> 【手机模板】**。
你可以为每个栏目单独指定手机模板,你可以为“新闻”栏目设置一个手机列表模板，为“产品”栏目设置另一个手机列表模板。
这需要你在制作模板文件时,为不同栏目命名不同的文件，如 list_news_mobile.html, list_product_mobile.html 等，然后在这里进行绑定。

【传统方法】从零开始制作

如果你不想基于PC模板修改,想完全自己设计一套手机模板，流程如下：

设计稿：首先使用 Figma、Sketch 或 Photoshop 等工具设计出手机端的UI界面，包括首页、列表页、详情页等。
HTML/CSS 编写：根据设计稿，从零开始编写HTML结构和CSS样式，这一步要完全遵循移动端开发的最佳实践（视口、响应式单位、流式布局等）。
整合织梦标签：将编写好的静态HTML文件中的内容部分，替换成织梦的模板标签。
- 首页：替换轮播图、文章列表、友情链接等。
  - 轮播图：{dede:arclist row='5' type='image.'} 配合JS实现。
  - 文章列表：{dede:arclist typeid='' titlelen='40' row='10'}
- 列表页：核心是 {dede:list pagesize='10'} 循环。
- 详情页：核心是 {dede:field.body/} 显示文章内容，以及 {dede:field.title/}、{dede:field.pubdate function="MyDate('Y-m-d',@me)"/} 等字段。
文件命名和放置：将制作好的模板文件（如 index.html, list_article.html, article_article.html）上传到 /templets/mobile/ (或你自定义的子文件夹) 中。
后台配置：和【推荐方法】的第三步一样，在后台设置“手机版网址”。

总结与最佳实践

先预览，再修改：充分利用浏览器开发者工具的设备模拟功能，可以实时看到修改效果，极大提高效率。
移动优先：如果条件允许，可以考虑“移动优先”的开发策略，即先设计和开发手机端模板，然后再基于它扩展PC端模板，这在现代前端开发中越来越流行。
性能优化：手机网络环境复杂，务必对模板进行性能优化。
- 压缩CSS和JS：使用工具去除代码中的空格和换行，减小文件体积。
- 图片优化：使用合适的图片格式（如WebP），并压缩图片大小。
- 减少HTTP请求：尽量合并CSS和JS文件。
测试，测试，再测试：在不同品牌、不同系统（iOS/Android）、不同分辨率的手机上进行实际测试，确保兼容性和用户体验。

制作织梦手机模板是一个实践性很强的工作,多动手尝试，你会发现其中的规律和乐趣，祝你成功！