DedeCMS 手机模板制作全攻略

本教程将分为以下几个部分：

dedecms手机模板制作教程
（图片来源网络，侵删）
  1. 准备工作：了解 Dedecms 手机模板机制
  2. 核心步骤：制作一个简单的手机首页
  3. 进阶技巧：列表页、内容页与通用页的制作
  4. 常见问题与解决方案
  5. 最佳实践与优化建议

第一部分：准备工作

在开始之前,你需要了解 Dedecms 是如何处理移动端请求的，这至关重要，否则你的模板可能无法生效。

了解手机模板的工作原理

DedeCMS 的手机模板机制主要依赖于 m 参数。

  • 触发方式：当用户访问网站时，URL 中包含 ?m=1 或 /m/，DedeCMS 就会判断这是一个移动端请求。
  • 模板加载：系统会自动加载 /templets/ 目录下的 mobile 文件夹里的模板文件。
  • 默认首页：移动端默认会加载 mobile 文件夹下的 index.htm。
  • PC端与移动端共存：PC 端的模板仍然存放在 /templets/ 目录下的 default 或你自定义的文件夹里，两者互不干扰。

你所有的手机模板文件，都必须放在 /templets/mobile/ 这个目录下。

准备工具和环境

  • 代码编辑器：强烈推荐使用 VS Code、Sublime Text 或 Dreamweaver，它们对 HTML、CSS、PHP 代码有很好的高亮和提示功能。
  • FTP/SFTP 工具：用于将你制作的模板文件上传到服务器，FileZilla。
  • 浏览器开发者工具：用于调试你的模板，特别是 Chrome DevTools 的“设备模拟”功能，可以让你在不连接手机的情况下预览效果。
  • 一个已安装好的 Dedecms 网站：确保你的网站可以正常运行。

第二部分：核心步骤 - 制作一个简单的手机首页

我们将从零开始,创建一个响应式的手机首页。

dedecms手机模板制作教程
（图片来源网络，侵删）

步骤 1：创建移动端目录和文件

通过 FTP 登录你的服务器，进入 /templets/ 目录，创建一个名为 mobile 的新文件夹。

在 /templets/mobile/ 文件夹中，创建以下文件：

  • index.htm (移动端首页)
  • style.css (移动端样式表)
  • head.htm (头部公共模板)
  • footer.htm (底部公共模板)

目录结构示例：

/你的网站根目录/
├── /templets/
│   ├── /default/          (PC端模板)
│   │   ├── index.htm
│   │   └── ...
│   └── /mobile/           (移动端模板)  <-- 我们在这里工作
│       ├── index.htm
│       ├── style.css
│       ├── head.htm
│       └── footer.htm
└── ...

步骤 2：制作 head.htm 公共头部

head.htm 通常包含网站标题、关键词、描述、CSS/JS 引用等。

dedecms手机模板制作教程
（图片来源网络，侵删）

/templets/mobile/head.htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    <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">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style.css">
    {dede:global.cfg_basehost/}
</head>
<body>

代码解析：

  • viewport：移动端适配的核心，告诉浏览器如何渲染页面。
  • apple-mobile-web-app-*：用于优化在苹果设备上的显示效果。
  • {dede:global.cfg_templets_skin/}：这是一个系统变量，会自动解析为 /templets/mobile/ 路径，这样你的 CSS 路径就不会出错。

步骤 3：制作 footer.htm 公共底部

footer.htm 通常包含版权信息、底部导航栏等。

/templets/mobile/footer.htm

    <div class="footer">
        <a href="{dede:global.cfg_cmsurl/}/">首页</a>
        <a href="/list.php?tid=1">分类一</a>
        <a href="/list.php?tid=2">分类二</a>
        <a href="/plus/feedback.php">联系我们</a>
    </div>
</body>
</html>

步骤 4：制作 style.css 样式表

手机端的样式要简洁、直观。

/templets/mobile/style.css

