织梦PHP模板修改，如何快速上手？

织梦的模板系统非常灵活,它将网站的与样式/结构分离开，你不需要懂PHP编程，只需要掌握HTML、CSS和一些简单的织梦模板标签，就能自由地改变网站的外观和布局。

这篇指南将从基础到进阶,涵盖最常用的修改场景。

核心概念：理解织梦模板的构成

在动手之前,你必须先明白织梦网站是如何由模板文件生成的。

1. 网站前台模板 (用户看到的部分)

   • 存放位置：/templets/ 目录下。
   • 默认风格：通常在 /templets/default/ 目录里，你可以直接修改这个默认模板，或者复制一份，在后台设置一个新的风格。
   • 模板文件类型：
     • .htm：这是织梦模板的核心，它们看起来像普通的HTML文件，但里面嵌入了织梦的模板标签。
     • .css：样式表文件，控制网站的视觉样式（颜色、字体、布局等）。
     • .js：JavaScript文件，实现网站的交互效果。
     • 图片：images/ 目录，存放网站Logo、背景图、图标等。

2. 后台模板 (管理员看到的部分)

   
   （图片来源网络，侵删）
   • 存放位置：/dede/templets/ 目录，如果你需要修改后台的界面，就修改这里的文件。

3. 模板引擎与标签

   • 织梦使用自己的模板引擎来解析 .htm 文件，当你访问网站的一个页面时，织梦会找到对应的模板文件，读取其中的，然后执行PHP代码，将最终生成的HTML内容发送给用户的浏览器。
   • 是织梦模板的“魔法”。{dede:arclist} 是用来调用文章列表的标签，{dede:field.title} 是用来显示文章标题的标签。

模板修改的通用流程

1. 准备工作：

   • 备份！备份！备份！ 在修改任何文件之前，务必备份你的整个网站，特别是 /templets/ 和 /data/ 目录，这是最重要的习惯，可以防止修改错误导致网站崩溃。
   • 使用FTP/SFTP工具：如 FileZilla、Xftp 等，连接到你的服务器，下载需要修改的模板文件到本地电脑。
   • 使用专业的代码编辑器：如 VS Code、Sublime Text、Notepad++ 等，不要使用Windows自带的记事本，它可能会破坏文件的编码格式。

2. 修改步骤：

   • 本地修改：在电脑上用代码编辑器打开模板文件进行修改。
   • 上传覆盖：修改完成后，通过FTP工具将修改后的文件上传到服务器，覆盖原文件。
   • 清除缓存：这是最关键的一步！织梦为了加快速度，会把生成的页面缓存起来，如果你修改了模板但看不到效果，很可能是因为缓存问题。
     • 方法一（推荐）：登录织梦后台，点击顶部菜单的 “系统” -> “一键更新缓存”，然后点击“更新主页HTML”和“更新栏目”。
     • 方法二：直接通过FTP删除 /data/tplcache/ 目录下的所有缓存文件。

常见修改场景与实例

场景1：修改网站Logo

1. 准备新Logo：制作一个新Logo图片，new_logo.png，建议尺寸和原Logo保持一致，或者修改模板以适应新尺寸。
2. 上传图片：通过FTP工具，将 new_logo.png 上传到 /templets/default/images/ 目录。
3. 修改模板：
   • 打开 /templets/default/ 目录下的 head.htm 文件（这个文件通常被其他模板文件包含，用于定义头部）。
   • 找到Logo的 <img> 标签，它大概长这样：

     <a href="{dede:global.cfg_cmsurl/}/"><img src="{dede:global.cfg_cmsurl/}/templets/default/images/logo.png" alt="{dede:global.cfg_webname/}" width="260" height="60" /></a>

   • 将 src 属性中的 logo.png 修改为你的新图片名 new_logo.png。

     <a href="{dede:global.cfg_cmsurl/}/"><img src="{dede:global.cfg_cmsurl/}/templets/default/images/new_logo.png" alt="{dede:global.cfg_webname/}" width="260" height="60" /></a>

4. 保存并清除缓存：保存 head.htm 文件，然后登录后台清除缓存。

