dede手机网站教程

DedeCMS 手机网站搭建完整教程

本教程主要介绍两种主流方式：

1. 响应式模板（推荐）：一套模板，同时适应电脑和手机，通过 CSS 控制不同屏幕下的显示样式，这是目前最流行、最推荐的方案。
2. 独立移动端模板：为手机单独制作一套模板，通过 m 域名（如 m.yoursite.com）访问,适合对手机端有完全不同设计需求的场景。

本教程将重点讲解 响应式模板，因为它更简单、更高效。

第一部分：准备工作

在开始之前,请确保你已经具备以下条件：

1. 一个已安装好的 DedeCMS 网站环境：确保你的网站后台可以正常访问。
2. FTP 工具：如 FileZilla,用于上传文件到服务器。
3. 文本编辑器：如 VS Code、Sublime Text 或 Notepad++,用于修改模板文件。
4. 基础的 HTML 和 CSS 知识：有助于你更好地理解和修改模板。

第二部分：安装响应式模板

这里我们以一个非常流行且易用的免费响应式模板 Default Mobile 为例。

步骤 1：下载响应式模板

1. 访问 DedeCMS 官方论坛或模板资源网站，搜索“响应式模板”或“Default Mobile”。
2. 下载模板的压缩包（通常是 .zip 格式）。
3. 注意：请从可信来源下载,避免携带恶意代码。

步骤 2：上传模板文件

1. 使用 FTP 工具登录你的服务器。
2. 找到 DedeCMS 安装目录下的 /templets/ 文件夹。
3. 将下载并解压后的模板文件夹（default_mobile）整个上传到 /templets/ 目录下。

步骤 3：后台启用新模板

1. 登录你的 DedeCMS 后台。
2. 进入菜单 【系统】 -> 【系统基本参数】 -> 【默认模板设置】。
3. 在页面中找到以下几项，将其值修改为你刚刚上传的模板名称（default_mobile）：
   • 主页模板 (index): index.htm
   • 列表页模板 (list): list_article.htm (根据你的栏目类型选择，如 list_image.htm 等)
   • 文章页模板 (article): article_article.htm (同理,根据类型选择)
   • 搜索页模板 (search): search.htm
4. 点击“保存”按钮。

你的网站已经切换到了新的响应式模板，你可以访问前台网站，拖动浏览器窗口的宽度,观察页面布局是否随之变化。

第三部分：核心配置与修改

模板安装好后，我们需要进行一些核心配置,让它更好地为手机端服务。

步骤 1：设置网站域名（适配移动端）

为了让手机用户能自动跳转到适配的页面,我们需要在后台设置移动端域名。

1. 进入后台 【系统】 -> 【系统基本参数】 -> 【核心设置】。
2. 找到 “手机版网址” 选项。
3. 在这里填写你的移动端域名，如果你使用的是响应式模板，可以不填写，或者填写和主站一样的域名，如果你使用的是 m 域名，则填写 https://m.yoursite.com。
4. 保存。

步骤 2：修改网站首页标题和关键词

为了区分手机端和PC端的 SEO,最好为手机端设置独立的标题和关键词。

1. 进入后台 【栏目管理】 -> 【主页】**。
2. 点击“主页”后面的 【修改】。
3. 在修改页面，你可以单独设置 ”、“网站关键词” 和 “网站描述”，这些设置将只对手机端生效（如果你的模板支持）。
4. 保存。

步骤 3：调整模板文件（核心）

这是最关键的一步，决定了你的手机网站最终呈现的样子，模板文件都存放在 /templets/你的模板名称/ 目录下。

修改首页 index.htm

• Logo：找到 <img src="{dede:global.cfg_cmsurl/}/templets/default_mobile/images/logo.png" alt="网站LOGO">，将 logo.png 替换成你自己的 Logo 图片。
• 导航菜单：找到主导航的代码，通常是 {dede:channel type='top' row='8'}，你可以调整 row 的值来显示多少个栏目。
• 内容调用：首页通常会调用文章列表、推荐内容等，常见的调用标签有：
  • {dede:arclist row='5' titlelen='30'}：调用文章列表，row 表示数量，titlelen 表示标题长度。
  • {dede:loop table='dede_recommend' sort='rank' row='10'}：调用推荐位内容。
  • 你可以根据需要修改这些标签的参数,或者增删内容模块。

修改文章页 article_article.htm

• ：{dede:field.title/}
• 发布时间：{dede:field.pubdate function='MyDate('Y-m-d H:i',@me)'/}
• ：{dede:field.body/}
• 上一篇/下一篇：{dede:prenext get='pre'/} 和 {dede:prenext get='next'/}
• 修改文章页样式：这个文件里的 HTML 结构和 CSS 类名共同决定了文章页的排版，你可以直接修改 HTML 结构，或者通过修改 CSS 文件来调整字体大小、行间距、图片宽度等,使其更适合手机阅读。

修改 CSS 文件

CSS 文件（通常是 style.css 或 main.css）是响应式设计的灵魂。

