dede手机站模板如何制作？-DEDE建站-盈思创科技

核心思想

制作 DedeCMS 手机站模板，最核心、最推荐的方法是 “响应式模板”，这意味着你只需要制作一套模板，通过 CSS3 的媒体查询技术，让这套模板在不同尺寸的设备（手机、平板、PC）上自动调整布局和样式，以提供最佳的用户体验。

（图片来源网络，侵删）

这种方法比制作两套完全独立的模板（PC端和手机端）要高效得多，也更容易维护。

第一步：准备工作

本地环境：
- 安装一个集成的 PHP 环境，如 phpStudy、XAMPP 或 WAMP，这能让你在本地电脑上搭建一个完整的 Web 服务器环境。
DedeCMS 程序：
- 从 DedeCMS 官网下载最新版本的程序（V5.7 或 V6.0 版本）。
- 将程序解压并部署到你的本地环境的网站根目录（如 phpStudy 的 WWW 文件夹）。
代码编辑器：
- 使用专业的代码编辑器,如 VS Code、Sublime Text 或 Dreamweaver，VS Code 是目前最流行的，插件丰富，强烈推荐。
浏览器开发者工具：
- 这是响应式设计的必备工具,在 Chrome、Firefox 等浏览器中，按 F12 即可打开，它可以模拟不同手机设备、实时修改和预览 CSS，是模板制作过程中最强大的助手。

第二步：制作流程详解

我们将遵循以下步骤来制作手机站模板：

规划与设计
搭建 PC 端模板基础
制作响应式 CSS
修改 DedeCMS 模板文件
**后台设置与验证

规划与设计

在敲代码之前,先用工具（如 Figma, Sketch, 或 even Photoshop）设计出你的手机站界面原型，至少需要设计以下几个关键页面：

首页：顶部导航、轮播图、内容列表、底部导航。
列表页：文章列表的展示方式。
文章详情页、正文、作者、发布时间、相关文章等。
其他页面：如搜索页、留言页等。

搭建 PC 端模板基础

DedeCMS 的模板系统是基于 {dede:} 标签的，我们先制作一个基础的 PC 端模板，然后通过 CSS 将其“改造”为手机端。

（图片来源网络，侵删）

创建模板目录：在 DedeCMS 安装目录下的 templets 文件夹里，新建一个文件夹，例如命名为 m (代表 mobile)。

制作 index.html (首页模板)：

复制 templets/default 目录下的 index.html 文件到你新建的 templets/m 目录中。
打开 templets/m/index.html，你会发现它里面充满了各种 {dede:}
简化结构：删除 PC 端不需要的复杂模块，只保留核心内容，删除多栏布局、复杂的侧边栏等，保留一个主内容区域。


一个典型的首页结构可能如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{dede:global.cfg_webname/}</title>
    <!-- 引入核心 CSS 文件，稍后我们会创建它 -->
    <link rel="stylesheet" href="/templets/m/css/style.css">
    <!-- 引入移动端适配的 viewport 标签，非常重要！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <!-- 顶部导航 -->
    <header>
        {dede:include filename='head.htm'/}
    </header>
    <!-- 轮播图 -->
    <div class="slider">
        {dede:arclist row='5' titlelen='24'}
        <div><a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a></div>
        {/dede:arclist}
    </div>
    <!-- 内容列表 -->
    <div class="content-list">
        {dede:arclist row='10' titlelen='40'}
        <article class="item">
            <a href="[field:arcurl/]">
                <h2>[field:title/]</h2>
                <p class="desc">[field:description function='cn_substr(@me,100)'/]...</p>
                <div class="info"><span>[field:pubdate function='MyDate('m-d',@me)'/]</span></div>
            </a>
        </article>
        {/dede:arclist}
    </div>
    <!-- 底部导航 -->
    <footer>
        {dede:include filename='footer.htm'/}
    </footer>
</body>
</html>



制作其他页面模板：
用同样的方法，复制 list_article.html, article_article.html 等核心页面到 templets/m 目录下，并简化它们的结构。


制作响应式 CSS
这是将模板从 PC 端适配到手机端最关键的一步。


创建 CSS 目录：
在 templets/m 目录下新建一个 css 文件夹，并在其中创建一个 style.css 文件。


编写基础 CSS：
在 style.css 中，首先为 PC 端编写一些基础样式，比如页面居中、最大宽度、字体等。
/* style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
/* ... 其他 PC 端样式 ... */


