dede手机网站怎么做？-DEDE建站-盈思创科技

核心思路

无论哪种方法,核心思路都是 ，两套模板”，也就是说，后台的内容只录入一次，但前台会根据用户访问的设备（电脑或手机）自动调用不同的模板文件来展示。

（图片来源网络，侵删）

使用 DedeCMS 自带的移动端功能（推荐，最简单）

这是 DedeCMS 从 V5.7 版本开始内置的功能，官方称之为“手机门户”，它通过检测 m 域名或 URL 参数来切换模板，是目前最稳定、最官方的解决方案。

优点：

官方支持：功能稳定，与系统耦合度高，升级后不易出错。
操作简单：后台有专门的管理入口，配置直观。
内容同步可以轻松同步到电脑站和手机站。

缺点：

独立域名：通常需要为手机站准备一个独立的二级域名（如 m.yourdomain.com）。
非响应式：电脑站和手机站是两套完全独立的模板，需要分别维护。

详细步骤（方法一）

第一步：准备工作

服务器环境：确保你的服务器支持虚拟主机或可以绑定子域名。
域名解析：在你的域名解析服务商（如阿里云、腾讯云）处，为你的主域名（yourdomain.com）添加一个 CNAME 或 A 记录，指向你的 m 子域名，将 m.yourdomain.com 解析到你的服务器IP。
网站根目录：确保你的 DedeCMS 程序安装在网站根目录（如 /public_html）。

第二步：后台配置

登录 DedeCMS 后台：进入 系统 -> 系统基本参数。
开启手机站：
- 在左侧菜单找到 核心设置。
- 找到 是否启用手机门户 选项，将其设置为 是。
- 重要：在 手机门户域名 这一项中，填入你刚刚解析好的子域名，m.yourdomain.com。
- 点击 确定 保存。
创建手机模板目录：
（图片来源网络，侵删）
- 通过 FTP 或文件管理器，进入你的模板目录 /templets/。
- 在该目录下新建一个文件夹,命名为 default（如果已有，则直接使用）。
- 在 /templets/default/ 目录下，再新建一个文件夹，命名为 m，这个 m 文件夹就是专门存放手机站模板的地方。

第三步：制作和上传手机模板

准备手机模板：
- 你可以自己制作一套适合手机屏幕的 HTML 模板（注意使用 viewport 标签，<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">）。
- 也可以在网上寻找 DedeCMS 的手机模板资源。
- 模板中的标签（如 {dede:arclist}、{dede:field.title} 等）和电脑站模板的用法完全一样。
上传模板文件：
- 将你制作好的手机站模板文件（如 index.htm、list_article.htm、article_article.htm 等）上传到 /templets/default/m/ 目录下。
- 文件命名规则：手机站的模板文件名必须和电脑站的模板文件名保持一致，电脑站首页是 /templets/default/index.htm，那么手机站首页就必须是 /templets/default/m/index.htm。

第四步：设置栏目和首页

设置栏目默认模板：
- 进入 频道管理 -> 栏目管理。
- 选择一个栏目,点击 修改。
- 在栏目修改页面,找到 栏目列表模板 和 页模板。
- 分别选择对应的手机模板文件（选择 /templets/default/m/list_article.htm 和 /templets/default/m/article_article.htm）。
- 对所有需要显示在手机站的栏目重复此操作。
设置手机站首页：
（图片来源网络，侵删）
- 进入 主页管理 -> 默认主页管理。
- 在 手机网站主页 的输入框中，输入你的手机站首页模板路径，default/m/index.htm。
- 点击 确定。

第五步：访问测试

你可以通过以下两种方式访问你的手机站了：

通过子域名访问：在手机浏览器或电脑浏览器中输入 http://m.yourdomain.com，应该会显示你刚刚设置的手机站首页。
通过 URL 参数访问：在电脑浏览器中输入 http://yourdomain.com/?m=1，也可以强制切换到手机版模板，这个参数在开发调试时非常有用。

使用响应式模板（现代、灵活）

