织梦手机软件页模板如何适配多机型？-织梦建站-盈思创科技

织梦CMS（DedeCMS）虽然是一款比较老牌的PHP建站系统，但凭借其灵活的标签和二次开发能力，至今仍有不少用户在使用，创建一个手机网站模板，核心在于创建一个独立的、响应式的模板目录,并织梦的模板引擎来调用数据。

（图片来源网络，侵删）

下面我将从准备工作、目录结构、核心文件制作、标签使用、响应式实现五个方面,为您提供一个完整且可直接上手的模板制作流程。

准备工作

在开始之前，请确保您的织梦CMS后台已经开启了“手机站点”功能。

登录织梦后台：您的域名/dede/
进入系统设置 -> 系统基本参数 -> 核心设置
找到 “是否开启多站点支持”，选择 “是”。
找到 “手机版默认模板目录”，这里可以设置您手机模板所在的文件夹，m。
点击“保存”。

织梦已经准备好识别一个名为 m 的手机模板目录了。

手机模板目录结构

在您的织梦安装目录下的 /templets/ 文件夹里，创建一个新的文件夹，比如叫 m,这就是您的手机模板专属目录。

一个典型的手机模板目录结构如下：

/templets/
└── m/                          // 手机模板根目录
    ├── index.htm               // 手机首页模板
    ├── list.htm                // 手机列表页模板
    ├── article_article.htm     // 手机文章页模板 (注意文件名规则)
    ├── head.htm                // 公共头部文件 (可包含导航)
    ├── footer.htm              // 公共底部文件 (可包含版权、友情链接等)
    ├── css/
    │   └── style.css           // 手机端样式文件
    ├── js/
    │   └── main.js             // 手机端JavaScript文件
    └── images/                 // 手机端图片资源

文件命名规则：

首页：index.htm
列表页：list_栏目ID.htm 或 list.htm (通用列表页)
文章页：article_article_栏目ID.htm 或 article_article.htm (通用文章页)

核心文件制作 (以首页 `index.htm` 为例)

手机模板的制作思路是：先写HTML结构，再用织梦标签替换动态内容，最后用CSS和JS美化并实现交互。

