第一步：环境准备与目录规划
在开始之前，确保你已经安装好了织梦DedeCMS程序,并且PC站已经可以正常运行。
创建移动站目录
为了不与PC站文件冲突，我们需要在网站根目录下创建一个专门存放移动站文件的文件夹，通常命名为 m 或 mobile。
如果你的网站根目录是 E:\wwwroot\mywebsite，那么你就在它里面创建一个 m 文件夹。
路径：E:\wwwroot\mywebsite\m
配织梦系统目录参数
登录织梦后台，进入【系统】->【系统基本参数】->【核心设置】,找到以下两项并进行修改：
- 是否开启多站点支持：
是 - 移动站点是否开启：
是 - 手机访问自动跳转：
是(这个选项非常重要，它会在PC端用户用手机访问时,自动跳转到移动站域名) - 移动端域名： 填写你为移动站准备的域名，
http://m.yourdomain.com，如果你还没有独立域名，可以先填写/m。
设置完成后，点击【保存】。
第二步：制作移动端首页 (index.html)
移动端的首页通常是从PC端首页简化而来的，我们需要复制PC端的首页文件,然后在移动端目录中进行修改。
复制并重命名文件
- 找到PC站模板目录下的
index.html文件（通常在/templets/default/目录下）。 - 将它复制到我们刚才创建的移动站目录中：
/m/templets/default/。 - 重要： 为了让织梦系统识别，你需要将这个文件重命名为
index_m.html,织梦会自动寻找这个文件作为移动端的首页。
修改 index_m.html
打开 /m/templets/default/index_m.html 文件,进行以下修改：
-
修改CSS和JS路径： 所有CSS和JS文件的路径都需要指向移动站目录。
- 错误示范：
<link href="{dede:global.cfg_templets_skin/}/style.css" rel="stylesheet">
- 正确示范：
<link href="/m/templets/default/style_m.css" rel="stylesheet">
- 建议： 创建一个专门的移动端CSS文件（如
style_m.css）和JS文件（如 main_m.js），并将所有样式和脚本移入其中,保持文件结构清晰。
-
简化HTML结构：
- 移除PC端复杂的布局、广告位、冗余的栏目等。
- 保留核心内容，如：Logo、主导航、焦点轮播图、重要文章列表、页脚等。
- 使用更简洁的HTML标签。
-
响应式布局（推荐）：
移动端模板的核心是响应式，最简单的方式是在HTML的<head>标签中加入viewport元标签，并使用相对单位（如）和媒体查询（@media）。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{dede:global.cfg_webname/}</title>
<!-- 引入移动端CSS -->
<link href="/m/templets/default/style_m.css" rel="stylesheet">
</head>
在 style_m.css 中，可以设置基础样式,并针对不同屏幕尺寸进行调整。
第三步：制作列表页和内容页
首页做好了，接下来是列表页和内容页,方法与首页类似。
列表页 (list_*.html)
- 复制文件： 从PC站模板目录复制
list_article.htm（或其他列表模板）到 /m/templets/default/ 目录。
- 重命名文件： 将其重命名为
list_m.htm,织梦会自动使用这个作为移动端的列表页模板。
- 修改CSS和JS路径。
- 简化模板代码，只保留文章列表、分页等核心元素。
- 调整文章列表的样式,使其更适合手机屏幕阅读。
内容页 (article_*.html)
- 复制文件： 从PC站模板目录复制
article_article.htm（或其他内容模板）到 /m/templets/default/ 目录。
- 重命名文件： 将其重命名为
article_m.htm,织梦会自动使用这个作为移动端的内容页模板。
- 修改CSS和JS路径。
- 简化文章内容页的布局，移除侧边栏、相关文章列表等非核心模块（或将其简化）。
- 优化文章正文的显示，字体大小、行间距要适合阅读。
- 保留文章标题、发布时间、来源、正文、上下页导航、点赞/分享等功能。
第四步：织梦标签的适配
织梦的模板引擎非常强大，大部分标签在移动端是通用的，但为了更好的控制和性能，我们可以使用 {dede:global.ismobile/} 这个全局变量来判断当前是否为移动端,从而实现模板的差异化调用。
判断是否为移动端
你可以在模板中使用 if 语句来判断。
{dede:global.ismobile runphp='yes'}
@me = 'ismobile';
{/dede:global.ismobile}
{if @me == 'ismobile'}
<!-- 这里是移动端显示的内容 -->
<p>您正在访问移动站</p>
{else}
<!-- 这里是PC端显示的内容 -->
<p>您正在访问PC站</p>
{/if}
调用移动端专属栏目
如果你在后台为移动端创建了专门的栏目,可以在调用时指定。
{dede:channel type='top' row='8'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
这个标签会调用顶级栏目，无论PC还是移动端，如果你的移动站栏目和PC站不同,建议在后台移动站设置里指定好移动端的栏目ID。
调用文章列表
文章列表标签基本通用,但可以调整样式。
{dede:arclist titlelen='30' row='10'}
<div class="news-item">
<a href="[field:arcurl/]">[field:title/]</a>
<span class="date">[field:pubdate function="MyDate('m-d', @me)"/]</span>
</div>
{/dede:arclist}
第五步：配置移动域名与跳转
这是最后一步,也是让移动站生效的关键。
服务器配置（以Nginx为例）
你需要为移动站域名（如 m.yourdomain.com）配置一个虚拟主机，并将所有请求指向 /m 目录。
打开你的Nginx配置文件（如 nginx.conf 或站点配置文件）,添加如下配置：
server {
listen 80;
server_name m.yourdomain.com; # 你的移动站域名
# 将所有请求指向网站的 /m 目录
root /usr/share/nginx/html/mywebsite; # 你的网站根目录
index index.html index.php;
location / {
try_files $uri $uri/ /m/index.php?$query_string;
}
# 如果你的网站支持PHP，需要配置PHP解析
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
注意： root 指的是你的网站根目录，而不是 /m 目录。try_files 指令会确保所有请求都在 /m 目录下查找文件。
绑定域名
在你的域名解析服务商（如阿里云、腾讯云）那里，为 m.yourdomain.com 添加一个 A 记录,指向你的服务器IP地址。
清理缓存
- 清理浏览器缓存。
- 清理织梦后台的【系统】->【一键更新缓存】。
- 如果使用了CDN或服务器缓存,一并清理。
当你用手机访问 http://m.yourdomain.com 时，应该就能看到你制作好的移动站了，而用手机访问 http://www.yourdomain.com 时,系统也会自动跳转到移动站域名。
总结与最佳实践
- 从简到繁： 先从首页做起，确保跳转和基础样式正常,再逐步完善列表页和内容页。
- 移动优先： 在设计时，首先考虑移动端的用户体验，而不是把PC端“压缩”成移动端。
- 性能优化： 移动端网络环境复杂，图片要压缩，CSS和JS要尽量合并和压缩,减少HTTP请求。
- 测试： 多用不同型号的手机（iOS和Android）进行测试，确保兼容性,也可以使用浏览器的开发者工具模拟手机进行调试。
- 内容同步： 织梦默认会同步PC和移动端的内容，你只需要在后台发布文章时，勾选“是否生成移动端”即可。
遵循以上步骤，你就可以成功制作出一个属于自己的织梦移动站模板了,祝你顺利！
打开 /m/templets/default/index_m.html 文件,进行以下修改：
-
修改CSS和JS路径： 所有CSS和JS文件的路径都需要指向移动站目录。
- 错误示范：
<link href="{dede:global.cfg_templets_skin/}/style.css" rel="stylesheet"> - 正确示范：
<link href="/m/templets/default/style_m.css" rel="stylesheet"> - 建议： 创建一个专门的移动端CSS文件（如
style_m.css）和JS文件（如main_m.js），并将所有样式和脚本移入其中,保持文件结构清晰。
- 错误示范：
-
简化HTML结构：
- 移除PC端复杂的布局、广告位、冗余的栏目等。
- 保留核心内容，如：Logo、主导航、焦点轮播图、重要文章列表、页脚等。
- 使用更简洁的HTML标签。
-
响应式布局（推荐）： 移动端模板的核心是响应式，最简单的方式是在HTML的
<head>标签中加入viewport元标签，并使用相对单位（如）和媒体查询（@media）。<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>{dede:global.cfg_webname/}</title> <!-- 引入移动端CSS --> <link href="/m/templets/default/style_m.css" rel="stylesheet"> </head>在
style_m.css中，可以设置基础样式,并针对不同屏幕尺寸进行调整。
第三步：制作列表页和内容页
首页做好了，接下来是列表页和内容页,方法与首页类似。
列表页 (list_*.html)
- 复制文件： 从PC站模板目录复制
list_article.htm（或其他列表模板）到/m/templets/default/目录。 - 重命名文件： 将其重命名为
list_m.htm,织梦会自动使用这个作为移动端的列表页模板。 - 修改CSS和JS路径。
- 简化模板代码，只保留文章列表、分页等核心元素。
- 调整文章列表的样式,使其更适合手机屏幕阅读。
内容页 (article_*.html)
- 复制文件： 从PC站模板目录复制
article_article.htm（或其他内容模板）到/m/templets/default/目录。 - 重命名文件： 将其重命名为
article_m.htm,织梦会自动使用这个作为移动端的内容页模板。 - 修改CSS和JS路径。
- 简化文章内容页的布局，移除侧边栏、相关文章列表等非核心模块（或将其简化）。
- 优化文章正文的显示，字体大小、行间距要适合阅读。
- 保留文章标题、发布时间、来源、正文、上下页导航、点赞/分享等功能。
第四步：织梦标签的适配
织梦的模板引擎非常强大，大部分标签在移动端是通用的，但为了更好的控制和性能，我们可以使用 {dede:global.ismobile/} 这个全局变量来判断当前是否为移动端,从而实现模板的差异化调用。
判断是否为移动端
你可以在模板中使用 if 语句来判断。
{dede:global.ismobile runphp='yes'}
@me = 'ismobile';
{/dede:global.ismobile}
{if @me == 'ismobile'}
<!-- 这里是移动端显示的内容 -->
<p>您正在访问移动站</p>
{else}
<!-- 这里是PC端显示的内容 -->
<p>您正在访问PC站</p>
{/if}
调用移动端专属栏目
如果你在后台为移动端创建了专门的栏目,可以在调用时指定。
{dede:channel type='top' row='8'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
这个标签会调用顶级栏目，无论PC还是移动端，如果你的移动站栏目和PC站不同,建议在后台移动站设置里指定好移动端的栏目ID。
调用文章列表
文章列表标签基本通用,但可以调整样式。
{dede:arclist titlelen='30' row='10'}
<div class="news-item">
<a href="[field:arcurl/]">[field:title/]</a>
<span class="date">[field:pubdate function="MyDate('m-d', @me)"/]</span>
</div>
{/dede:arclist}
第五步：配置移动域名与跳转
这是最后一步,也是让移动站生效的关键。
服务器配置（以Nginx为例）
你需要为移动站域名（如 m.yourdomain.com）配置一个虚拟主机，并将所有请求指向 /m 目录。
打开你的Nginx配置文件（如 nginx.conf 或站点配置文件）,添加如下配置：
server {
listen 80;
server_name m.yourdomain.com; # 你的移动站域名
# 将所有请求指向网站的 /m 目录
root /usr/share/nginx/html/mywebsite; # 你的网站根目录
index index.html index.php;
location / {
try_files $uri $uri/ /m/index.php?$query_string;
}
# 如果你的网站支持PHP，需要配置PHP解析
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
注意： root 指的是你的网站根目录，而不是 /m 目录。try_files 指令会确保所有请求都在 /m 目录下查找文件。
绑定域名
在你的域名解析服务商（如阿里云、腾讯云）那里，为 m.yourdomain.com 添加一个 A 记录,指向你的服务器IP地址。
清理缓存
- 清理浏览器缓存。
- 清理织梦后台的【系统】->【一键更新缓存】。
- 如果使用了CDN或服务器缓存,一并清理。
当你用手机访问 http://m.yourdomain.com 时，应该就能看到你制作好的移动站了，而用手机访问 http://www.yourdomain.com 时,系统也会自动跳转到移动站域名。
总结与最佳实践
- 从简到繁： 先从首页做起，确保跳转和基础样式正常,再逐步完善列表页和内容页。
- 移动优先： 在设计时，首先考虑移动端的用户体验，而不是把PC端“压缩”成移动端。
- 性能优化： 移动端网络环境复杂，图片要压缩，CSS和JS要尽量合并和压缩,减少HTTP请求。
- 测试： 多用不同型号的手机（iOS和Android）进行测试，确保兼容性,也可以使用浏览器的开发者工具模拟手机进行调试。
- 内容同步： 织梦默认会同步PC和移动端的内容，你只需要在后台发布文章时，勾选“是否生成移动端”即可。
遵循以上步骤，你就可以成功制作出一个属于自己的织梦移动站模板了,祝你顺利！