这种方法不依赖子域名,而是通过 CSS 和 JavaScript 技术，让同一套模板在不同尺寸的设备上自动调整布局，这是目前网站开发的主流趋势。

优点：

一套模板：只需制作和维护一套模板，降低了工作量和出错率。
无需子域名：用户访问同一个域名，系统自动适配。
用户体验好：URL 保持不变，便于分享和收藏。

缺点：

对前端要求高：需要制作或修改一套响应式模板，对 CSS（特别是媒体查询 Media Queries）和 JavaScript 知识有一定要求。
加载性能：同一套模板可能包含大量 PC 端不需要的资源（如大图片），需要额外优化。

详细步骤（方法二）

第一步：准备响应式模板

选择或制作响应式模板：
- 你可以从网上下载现成的响应式 DedeCMS 模板。
- 或者,如果你懂前端，可以自己修改你的电脑站模板，使其变为响应式。
关键代码：
- Viewport 设置：在 <head> 标签内加入 <meta name="viewport" content="width=device-width, initial-scale=1.0">，这是实现响应式的前提。
- 媒体查询：在 CSS 文件中使用 @media 查询，为不同屏幕尺寸（如 max-width: 768px）编写不同的样式，以控制布局、字体大小、图片显示等。

第二步：优化内容展示

响应式设计的核心是内容的灵活展示,在 DedeCMS 中，可以通过以下方式实现：

图片自适应：

使用 CSS 设置 img { max-width: 100%; height: auto; }，确保图片不会溢出容器。

高级用法（推荐）：使用 DedeCMS 的图片自动缩略图功能，在手机端调用小图，在 PC 端调用大图，以节省流量。

{dede:field.body runphp='yes'}
// 在内容页调用文章中的第一张图作为缩略图
$str = @me;
$count = preg_match_all('/<img\s+.*?src\s*=\s*[\"|\']?(.*?)[\"|\']?\s*.*?>/i', $str, $matches);
if($count>0){
    @me = $matches[1][0];
}else{
    @me = '/images/defaultpic.gif'; // 如果没有图，显示默认图
}
{/dede:field.body}

调用：
- 通常不需要修改 DedeCMS 的标签，因为它们输出的只是 HTML 结构，最终的样式由 CSS 控制。
- 但你可以使用 dede:arclist 的 pagesize 等属性，在手机端调用更少的文章数量。

第三步：可选：添加移动设备识别跳转（非必须）

如果你想让用户在手机上访问 PC 站 URL 时，自动跳转到响应式模板的某个特定视图（比如隐藏某些板块），可以加入一段 JavaScript 代码。

<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) {
        // 如果是移动设备，可以在这里执行一些操作，比如给 body 添加一个类名
        document.body.className += ' mobile-view';
    }
}
browserRedirect();
</script>

然后在你的 CSS 中，就可以针对 .mobile-view 这个类来写手机端专属的样式了。

总结与对比

特性	方法一 (官方手机门户)	方法二 (响应式模板)
实现原理	通过子域名或 `?m=1` 参数切换模板	通过 CSS 媒体查询自适应布局
维护成本	较高，需维护两套模板	较低，只需维护一套模板
域名使用	需要独立的 `m.` 子域名	无需，使用同一个域名
技术门槛	低，纯后台配置	中等，需要前端 CSS 知识
用户体验	URL 不一致，但内容加载针对性更强	URL 统一，体验流畅，但需注意性能优化
推荐场景	对 SEO 要求高，内容需要完全不同展示的老网站	新建网站或希望技术架构现代化的网站

给你的建议：

如果你是新手，或者网站已经比较稳定，不希望大改：强烈推荐使用方法一（官方手机门户），它最省心，最稳定，不容易出问题。
如果你是开发者，或者正在建设一个新网站，希望一步到位：选择方法二（响应式模板），这是未来的趋势，虽然前期投入稍大，但长期来看更灵活、更易于维护。

希望这份详细的指南能帮助你成功搭建 DedeCMS 手机网站！

dede手机网站怎么做？