场景2：修改首页布局（将侧边栏移到右侧）

1. 定位文件：首页的主模板文件通常是 /templets/default/index.htm。
2. 分析结构：用代码编辑器打开 index.htm，你会看到类似这样的HTML结构：

   <div class="main">
       <div class="left"> <!-- 左侧主要内容区 -->
           {dede:arclist ...}
           <!-- 这里是文章列表 -->
           {/dede:arclist}
       </div>
       <div class="right"> <!-- 右侧边栏 -->
           {dede:include filename="right.htm"/} <!-- 包含右侧边栏模板 -->
       </div>
   </div>

3. 修改HTML结构：只需交换 <div class="left"> 和 <div class="right"> 的位置即可。

   <div class="main">
       <div class="right"> <!-- 右侧边栏 -->
           {dede:include filename="right.htm"/} <!-- 包含右侧边栏模板 -->
       </div>
       <div class="left"> <!-- 左侧主要内容区 -->
           {dede:arclist ...}
           <!-- 这里是文章列表 -->
           {/dede:arclist}
       </div>
   </div>

4. 调整CSS：布局改变后，可能需要调整CSS来美化，打开 /templets/default/style/dedecms.css 文件，找到 .main, .left, .right 这些选择器，修改它们的 width（宽度）、float（浮动）、margin（外边距）等属性，直到布局看起来满意为止。
5. 保存并清除缓存。

场景3：修改文章页的标题和发布时间样式

1. 定位文件：文章页的模板文件是 /templets/default/article_article.htm。

   
   （图片来源网络，侵删）

2. 找到目标标签：在文件中找到显示标题和发布时间的代码：

   <h1>{dede:field.title/}</h1>
   <div class="info">
       <span>发布时间：{dede:field.pubdate function='MyDate('Y-m-d H:i', @me)'/}</span>
       <span>来源：{dede:field.source/}</span>
       <!-- ... -->
   </div>

3. 添加CSS类：为了更好地控制样式，给这些元素添加 class 属性。

   <h1 class="article-title">{dede:field.title/}</h1>
   <div class="article-info">
       <span class="article-date">发布时间：{dede:field.pubdate function='MyDate('Y-m-d H:i', @me)'/}</span>
       <span>来源：{dede:field.source/}</span>
       <!-- ... -->
   </div>

4. 编写CSS：打开 dedecms.css 文件，在末尾添加你的自定义样式：

   /* 文章标题样式 */
   .article-title {
       font-size: 24px;
       font-weight: bold;
       color: #333;
       margin-bottom: 15px;
       text-align: center;
   }
   /* 文章信息样式 */
   .article-info {
       color: #999;
       font-size: 12px;
       margin-bottom: 20px;
       text-align: center;
   }
   /* 发布时间样式 */
   .article-date {
       margin-right: 20px;
   }

5. 保存并清除缓存。

常用织梦模板标签速查表

进阶技巧与注意事项

1. 使用Dreamweaver等可视化编辑器：如果你对HTML比较熟悉，可以使用Dreamweaver等工具打开模板文件，它的设计视图能让你更直观地看到修改效果。
2. 响应式模板：现代网站需要适配手机和电脑，修改模板时，要考虑使用 CSS媒体查询（Media Queries） 来为不同屏幕尺寸设置不同的样式。
3. {dede:php}：如果你需要执行一些复杂的PHP逻辑，可以在模板中使用 {dede:php}...{/dede:php} 标签。但请谨慎使用，这会破坏模板与内容分离的原则，且容易带来安全风险。
4. 自定义模型模板：如果你在后台添加了自定义的内容模型（产品”、“招聘”等），你需要为它们创建对应的模板文件，如 article_product.htm，并绑定到该模型上。
5. 安全第一：
   • 不要直接修改PHP文件（如 index.php, list.php）来改变前台布局，所有外观修改都应在 .htm 模板文件中完成。
   • 定期更新织梦程序,修复已知的安全漏洞。
   • 上传模板文件时,确保文件名和内容都没有被植入恶意代码。