织梦cms手机模板修改-织梦建站-盈思创科技

织梦CMS的手机模板修改和PC端模板修改在逻辑上非常相似，都是通过修改HTML模板文件和调用织梦的标签来实现的，核心区别在于，手机模板是独立的，位于 /templets/ 目录下的 mobile 文件夹中。

（图片来源网络，侵删）

下面我将从准备工作、核心步骤、常见修改场景和高级技巧四个方面,为你提供一份详尽的指南。

准备工作：找到并理解手机模板的位置

在开始修改之前,你必须知道手机模板文件在哪里。

模板目录结构：织梦的默认模板结构如下：

/dede/              // 后台程序目录
/include/           // 核心函数库
/templets/          // **所有模板的根目录**
    /default/       // PC端默认模板
    /mobile/        // **手机端默认模板目录** (这是我们的主战场)
        /index.htm      // 手机首页
        /list_article.htm // 手机文章列表页
        /article_article.htm // 手机文章内容页
        /search.htm     // 手机搜索页
        /footer.htm     // 手机底部公共模板
        /head.htm       // 手机头部公共模板
        ...等等

如何确认当前使用的手机模板？
（图片来源网络，侵删）
- 登录织梦后台。
- 进入 「系统」->「系统基本参数」->「核心设置」。
- 找到 「手机版模板目录」 这一项，它的值就是当前手机模板所在的文件夹名，默认是 mobile，如果你自定义了模板,这里会显示你的文件夹名。
修改前必做：备份！备份！备份！ 任何修改前，请务必备份你的 /templets/mobile/ 整个文件夹，如果修改出错,可以快速恢复。

核心修改步骤：以修改手机首页为例

假设我们要修改手机首页的Logo、网站名称和一些布局。

第1步：通过FTP或文件管理器进入模板目录

使用你的FTP工具（如FileZilla）或主机面板的文件管理器，连接到你的服务器，并进入 /templets/mobile/ 目录。

第2步：编辑目标模板文件

我们要修改首页，所以打开 index.htm 文件，你可以使用任何代码编辑器（如 VS Code, Sublime Text, Notepad++）来编辑它。

第3步：识别和修改织梦标签

织梦模板的本质是HTML文件 + 织梦标签，织梦标签用 {dede:} 包裹。

场景1：修改网站Logo

找到代码：在 index.htm 中搜索类似这样的代码：

<a href="{dede:global.cfg_mobileurl/}/">
    <img src="{dede:global.cfg_logo/}" alt="{dede:global.cfg_webname/}" />
</a>

理解标签：
- {dede:global.cfg_mobileurl/}：获取网站在后台设置的“手机首页网址”。
- {dede:global.cfg_logo/}：获取网站Logo的图片地址。
- {dede:global.cfg_webname/}：获取网站名称。
进行修改：
- 更换Logo：如果你想更换Logo，有两种方式。
  1. 后台修改（推荐）：登录后台，进入 「系统」->「系统基本参数」->「核心设置」，修改 「网站Logo」 为你新Logo的地址,这种方式最安全。
  2. 直接修改模板：将 {dede:global.cfg_logo/} 替换为你新的Logo地址，/templets/mobile/images/new-logo.png。
- 修改Logo链接：默认链接到手机首页，如果你想修改，直接修改 href 属性中的值即可。

场景2：修改网站名称

找到代码：通常在 <title> 标签或网站头部。
进行修改：
- 后台修改（推荐）：在 「系统基本参数」 中修改 「网站名称」。
- 直接修改模板：如果你想让首页显示一个和后台设置不同的名称，可以直接在这里修改 {dede:global.cfg_webname/} 为固定文本，我的 awesome 手机站。

场景3：修改首页栏目列表

找到代码：查找循环调用栏目的标签，通常是这样的结构：

{dede:channel type='top' row='8'}
<li>
    <a href="[field:typelink/]">[field:typename/]</a>
</li>
{/dede:channel}

理解标签：
- {dede:channel type='top' row='8'}：调用顶级栏目，最多显示8个。
  - type='top'：只调用顶级栏目。
  - row='8'：调用数量为8个。
- [field:typelink/]：栏目的链接地址。
- [field:typename/]：栏目的名称。
进行修改：
- 修改显示数量：将 row='8' 改为 row='10',首页就会显示10个顶级栏目。
- 修改样式：你可以给 <li> 添加CSS类，然后在CSS文件中定义样式，<li class="nav-item">...</li>。

第4步：保存文件并刷新网站

保存你修改的 index.htm 文件，然后用手机访问你的网站，刷新页面,查看修改效果。

常见修改场景详解

修改手机文章列表页 (`list_article.htm`)

这个页面通常用于显示某个栏目下的所有文章。

修改文章标题链接：
```
<a href="[field:arcurl/]">[field:title/]</a>
```
- [field:arcurl/] 是文章的完整链接。
- [field:title/] 是文章标题。
修改文章摘要和发布时间：
```
<p class="summary">[field:description function='cn_substr(@me, 100)'/]...</p>
<span class="date">[field:pubdate function='MyDate('Y-m-d', @me)'/]</span>
```
- [field:description function='cn_substr(@me, 100)'/]：截取文章摘要前100个字符。
- [field:pubdate function='MyDate('Y-m-d', @me)'/]：格式化文章发布时间为 年-月-日 的格式，你可以修改 Y-m-d 来改变日期格式，m-d。
修改分页代码：找到 {dede:pagelist listsize='4'/} 这部分，这是分页条，你可以用CSS来美化它,或者用JS分页插件来替代。

