dede手机网站教程，新手如何快速搭建？-建站教程-锦华智联科技

DedeCMS 手机网站搭建完整教程

Dedecms 本身是一个强大的 PC 端内容管理系统，要让它完美支持移动端，主要有三种主流方案：

（图片来源网络，侵删）

跳转适配 (最简单)：PC 端和移动端是两套独立的网站，通过检测用户设备，自动跳转到对应的手机网站域名。
代码适配 (推荐)：PC 端和移动端共用同一套后台和数据库，通过一套代码，使用响应式设计或专门的移动端模板，根据设备自动显示不同的样式。
独立移动模板 (较旧但稳定)：在 Dedecms 中创建一套独立的移动端模板文件，通过特定标签调用，实现移动端显示。

对于新手和大多数网站来说,方案二（代码适配） 是最推荐的选择，因为它维护方便，体验好，本教程将重点讲解 方案二，并简要介绍 方案一 作为备选。

跳转适配 (独立域名)

这种方案最简单,快速，适合 PC 端网站已经非常稳定，不想改动现有代码的情况。

优点

实现简单：只需修改一个文件，添加几行代码。
互不影响：PC 端和移动端代码完全分离，修改一方不会影响另一方。
利于 SEO：可以为移动端网站单独设置 m.example.com 的站点，便于搜索引擎索引。

缺点

维护成本高：两套网站需要分别维护内容更新。
内容同步麻烦：需要在后台同时发布到 PC 和移动端。

操作步骤

准备移动端网站
- 你需要另外准备一套手机网站程序和模板,或者使用现成的移动端模板（如 DedeMobile 等），这套程序运行在另一个子域名下，m.yourdomain.com。

修改 PC 端模板文件

（图片来源网络，侵删）

登录你的 Dedecms 后台。
进入 “模板” -> “默认模板管理”。
找到并编辑你的 head.htm 文件（这个文件通常是所有页面的头部公共模板）。
在 <head> 和 </head> 标签之间，添加以下 JavaScript 代码：

<script type="text/javascript">
// 检测是否为移动设备
function isMobile() {
    return (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|BlackBerry|Windows Phone|Opera Mini|IEMobile)/i));
}
// 如果是移动设备，且当前不是在移动域名下，则跳转
if (isMobile()) {
    // 将 'm.yourdomain.com' 替换成你自己的手机网站域名
    window.location.href = "http://m.yourdomain.com" + window.location.pathname + window.location.search;
}
</script>

完成
- 保存 head.htm 文件。
- 当用户用手机访问 www.yourdomain.com 时，会自动跳转到 m.yourdomain.com。

代码适配 (共用一套代码)

这是目前最主流、最推荐的方案，我们通过 响应式设计 来实现一套代码适配所有设备。

优点

维护成本低：只需维护一套后台和一套代码，内容发布一次即可全站显示。
体验好：URL 保持一致，用户不会感到跳转的割裂感。
SEO 友好：Google 等搜索引擎非常推荐这种响应式设计。

缺点

前端要求稍高：需要一些 CSS 和 HTML 的基础知识来修改模板。

操作步骤

第一步：选择并启用响应式模板

寻找模板：在 Dedecms 官方模板市场或第三方模板网站购买/下载一套 “响应式” 网站模板，这是最关键的一步，普通的模板无法实现响应式效果，模板通常会带有 style.css 文件，并包含类似 @media 这样的查询代码。
上传模板：将下载的模板文件解压，通过 FTP 上传到你的网站服务器的 /templets/default/ 目录下（或者你自定义的模板目录）。
后台设置：
- 登录 Dedecms 后台。
- 进入 “模板” -> “默认模板管理”。
- 在模板列表中,找到你刚刚上传的响应式模板文件夹。
- 点击 “设为默认” 按钮，将这套模板设置为整个网站的默认模板。

第二步：核心标签适配

（图片来源网络，侵删）

响应式模板的核心在于其 CSS，但 Dedecms 的标签也需要做一些调整，以确保在移动端能正确调用内容。

*列表页 (`list_.htm`)**
- 响应式模板通常通过 CSS 控制列表的列数，PC 端显示 4 列，平板 2 列，手机 1 列。
- 你需要确保你的列表调用标签 [field:array] 或 [arclist] 中的图片尺寸是固定的，或者使用 img-responsive 这样的 CSS 类来让图片自适应。
- 检查你的模板文件,找到类似 <img src="[field:litpic/]" ...> 的代码，修改为：
```
<img src="[field:litpic/]" alt="[field:title/]" class="img-responsive">
```
  img-responsive 是 Bootstrap 框架中的常用类，如果你的模板不是基于 Bootstrap，可以查找模板文档中对应的自适应图片类，通常是 max-width: 100%; height: auto;。