`index.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=no">
    <meta name="description" content="{dede:global.cfg_description/}">
    <meta name="keywords" content="{dede:global.cfg_keywords/}">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="{dede:global.cfg_cmspath/}/templets/m/css/style.css">
    <!-- 引入移动端常用的JS库，如jQuery -->
    <script src="{dede:global.cfg_cmspath/}/templets/m/js/jquery.min.js"></script>
</head>
<body>
    <!-- 公共头部 -->
    {dede:include filename="head.htm"/}
    <!-- 轮播图 -->
    <div class="slider">
        <ul class="slider-list">
            {dede:arclist row='5' titlelen='40'}
            <li>
                <a href="[field:arcurl/]">
                    <img src="[field:litpic/]" alt="[field:title/]">
                    <span class="title">[field:title/]</span>
                </a>
            </li>
            {/dede:arclist}
        </ul>
        <div class="slider-dots"></div>
    </div>
    <!-- 焦点图文 -->
    <div class="focus-news">
        <h2 class="section-title">最新资讯</h2>
        <ul>
            {dede:arclist row='6' titlelen='30' orderby='pubdate'}
            <li>
                <a href="[field:arcurl/]">
                    <span class="num">[field:global.autoindex/]</span>
                    <span class="title">[field:title/]</span>
                </a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <!-- 内容板块 -->
    <div class="content-block">
        {dede:channel type='top' row='4'}
        <div class="block">
            <h3 class="block-title"><a href="[field:typelink/]">[field:typename/]</a></h3>
            <ul class="article-list">
                {dede:arclist row='3' titlelen='20' typeid='[field:id]'}
                <li>
                    <a href="[field:arcurl/]">[field:title/]</a>
                </li>
                {/dede:arclist}
            </ul>
        </div>
        {/dede:channel}
    </div>
    <!-- 公共底部 -->
    {dede:include filename="footer.htm"/}
    <!-- 引入自定义JS -->
    <script src="{dede:global.cfg_cmspath/}/templets/m/js/main.js"></script>
</body>
</html>

`head.htm` (公共头部)

<header class="header">
    <a href="javascript:history.back();" class="back-btn"></a>
    <h1>网站名称</h1>
    <a href="javascript:;" class="menu-btn"></a>
</header>

`footer.htm` (公共底部)

<footer class="footer">
    <ul class="footer-nav">
        <li><a href="{dede:global.cfg_cmspath/}/">首页</a></li>
        {dede:channel type='top' row='5'}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {/dede:channel}
    </ul>
    <p class="copyright">Copyright &copy; 2025 {dede:global.cfg_webname/} All Rights Reserved.</p>
</footer>

织梦常用标签详解

在手机模板中，我们使用的标签和PC端基本一致,但会根据需求进行简化。

网站基本信息
- {dede:global.cfg_webname/}：网站名称
- {dede:global.cfg_description/}：网站描述
- {dede:global.cfg_keywords/}：网站关键词
- {dede:global.cfg_cmspath/}：CMS安装目录
文章列表标签 arclist
- row='5'：获取5条记录。
- titlelen='30'长度为30个汉字。
- typeid='123'：指定栏目ID。
- orderby='pubdate'：按发布时间排序。
- limit='start,len'：从第start条开始,获取len条。
- [field:title/]。
- [field:arcurl/]：文章链接。
- [field:litpic/]：文章缩略图。
- [field:pubdate function="MyDate('Y-m-d',@me)"/]：发布时间,格式化输出。
栏目列表标签 channel
- type='top'：获取顶级栏目。
- row='4'：获取4个栏目。
- [field:typename/]：栏目名称。
- [field:typelink/]：栏目链接。
页面引入标签 include
- {dede:include filename='head.htm'/}：引入head.htm文件,用于复用代码。

响应式设计与交互实现

CSS (`style.css`)

手机端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-color: #f5f5f5; }
/* 头部 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #007bff;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
}
.header h1 { flex: 1; text-align: center; font-size: 18px; font-weight: normal; }
区域，给header和footer留出空间 */
.main-content { padding-top: 50px; padding-bottom: 60px; }
/* 轮播图 */
.slider { width: 100%; height: 200px; overflow: hidden; }
.slider-list { display: flex; }
.slider-list li { min-width: 100%; }
.slider-list img { width: 100%; height: 100%; object-fit: cover; }
/* 文章列表 */
.article-list { list-style: none; padding: 10px 15px; background: #fff; }
.article-list li { padding: 10px 0; border-bottom: 1px solid #eee; }
.article-list li:last-child { border-bottom: none; }
.article-list li a { text-decoration: none; color: #333; display: block; }
/* 底部 */
.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; border-top: 1px solid #ccc; }
.footer-nav { display: flex; justify-content: space-around; align-items: center; height: 100%; list-style: none; }
.footer-nav li a { text-decoration: none; color: #666; font-size: 14px; }

JavaScript (`main.js`)

用于实现轮播图等交互效果。

$(document).ready(function() {
    // 简单的轮播图逻辑
    let currentIndex = 0;
    const sliderList = $('.slider-list');
    const items = sliderList.find('li');
    const itemCount = items.length;
    // 假设我们每3秒切换一次
    setInterval(function() {
        currentIndex = (currentIndex + 1) % itemCount;
        sliderList.css('transform', 'translateX(-' + (currentIndex * 100) + '%)');
    }, 3000);
});

总结与后续步骤

创建目录：在/templets/下创建m目录。
编写HTML：按照示例创建index.htm, head.htm, footer.htm等,并用织梦标签替换掉静态内容。
编写CSS：编写style.css，确保页面在手机上显示美观、布局合理。
编写JS：为需要交互的元素（如轮播图、下拉菜单）编写main.js。
后台设置：确保后台的“手机版默认模板目录”已设置为m。
生成页面：在织梦后台的“更新主页”或“更新栏目”中,选择对应的手机模板进行生成。

通过以上步骤，您就可以成功创建一个功能完善的织梦手机网站模板了，这个模板结构清晰，易于扩展,您可以根据自己的需求增删模块和样式。

织梦手机软件页模板如何适配多机型？

准备工作

手机模板目录结构

核心文件制作 (以首页 `index.htm` 为例)

`index.htm` (首页模板)

`head.htm` (公共头部)

`footer.htm` (公共底部)

织梦常用标签详解

响应式设计与交互实现

CSS (`style.css`)

JavaScript (`main.js`)

总结与后续步骤

相关文章

目录[+]

准备工作

手机模板目录结构

核心文件制作 (以首页 index.htm 为例)

index.htm (首页模板)

head.htm (公共头部)

footer.htm (公共底部)

织梦常用标签详解

响应式设计与交互实现

CSS (style.css)

JavaScript (main.js)

总结与后续步骤

相关文章

目录[+]

核心文件制作 (以首页 `index.htm` 为例)

`index.htm` (首页模板)

`head.htm` (公共头部)

`footer.htm` (公共底部)

CSS (`style.css`)

JavaScript (`main.js`)