如何修改织梦模板库中的首页布局和样式

织梦（DedeCMS）网站的首页通常由模板文件生成，再由系统发布为静态 HTML。调整首页时，常见工作包括重新排列栏目和文章列表、修改导航与标题，以及更新颜色、间距和移动端样式。修改并不只是“找到一个 HTML 文件改几行”：模板标签、模板目录配置、首页生成流程和 CSS 之间都有关联。若忽略其中任何一环，可能出现页面没有变化、标签原样显示、样式影响全站等问题。

本文以常见的 DedeCMS 5.7 系列安装方式为例，介绍如何安全地定位、调整和发布首页。不同分支、二次开发版本及站点自定义模板可能存在差异；操作前应以当前站点的模板文件和后台设置为准，不要把示例中的路径或标签参数当作所有版本都通用的限制。

一、先弄清“模板库”和首页文件

织梦模板通常位于站点目录下的 templets 文件夹中。常见默认模板目录是 templets/default，首页模板一般名为 index.htm。但后台可能为 PC 端、移动端或不同站点配置了其他模板目录，站点也可能已将模板目录改名。因此，不能仅凭文件名判断正在生效的是哪一份模板。

• templets/default/index.htm：常见的默认首页模板。
• templets/default/head.htm：许多模板用来放置页面头部、导航或公共资源引用。
• templets/default/底部模板文件：文件名由模板设计者决定，常用于公共页脚。
• templets/default/style.css 或 templets/default/style/ 下的样式文件：具体名称和目录结构取决于模板。

模板目录的实际位置应结合后台“系统基本参数”中的模板相关设置、站点配置以及首页模板设置确认。不同版本的后台菜单名称可能不完全相同。也可以在服务器上搜索首页模板中独有的一段文字，再核对该文件是否属于当前站点使用的模板目录。

还要区分模板文件与发布后的首页文件。修改 index.htm 通常不会自动改变已生成的静态首页；还需要在后台执行首页生成或更新操作。静态首页的输出位置由站点设置决定，常见情况下是站点根目录中的 index.html，但不应假定所有站点都如此。

二、适合直接改模板的场景与不适合的场景

直接修改首页模板，适合调整固定布局和展示规则，例如更换栏目顺序、改变文章列表数量、增加一个专题区块、调整首页模块标题，或修改首页专属 CSS。若需要增加可由编辑人员在后台维护的内容，应先考虑是否已有栏目、专题、广告或其他后台管理入口，而不是把内容写死在模板里。

有些需求不应该只靠改首页模板解决：

• 要调整某个栏目下所有列表页的布局，应检查该栏目使用的列表模板，而不是只改首页。
• 要修改文章详情页内容或布局，应检查文章模板及其公共头尾模板。
• 要改变数据是否发布、文章排序或访问权限，应从内容管理和系统设置入手，模板只负责展示。
• 要新增筛选、搜索、登录等交互功能，通常需要相应的程序支持；仅添加 HTML 和 CSS 并不能实现完整功能。

开始之前先备份当前模板和样式文件，记录文件路径、修改时间和当前首页设置。最好在本地或测试站完成修改并核对，再部署到正式站。不要在未确认模板归属时直接覆盖整个 templets 目录，也不要用其他版本的模板文件整体替换当前文件。

三、检查首页模板的结构和公共文件

用纯文本代码编辑器打开当前首页模板，先阅读文件结构，确认哪些内容直接写在首页，哪些通过包含标签引用。许多织梦模板会使用类似下面的写法引入公共头部和底部：

{dede:include filename="head.htm"/}
首页主体内容
{dede:include filename="footer.htm"/}

上例用于说明常见的包含方式，实际文件名、标签写法和公共文件内容应以现有模板为准。部分模板将文档类型、<html>、<head>、导航和页脚分别放在不同文件中；还有一些模板把它们全部写在 index.htm 里。

不要在不清楚边界的情况下重复添加 <html>、<head> 或 <body>。例如，公共头部已经输出了 <body>，首页中又输出一遍，就会产生结构不正确的文档。修改前可以先定位 <head>、<body> 和对应闭合标签，判断它们分别由哪个文件负责。

织梦模板使用花括号形式的标签，例如 {dede:arclist ...}。这些标签由织梦的模板解析过程处理，不等同于浏览器能够执行的 HTML，也不等同于可以随意运行的 PHP。标签没有被解析时，浏览器可能直接显示带花括号的文本；出现这种情况，应先检查文件是否由织梦模板系统处理、标签是否拼写正确以及是否被放进了不适合解析的区域，而不是先用 CSS 遮盖。

四、用模板标签组成首页模块