/* 重置样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background: #f4f4f4; }
容器 */
.content { padding: 10px; }
/* 文章列表 */
.article-list { list-style: none; }
.article-list li { background: #fff; margin-bottom: 10px; padding: 15px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.article-list li a { text-decoration: none; color: #333; display: block; }
.article-list li h3 { font-size: 18px; margin-bottom: 8px; font-weight: normal; }
.article-list li .summary { color: #666; font-size: 14px; margin-bottom: 5px; }
.article-list li .meta { color: #999; font-size: 12px; }
/* 底部导航 */
.footer { position: fixed; bottom: 0; left: 0; right: 0; background: #333; display: flex; justify-content: space-around; padding: 10px 0; z-index: 100; }
.footer a { color: #fff; text-decoration: none; font-size: 14px; text-align: center; }

步骤 5：制作 index.htm 首页

这是核心文件,它将调用我们制作的头部和底部，并使用 Dedecms 的标签来获取文章列表。

/templets/mobile/index.htm

{dede:include filename="head.htm"/}
<div class="content">
    <h1>欢迎来到 {dede:global.cfg_webname/}</h1>
    <ul class="article-list">
        {dede:arclist titlelen='40' row='10'}
        <li>
            <a href="[field:arcurl/]">
                <h3>[field:title/]</h3>
                <p class="summary">[field:description function='cn_substr(@me, 80)'/]...</p>
                <div class="meta">发布时间：[field:pubdate function="MyDate('Y-m-d', @me)'/] &nbsp; 点击：[field:click/]</div>
            </a>
        </li>
        {/dede:arclist}
    </ul>
</div>
{dede:include filename="footer.htm"/}

代码解析：

  • {dede:include filename="head.htm"/}：引入头部模板。
  • {dede:arclist ...}：DedeCMS 最核心的列表标签。
    • titlelen='40'长度限制为40个字符。
    • row='10'：获取10篇文章。
    • [field:arcurl/]：文章链接。
    • [field:title/]。
    • [field:description function='cn_substr(@me, 80)'/]：并截取前80个字符。
    • [field:pubdate function="MyDate('Y-m-d', @me)"/]：发布日期，并格式化为年-月-日。
    • [field:click/]：文章点击量。

步骤 6：上传与测试

  1. 将你制作好的 mobile 文件夹（包含里面的所有文件）通过 FTP 上传到服务器的 /templets/ 目录下。
  2. 在浏览器中访问你的网站,并在 URL 后面加上 ?m=1。
    • http://www.yourdomain.com/index.php?m=1
  3. 如果一切正常,你应该能看到你制作的手机版首页了！

第三部分：进阶技巧

制作列表页 (list.htm)

列表页和首页非常相似,只是它通过 URL 中的 tid 参数来指定要显示哪个分类的文章。

  1. 在 /templets/mobile/ 下创建 list.htm。
  2. 复制 index.htm 的内容到 list.htm。
  3. 修改 {dede:arclist} 标签，增加 typeid='GetTopid(@me)' 或直接使用 {dede:list}

/templets/mobile/list.htm 内容示例：

{dede:include filename="head.htm"/}
<div class="content">
    <h1>{dede:field.title/}</h1>
    <ul class="article-list">
        {dede:list pagesize='10'}
        <li>
            <a href="[field:arcurl/]">
                <h3>[field:title/]</h3>
                <p class="summary">[field:description function='cn_substr(@me, 80)'/]...</p>
                <div class="meta">发布时间：[field:pubdate function="MyDate('Y-m-d', @me)'/] &nbsp; 点击：[field:click/]</div>
            </a>
        </li>
        {/dede:list}
    </ul>
    <!-- 分页 -->
    <div class="page">
        {dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'}
    </div>
</div>
{dede:include filename="footer.htm"/}

访问方式：http://www.yourdomain.com/list.php?tid=分类ID&m=1

页 (article_article.htm)

页用于显示单篇文章的详细内容。

  1. 在 /templets/mobile/ 下创建 article_article.htm。
  2. 使用 {dede:field} 标签来获取文章的各个字段。

/templets/mobile/article_article.htm 内容示例：

{dede:include filename="head.htm"/}
<div class="content">
    <h1>{dede:field.title/}</h1>
    <div class="meta">
        发布时间：{dede:field.pubdate function="MyDate('Y-m-d H:i', @me)'/'} &nbsp;
        作者：{dede:field.writer/} &nbsp;
        点击：{dede:field.click/}
    </div>
    <hr>
    <div class="article-content">
        {dede:field.body/}
    </div>
    <div class="share">
        <!-- 这里可以放分享按钮 -->
    </div>
</div>
{dede:include filename="footer.htm"/}

访问方式：http://www.yourdomain.com/a/文章目录ID/文章ID.html?m=1

*制作通用页面 (`page_.htm`)**

对于“关于我们”、“联系我们”等单页面，DedeCMS 会使用 page_*.htm 模板。

  • page_default.htm：默认的通用页面模板。
  • page_about.htm：如果页面标识是 about，则优先使用这个模板。

/templets/mobile/page_default.htm 内容示例：

{dede:include filename="head.htm"/}
<div class="content">
    {dede:field.content/}
</div>
{dede:include filename="footer.htm"/}

访问方式：http://www.yourdomain.com/plus/view.php?aid=页面ID&m=1

第四部分：常见问题与解决方案

为什么我的手机模板不生效？

  • 检查目录：确认模板文件是否在 /templets/mobile/ 目录下。
  • 检查文件名：首页必须是 index.htm，列表页必须是 list.htm页必须是 article_article.htm。
  • 检查URL参数：确认访问时是否带上了 ?m=1 或 /m/。
  • 检查缓存：清除浏览器缓存或按 Ctrl + F5 强制刷新。
  • 检查代码：查看模板文件中是否有 PHP 语法错误，导致模板无法被解析。

如何实现 PC 端自动跳转到移动端？

这是一个很好的用户体验优化,在你的 PC 端模板的 head.htm 中加入一段 JS 代码。

在 /templets/default/head.htm 的 <head> 标签内添加：

<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) {
            window.location.href = "http://www.yourdomain.com/?m=1";
        }
    }
    browserRedirect();
</script>

注意：将 http://www.yourdomain.com/?m=1 替换成你自己的网站地址。

图片在手机上显示过大怎么办？

在 CSS 中为图片添加一个最大宽度限制。

在 style.css 中添加：

img {
    max-width: 100%;
    height: auto;
}

这能确保图片永远不会超出其容器的宽度。

第五部分：最佳实践与优化建议

  1. 使用响应式设计：与其制作两套独立的模板，不如采用一套响应式模板，通过媒体查询 (@media) 来适配不同屏幕尺寸，这是目前的主流做法。
  2. 精简模板代码：手机端加载速度至关重要，删除不必要的空格和注释，压缩 CSS 和 JS 文件。
  3. 使用 CDN 加速：将图片、CSS、JS 等静态资源放到 CDN 上，可以极大提升全球用户的访问速度。
  4. 优化图片：在上传图片到 Dedecms 后，使用其自带的图片处理功能（如缩略图）生成适合手机端的小尺寸图片。
  5. 重视用户体验：按钮要足够大，易于点击；导航要清晰明了；字体大小要适中，方便阅读。
  6. 版本控制：如果你对模板进行多次修改，建议使用 Git 等版本控制工具，或者每次修改前备份一份旧文件，以防出错。

通过以上步骤,你已经可以独立完成一个功能完善的 Dedecms 手机模板了，祝你制作顺利！