• 媒体查询 (Media Query)：这是实现响应式的核心技术，它会根据屏幕宽度应用不同的 CSS 样式。

  /* 基础样式，应用于所有设备 */
  body {
    font-size: 16px;
  }
  /* 当屏幕宽度小于等于 768px 时（平板和手机） */
  @media (max-width: 768px) {
    body {
      font-size: 14px; /* 手机端字体稍小 */
    }
    .pc-only { /* 隐藏只在PC端显示的元素 */
      display: none;
    }
  }
  /* 当屏幕宽度小于等于 480px 时（小屏手机） */
  @media (max-width: 480px) {
    .header {
      height: 50px; /* 更小的头部高度 */
    }
  }

• 优化建议：

  • 字体：手机端推荐使用 rem 或 em 作为单位，这样可以根据系统字体大小进行缩放,提升可读性。
  • 按钮和链接：确保触摸目标足够大,方便用户点击。
  • 图片：图片宽度最好设置为 100%，并使用 max-width: 100% 来防止图片溢出容器，可以配合 height: auto 保持比例。

第四部分：独立移动端（M站）搭建（可选）

如果你需要一套完全独立的手机网站,可以按以下步骤操作：

步骤 1：创建 m 目录

在网站根目录下创建一个名为 m 的文件夹。

步骤 2：复制并修改模板

1. 将 /templets/ 下的手机模板文件夹（如 default_mobile）复制到 /m/ 目录下。
2. 在 /m/ 目录下，你需要创建一个 include 文件夹，并将网站根目录 /include/ 下的 config.cache.inc.php 文件复制过来，这是为了确保 M 站能读取到数据库配置。
3. 修改模板路径：打开 /m/ 目录下的所有模板文件（如 index.htm），将所有模板调用标签中的路径修改为相对路径，将 /templets/... 改为 ../templets/...。

步骤 3：设置首页

1. 在 /m/ 目录下创建一个 index.php 文件。

2. 在 index.php 中写入以下代码,让它自动跳转到首页模板：

   <?php
   require_once(dirname(__FILE__)."/../include/config_global.php");
   require_once(DEDEINC."/arc.partview.class.php");
   $pv = new PartView();
   $pv->SetTemplet($cfg_basedir . $cfg_templets_dir . "/default_mobile/index.htm");
   $pv->Display();
   ?>

   这里的 $cfg_templets_dir . "/default_mobile/index.htm" 需要指向你的手机模板路径。

步骤 4：绑定域名并配置重定向

1. 在你的服务器控制面板（如 cPanel、宝塔面板）中，为 m 目录绑定一个域名，如 m.yoursite.com。

2. 在网站根目录的 .htaccess 文件中（如果没有就创建一个），添加以下规则，实现 PC 端访问手机域名时自动跳转到移动端：

   # 检测手机 User-Agent 并跳转到 m 站
   RewriteEngine On
   RewriteCond %{HTTP_HOST} ^m\.yoursite\.com [NC]
   RewriteRule ^(.*)$ https://m.yoursite.com/$1 [L,R=301]
   # 如果访问的是 m 站，则跳转到 m 目录
   RewriteCond %{HTTP:Accept} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
   RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC,OR]
   RewriteCond %{HTTP:Profile} ".*" [NC]
   RewriteRule ^(.*)$ https://m.yoursite.com/$1 [L,R=301]

   注意：请将 yoursite.com 替换成你自己的域名。

第五部分：测试与上线

1. 多设备测试：务必在不同尺寸的手机、平板和电脑上进行测试。
   • 真机测试：使用手机浏览器访问你的网站，检查页面布局、点击是否正常。
   • 浏览器开发者工具：在 Chrome 或 Firefox 中，按 F12 打开开发者工具，使用“设备模式”（Device Toolbar）可以模拟各种手机屏幕进行调试。
2. 检查链接：确保所有栏目、文章、图片的链接都是正确的，没有出现跳转到 PC 端的情况。
3. 性能优化：压缩图片，减少不必要的 HTTP 请求,确保手机网站加载速度够快。
4. 提交百度移动适配：在百度站长平台提交你的移动端网站，并设置移动适配关系（PC 页与移动页的对应关系）,以便百度更好地收录你的手机网站。

常见问题与解决方案

• Q: 修改了模板文件，前台没有变化？
  • A: 1. 检查文件是否保存并上传成功，2. 清除浏览器缓存，3. 在后台“更新缓存”或“一键更新网站”。
• Q: 手机网站图片显示过大，撑出屏幕？
  • A: 在 CSS 中给图片容器设置 max-width: 100%; 和 height: auto;。
• Q: 如何让某个栏目只在手机端显示？
  • A: 在模板文件中使用判断标签，{dede:global.cfg_mobiletype/}，然后在后台系统参数里设置这个变量为 yes，在需要显示的地方用 {if $cfg.mobiletype == 'yes'}...内容...{/if} 包裹起来。

这份教程涵盖了从零开始搭建 DedeCMS 手机网站的全过程,祝你搭建顺利！