下面是一个可放入首页主体区域的基础示例，包含站点名称、顶部栏目链接和一组文章链接。实际使用时，应将它放在当前模板已经确定的主体位置，并与现有头部、页脚结构衔接。示例中的 row='6' 表示请求展示若干条记录；不要把这个示例数值理解为织梦所有版本、所有标签都适用的固定上限。

<main class="home-page">
  <header class="home-header">
    <a class="site-name" href="/">{dede:global.cfg_webname/}</a>
    <nav class="home-nav" aria-label="主导航">
      <ul>
        {dede:channel type='top' row='8'}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {/dede:channel}
      </ul>
    </nav>
  </header>

  <section class="home-section" aria-labelledby="latest-title">
    <h1 id="latest-title">最新内容</h1>
    <ul class="article-list">
      {dede:arclist row='6' orderby='pubdate' orderway='desc'}
      <li>
        <a href="[field:arcurl/]">[field:title/]</a>
      </li>
      {/dede:arclist}
    </ul>
  </section>
</main>

在模板文件中，实际代码应是正常的 HTML 和织梦标签；本文用 HTML 实体展示代码，避免示例中的标签被网页解析。将示例复制到模板文件时，需要复制代码本身，而不是把 <、> 这样的展示实体也写进去。

{dede:global.cfg_webname/} 用来读取系统配置中的站点名称。栏目标签中的 type='top' 常用于取得顶级栏目；文章列表标签用于按条件输出文章。标签属性和字段的可用范围可能受 DedeCMS 版本、二次开发及当前数据模型影响，修改前应对照现有模板中已经正常工作的写法，或查看本机对应版本的模板标签文档。

row 是条目数量相关的参数，不是“显示几行文字”的样式参数。它通常控制列表取回的记录条数；具体可用值、解析行为和性能影响取决于标签实现、数据量及运行环境，不能脱离版本说明声称存在一个通用的最大值。首页同时放置大量列表或复杂查询，会增加生成耗时，也会让页面内容过长。应按实际展示需求设置数量，并在发布后检查生成时间和页面表现。

文章标题、栏目名和链接地址都是由模板字段生成的内容。不要假设模板标签会对所有字段、所有输出上下文自动进行安全转义，也不要把不可信内容拼进 HTML、属性、脚本或 CSS 中。对允许用户提交的内容，应在应用层进行恰当的校验与输出编码；模板中的字段若承载富文本，还要按站点的内容安全策略处理。不要在模板中使用来源不明的 PHP 片段、动态执行代码或未经审查的第三方标签。

五、调整布局：先分区，再加样式

建议先给首页模块设置清晰的容器和类名，再通过 CSS 控制排版。类名尽量体现用途，例如 home-header、home-nav 和 article-list，避免直接覆盖全站常用的 ul、a、h1 等元素选择器。这样既方便后续维护，也能降低改首页时影响文章页、栏目页的风险。

以下 CSS 可用于上述结构。可以把它放进当前模板实际引用的样式文件中；若暂时使用内嵌样式，需放在页面的 <head> 中，且不要重复创建已有的 <style> 标签。

.home-page {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
  color: #222;
}

.home-header {
  padding-block: 20px;
  border-bottom: 1px solid #ddd;
}