添加媒体查询：
在 CSS 文件的末尾，添加媒体查询代码，这是实现响应式的核心，我们通常以 768px 作为移动端和 PC 端的分界点。
/* 当屏幕宽度小于等于 768px 时，应用以下样式（即手机端） */
@media screen and (max-width: 768px) {
    body {
        /* 手机端可以设置一个默认的背景色 */
        background-color: #fff;
    }
    /* 覆盖 PC 端的样式，让内容全屏显示 */
    .container {
        max-width: 100%; /* 取消最大宽度限制 */
    }
    /* 轮播图样式 */
    .slider {
        width: 100%;
        height: 200px; /* 固定一个合适的高度 */
        overflow: hidden;
    }
    .slider div {
        width: 100%;
        height: 100%;
    }
    .slider img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 保证图片不变形 */
    }
    /* 内容列表样式 */
    .content-list .item {
        background: #fff;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .content-list .item h2 {
        font-size: 18px;
        margin: 0 0 10px 0;
    }
    .content-list .item .desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    .content-list .item .info {
        font-size: 12px;
        color: #999;
        text-align: right;
    }
    /* 顶部和底部导航样式 */
    header, footer {
        background: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
}
注意：这里的 @media 媒体查询会覆盖掉它之前的 CSS 样式，所以你只需要在 @media 内部编写手机端需要的特殊样式即可。


修改 DedeCMS 模板文件
现在需要告诉 DedeCMS 在什么情况下使用我们新制作的 m 目录下的模板。


修改首页：
登录 DedeCMS 后台 -> 模板 -> 默认模板管理 -> 找到首页模板，将其修改为 m/index.html。


修改栏目页和文章页：
同样在 默认模板管理 中，将 列表页模板 和 文章页模板 分别修改为 m/list_article.html 和 m/article_article.html。


设置手机站目录：
登录 DedeCMS 后台 -> 系统 -> 系统基本参数 -> 核心设置。
找到 手机版默认模板目录 这一选项，将其值填写为 m。

重要提示：这个设置主要影响 DedeCMS 的移动端自动切换功能，如果你完全使用响应式方案，这一步设置后，DedeCMS 仍然会调用 m 目录下的模板，但不会自动切换域名（除非你做了下一步的域名绑定）。



后台设置与验证


绑定手机站域名（可选但推荐）：

在服务器上为你的网站绑定一个二级域名,m.yourdomain.com。
在 DedeCMS 后台 -> 系统 -> 手机门户 -> 手机站点管理 中，添加这个手机站域名，并指向你的网站根目录。
这样,当用户访问 m.yourdomain.com 时，DedeCMS 会自动调用 templets/m 目录下的模板，你可以在 head.htm 中加入一段 JS 代码，实现 PC 站和手机站的自动跳转（现在不推荐强制跳转，但保留这个选项）。



清理缓存：
每次修改模板后，都要去 DedeCMS 后台 -> 系统 -> 一键更新缓存 中点击“更新系统缓存”。


最终验证：

用电脑浏览器访问你的网站,然后按 F12 打开开发者工具。
点击设备模拟按钮（一个手机或平板图标），选择不同的设备（如 iPhone 6/7/8, Pixel 等），查看你的网站是否按照手机端样式正确显示。
如果你有绑定手机域名,也可以直接用手机访问 m.yourdomain.com 进行测试。




进阶技巧与注意事项

图片优化：移动端流量宝贵，确保你的图片是经过压缩的，可以在模板中使用 data-src 属性配合 Lazy Load（懒加载）技术，让图片在进入可视区域后再加载，大幅提升首屏加载速度。
使用 REM/EM 单位：为了更灵活的适配，可以在 CSS 中使用 rem 或 em 单位代替 px，这需要你在 html 标签上设置一个 font-size，然后通过 JS 根据屏幕宽度动态改变这个 font-size，从而实现等比缩放。
简化 DedeCMS 标签：DedeCMS 默认生成的标签可能比较冗余，你可以研究 {dede:} 标签的属性，如 innertext、tagid 等，来精简输出 HTML 的结构。
关注性能：减少 HTTP 请求（合并 CSS/JS 文件）、使用 CDN、压缩资源等，这些 PC 端的性能优化同样适用于移动端。
触摸友好：确保按钮、链接等可点击元素有足够大的点击区域（建议至少 44px x 44px），间距也要合理，避免误触。

通过以上步骤,你就可以成功制作出一个适配良好、体验流畅的 DedeCMS 手机站响应式模板了，祝你制作顺利！

核心思想

第一步：准备工作

第二步：制作流程详解

规划与设计

搭建 PC 端模板基础

制作响应式 CSS

修改 DedeCMS 模板文件

后台设置与验证

进阶技巧与注意事项

相关文章

目录[+]