*页 (`article_.htm`)**
- 图片自适应：和列表页一样，文章内容中的图片也需要自适应，找到文章内容主体，通常是 [field:body/]，如果模板没有做处理，你可以在它外面加一个 div 并设置样式：
```
<div class="article-content">
    [field:body/]
</div>
```
  然后在 CSS 文件中添加：
```
.article-content img {
    max-width: 100%;
    height: auto;
}
```
- 字体大小：可以通过 CSS 的 rem 或 em 单位来设置字体，这样可以根据根元素大小进行缩放，提升移动端阅读体验。

第三步：添加 viewport 元标签

这是移动端适配的灵魂，它告诉浏览器如何控制页面的尺寸和缩放。

进入 “模板” -> “默认模板管理”。
编辑你的 head.htm 文件。
在 <head> 标签内，添加以下 meta 标签：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```
- width=device-width：设置视口的宽度为设备的屏幕宽度。
- initial-scale=1.0：设置初始缩放比例为 1.0。
- maximum-scale=1.0：设置最大缩放比例为 1.0，防止用户手动放大。
- user-scalable=0：禁止用户缩放（iOS 10 后此属性可能无效，但 maximum-scale 仍能限制）。

第四步：测试与优化

浏览器开发者工具：
- 在 Chrome 或 Firefox 浏览器中打开你的网站。
- 按 F12 打开开发者工具。
- 点击工具栏上的 设备切换图标（一个手机或平板的图标）。
- 你可以选择不同的设备型号（如 iPhone, Android 手机）来实时预览和调试你的网站，这是最快捷的测试方式。
真机测试：
- 使用自己的手机或平板,通过 Wi-Fi 访问你电脑上的本地网站（需要局域网 IP）或已经上传到服务器的网站。
- 检查文字是否清晰、图片是否完整、按钮是否易于点击、链接是否能正常跳转。

独立移动模板 (Dedecms 自带功能)

如果你的模板非常老旧,不想更换，但又想快速支持移动端，可以使用 Dedecms 自带的“手机模板”功能。

操作步骤

准备模板：在 /templets/ 目录下新建一个文件夹，mobile，然后将你 PC 端的模板文件复制到 mobile 文件夹中，并进行修改，使其适合手机屏幕（通常叫 index_m.htm, list_m.htm, article_m.htm 等）。
后台设置：
- 登录 Dedecms 后台。
- 进入 “系统” -> “系统基本参数” -> “核心设置”。
- 找到 “手机版模板目录” 这个选项，将其值设置为你的移动端模板文件夹名，mobile。
- 保存。
设置默认：
- 进入 “模板” -> “手机模板设置”。
- 你会看到首页、列表页、文章页等选项，分别在下拉菜单中选择你 mobile 文件夹中对应的移动端模板文件。
- 保存。
工作原理：
- 当用户用手机访问网站时,Dedecms 会自动检测，并调用 mobile 文件夹下的模板来渲染页面。
- 缺点：PC 端和移动端模板是两套文件，修改时需要同步更新，容易出错。

总结与建议

方案	优点	缺点	推荐人群
跳转适配	实现简单，互不影响	维护成本高，内容同步麻烦	快速上线，PC 端已稳定，不想改代码的用户
代码适配	维护成本低，体验好，SEO 优	需要响应式模板，前端知识要求稍高	绝大多数用户，强烈推荐
独立移动模板	利用旧模板，功能内置	两套模板，维护麻烦，体验可能不一致	使用非常老旧 Dedecms 版本，且不想更换模板的用户

给你的最终建议：

首选方案二（代码适配）：花点时间购买一套优质的响应式模板，这是对网站未来最好的投资。
如果图省事，用方案一（跳转适配）：先让网站能用上移动端，等以后有时间再考虑升级到方案二。
测试！测试！再测试！：无论选择哪种方案，在多个设备和浏览器上充分测试是必不可少的步骤。

希望这份详细的教程能帮助你成功搭建起 Dedecms 的手机网站！如果在操作中遇到具体问题，可以随时提问。