.site-name {
  color: #222;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.home-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.home-nav a,
.article-list a {
  color: #245b9e;
  text-decoration: none;
}

.home-nav a:hover,
.article-list a:hover {
  text-decoration: underline;
}

.home-section {
  padding-block: 24px;
}

.home-section h1 {
  margin: 0 0 16px;
  font-size: 1.4rem;
}

.article-list {
  margin: 0;
  padding-left: 1.25rem;
}

.article-list li + li {
  margin-top: 10px;
}

@media (max-width: 600px) {
  .home-page {
    width: min(100% - 24px, 1120px);
  }

  .home-nav ul {
    gap: 10px 16px;
  }
}

CSS 中的 width: min(...)、逻辑属性等写法需要浏览器支持相应标准。若站点必须兼容较旧的浏览器，可改为更传统的固定最大宽度与百分比宽度写法，并在目标浏览器中测试。响应式布局不是只加一个媒体查询就完成，还应检查导航是否换行、长标题是否溢出、字号是否易读，以及首页图片是否超出容器。

六、修改样式文件时注意加载路径和缓存

如果样式文件由 <link rel="stylesheet"> 引用，先检查浏览器实际请求的 CSS 地址是否正确。模板中常见的资源路径写法因站点配置而异，不能直接假定某个相对路径在根目录、子目录和多站点环境下都有效。修改后可在浏览器开发者工具的网络面板中查看 CSS 请求状态；若文件返回 404，应先修正路径，再排查选择器。

CSS 改动没有生效时，可按以下顺序检查：

1. 确认改的是当前模板引用的 CSS 文件，而不是同名的备用文件。
2. 查看页面源代码，确认样式表链接指向预期地址。
3. 在开发者工具中检查目标元素是否拥有预期类名，以及样式是否被其他规则覆盖。
4. 清理浏览器缓存或使用强制刷新；若有代理、CDN 或服务器缓存，也按站点实际配置刷新对应缓存。
5. 重新生成首页，再检查发布后的静态文件是否已更新。

不要为了“让规则生效”而在每条声明后堆叠 !important。应先找到冲突来源，优先使用范围合理、优先级清晰的选择器。如果确实需要覆盖旧模板样式，可以限定在首页容器下，例如 .home-page .article-list，避免影响其他页面的文章列表。

七、保存后重新生成首页

完成模板修改后，进入当前版本对应的后台首页生成或更新入口，重新生成首页。后台入口的名称会随版本和定制界面变化；应确认生成任务针对的是当前站点和当前使用的首页模板。生成完成后访问站点首页，检查浏览器实际看到的内容，而不要只在模板编辑器中判断。

如果模板中包含栏目或文章列表，列表显示内容还取决于栏目状态、文章审核状态、发布时间和查询条件。模板能够输出标签，不代表一定有符合条件的数据。如果首页模块为空，分别检查：相应内容是否存在、是否已发布、栏目是否可见、标签参数是否匹配当前版本，以及生成时是否选用了正确的模板。

若首页由定时任务或自动生成机制更新，也要了解它何时重新发布。直接修改已经生成的 index.html 通常不是可靠的模板修改方式：下一次生成可能会覆盖手工编辑内容。正确流程一般是改模板、执行生成、验证输出；只有站点明确采用其他发布方式时，才按其实际流程操作。

八、常见错误及排查顺序

1. 改了模板，首页完全没变

最常见原因是改错模板目录、首页实际使用的是另一份模板，或者没有重新生成静态首页。先核对后台配置与模板路径，再确认生成结果的更新时间。不要一开始就清空所有缓存或覆盖站点文件。

2. 页面显示花括号标签

这通常表示内容没有经过预期的模板解析，或标签语法、开闭标签、放置位置存在问题。确认修改的是织梦使用的模板文件，而不是已生成的 HTML；检查标签名、字段名和成对标签是否完整。先用一个已知可工作的简单标签做对照，不要把标签拼写错误归咎于 CSS。

3. 页面布局乱了或有重复导航

可能是公共头部已包含导航，而首页又新增了一份；也可能是公共文件的 HTML 闭合边界被打乱。检查头部、首页主体和页脚各自负责的结构，并使用浏览器开发者工具查看实际 DOM。一次只调整一个区域，便于定位问题。

4. 列表为空或条数不符合预期

检查数据发布状态、栏目范围、排序字段和标签属性。不要把不同标签的参数互相照搬，也不要假定修改 row 就能改变筛选条件。先缩小问题范围，使用当前模板里已验证过的标签形式，再逐项增加参数。

5. 中文变成乱码或保存后文件异常

编辑模板和 CSS 时，应沿用站点现有的字符编码与换行习惯。许多旧站点使用特定编码，不能未经检查就批量转换为 UTF-8。保存前确认编辑器识别的编码正确；转换编码前备份文件，并检查发布后的页面响应头和文件内容。

6. 新样式影响了其他页面

检查是否使用了范围过宽的选择器，例如直接重设所有 ul 或 a。将首页样式限定在专用容器内，并确认公共 CSS 是否被所有页面共享。共享样式文件中的全局规则会影响引用它的其他模板，发布前至少抽查首页、栏目页和文章页。

九、发布前检查清单

• 确认修改的是当前站点正在使用的首页模板和样式文件。
• 已备份原文件，且没有直接覆盖不相关的模板目录。
• 公共头部、主体与页脚的结构边界清楚，没有重复输出文档骨架。
• 织梦标签成对完整，使用的字段和参数与当前版本及现有模板相符。
• 文章标题、栏目名和其他动态内容没有被拼接进危险的脚本或属性上下文。
• 已重新生成首页，并在实际输出页面中检查链接、列表、排版和移动端显示。
• 同时检查缓存、字符编码，以及公共 CSS 对其他页面的影响。

修改织梦首页布局的核心，是先确认模板的生效路径和公共结构，再用标签输出需要的数据，最后以范围明确的 CSS 调整表现，并通过后台生成流程验证结果。遇到异常时，按“模板文件是否正确、标签是否解析、数据是否符合条件、样式是否加载、静态页面是否更新”的顺序排查，通常比反复覆盖文件或堆叠样式规则更快，也更容易保留原有功能。