修改手机文章内容页 (`article_article.htm`)

这是用户点击文章后进入的页面。

修改文章标题：<h1>[field:title/]</h1>
修改文章内容：[field:body/]，这部分是文章正文，通常由编辑器生成，不建议直接在这里修改样式,而是通过CSS来控制。

修改作者和来源：

<span>作者：[field:writer/]</span>
<span>来源：[field:source/]</span>

{dede:prenext get='pre'/} 上一篇
{dede:prenext get='next'/} 下一篇

你可以自定义它们的显示样式，

<div class="prenext">
    <div class="pre">{dede:prenext get='pre'/}</div>
    <div class="next">{dede:prenext get='next'/}</div>
</div>

修改手机页头页尾 (`head.htm`, `footer.htm`)

head.htm：通常包含 <head> 标签里的内容，如 <title>、<meta> 标签（用于响应式适配）、CSS和JS文件的引入等。
- 响应式适配：确保里面有这句关键的 meta 标签：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
- 引入CSS/JS：如果你想添加自己的CSS或JS文件，在这里引入。
```
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/my-style.css">
<script src="{dede:global.cfg_templets_skin/}/js/my-script.js"></script>
```
  {dede:global.cfg_templets_skin/} 会自动解析为当前模板的目录路径，如 /templets/mobile/。
footer.htm：包含网站底部的版权信息、备案号、友情链接等。
- 友情链接：使用 {dede:flink/} 标签调用，可以设置其属性，
```
{dede:flink type='text' row='10' titlelen='24'}
<a href="[field:url/]" target="_blank">[field:name/]</a>
{/dede:flink}
```
  - type='text'：显示为文字链接。
  - row='10'：显示10个。
  - titlelen='24'长度限制为24个字符。

高级技巧与注意事项

CSS和JS文件存放位置 为了管理方便，建议在 /templets/mobile/ 目录下创建 css 和 js 文件夹，将你的自定义样式和脚本放在里面，然后在 head.htm 中引入它们。
使用模板继承（DedeCMS V5.7+） 织梦支持模板继承功能，类似于PHP的 include，你可以在 index.htm 中这样写：
```
{dede:include filename="head.htm"/}

{dede:include filename="footer.htm"/}
```
这样修改 head.htm 或 footer.htm 时，所有引用它们的页面都会生效,提高了效率。
手机模板和PC模板的切换 织梦默认会根据浏览器 User-Agent 自动判断并跳转到相应的模板,你也可以手动设置：
- 在后台 「系统」->「系统基本参数」->「核心设置」 中，可以设置 「手机访问网址」 和 「电脑访问网址」。
- 在模板中，可以使用 {dede:global.cfg_mobileurl/} 和 {dede:global.cfg_indexurl/} 来分别获取手机版和PC版的首页地址。
调试技巧 如果修改后看不到效果,请检查：
- 缓存问题：织梦有模板缓存，进入后台 「系统」->「一键更新缓存」,清空缓存后再看。
- 路径问题：确保CSS、JS、图片的路径正确，使用 {dede:global.cfg_templets_skin/} 是最保险的方法。
- 标签错误：检查 {dede:} 和 [field:] 标签是否拼写错误,或者参数是否正确。
使用第三方手机模板 如果你觉得默认模板太难看，可以从网上下载很多优秀的织梦手机模板（通常叫“织梦响应式模板”或“织梦手机端模板”），下载后，将整个模板文件夹解压并上传到 /templets/ 目录下，然后在后台 「模板管理」->「手机模板管理」 中选择并设置为默认即可。

希望这份详细的指南能帮助你顺利修改织梦CMS的手机模板！祝你成功！

织梦cms手机模板修改

准备工作：找到并理解手机模板的位置

核心修改步骤：以修改手机首页为例

第1步：通过FTP或文件管理器进入模板目录

第2步：编辑目标模板文件

第3步：识别和修改织梦标签

第4步：保存文件并刷新网站

常见修改场景详解

修改手机文章列表页 (`list_article.htm`)

修改手机文章内容页 (`article_article.htm`)

修改手机页头页尾 (`head.htm`, `footer.htm`)

高级技巧与注意事项

相关文章

目录[+]

准备工作：找到并理解手机模板的位置

核心修改步骤：以修改手机首页为例

第1步：通过FTP或文件管理器进入模板目录

第2步：编辑目标模板文件

第3步：识别和修改织梦标签

第4步：保存文件并刷新网站

常见修改场景详解

修改手机文章列表页 (list_article.htm)

修改手机文章内容页 (article_article.htm)

修改手机页头页尾 (head.htm, footer.htm)

高级技巧与注意事项

相关文章

目录[+]

修改手机文章列表页 (`list_article.htm`)

修改手机文章内容页 (`article_article.htm`)

修改手机页头页尾 (`head.htm`, `footer.htm`)