如何修改织梦模板的首页布局？

织梦（DedeCMS）的首页通常由模板文件生成。调整首页布局，不一定要改 PHP：多数情况下，修改首页模板中的 HTML 结构、CSS 样式和织梦模板标签，再重新生成首页即可。真正容易出问题的地方，往往不是改动本身，而是找错模板、只改了生成后的静态文件、标签语法写错，或在模板中直接执行不可信代码。

本文以常见的 DedeCMS 5.7 系列及其衍生版本为例，介绍如何定位首页模板、调整内容区块、生成首页和排查故障。不同版本、二次开发站点的目录、后台菜单和模板标签可能有所差异。操作前应先确认自己的站点版本和实际配置，不要把示例中的目录或路径当作所有站点都固定不变。

一、先弄清楚：首页模板、首页静态文件和栏目模板不是一回事

织梦站点常见的首页模板文件是 templets/default/index.htm。其中的 default 是模板风格目录名；如果站点使用其他风格，实际路径可能是 templets/其他风格名/index.htm。后台的系统基本参数中通常可以查看默认模板风格设置。安装位置、自定义风格名以及二次开发都可能改变实际路径，最好先从当前站点配置和文件中核实。

还需要区分以下几类文件：

• 首页模板：通常是模板风格目录下的 index.htm，包含页面结构和模板标签。
• 生成后的首页：静态站点常把生成结果输出到站点根目录的 index.html，也可能配置为其他文件名或输出目录。
• 栏目模板：栏目列表页、文章页通常使用各自指定的模板，不会因为修改首页模板而自动改变。
• 样式与脚本：可能在模板目录的 CSS、JavaScript 文件中，也可能由页面引用公共资源目录中的文件。

因此，编辑 index.html 并不能替代修改模板：静态首页下一次重新生成时，人工改过的内容通常会被覆盖。反过来，修改了 index.htm 后，如果站点通过静态页访问，也要按站点使用的方式重新生成首页，修改才会出现在访问结果中。

二、适用场景与边界

修改首页模板适合调整首页的区块顺序、标题和导航展示、文章列表、缩略图排列、推荐内容、页脚文字以及颜色和间距等。只要区块需要从织梦内容数据中取值，就应使用合适的模板标签，而不是把内容写死在 HTML 中。

以下情况通常不能只改首页模板：

• 要改变某个栏目列表页或文章页的布局，应检查该栏目或文档使用的列表模板、文章模板。
• 要增加后台可维护的内容字段，可能还需要配置模型、字段或内容维护流程。单纯添加一个 HTML 区块不会自动产生新的后台字段。
• 要修改登录、权限、发布审核、查询接口等业务逻辑，应先梳理对应的程序代码和版本实现，不要把业务处理塞进首页模板。
• 如果站点使用了缓存、反向代理或 CDN，生成首页后仍可能看到旧内容，需要按实际部署情况检查缓存。

模板标签能否使用、属性支持范围、排序字段以及是否有二次开发扩展，都与具体版本和站点代码有关。对不熟悉的标签，不要凭其他版本的示例推断其行为；可以先在测试环境验证，必要时查阅本站对应版本的模板说明或源码。

三、修改前先确认文件、备份和生成方式

1. 确认站点和版本。确保登录的是目标站点的后台，确认站点版本、模板风格目录以及首页实际输出位置。
2. 确认当前生效的文件。从配置或现有页面引用的资源路径，确认要改的是哪一个风格目录下的首页模板，而不是旧模板、备用模板或发布目录里的副本。
3. 备份原文件。至少复制一份原始 index.htm 和会修改的 CSS 文件。建议保留清晰的备份名称，例如 index.htm.bak-20240601，并记录改动内容。
4. 在测试环境先验证。没有测试环境时，可以先做小范围修改，每次只调整一项，便于发现错误后回退。
5. 确认写入权限。编辑器、FTP 或部署工具需要能够写入模板目录。生产站点不应为了方便长期放开过宽的文件权限。
6. 确定如何更新首页。静态首页需要在后台执行对应的首页生成操作；动态首页或定制部署则要按实际运行方式处理。后台菜单名称因版本和定制情况可能不同。

如果使用文件管理器直接编辑模板，应避免把文件保存成 index.htm.txt、带 BOM 的异常编码文件或错误的字符集。建议沿用项目原有编码和换行方式。中文显示异常时，先检查文件编码以及页面声明和服务器输出编码，而不是用替换字体或转义内容掩盖问题。

四、先用最小改动确认首页模板生效

确认模板路径后，可以先在首页模板中找一个明确的位置，临时加入一段简单标记，生成首页并查看结果。确认生效后及时移除测试内容，再开始正式布局改动。不要直接在访问到的静态首页里做这个测试，否则无法判断生效的是模板还是旧的生成文件。

<div class="home-template-check">首页模板检查</div>

若生成后看不到标记，先检查模板风格是否正确、是否重新生成了首页，以及浏览器或代理是否缓存旧页面。此时不要继续堆叠更多改动，否则定位问题会更困难。

五、一个可用于首页的基础布局示例

下面的片段演示了页面头部、导航、主内容区、侧栏和页脚的基本结构，并用 dede:arclist 输出文章列表。它适合拿来理解模板组织方式，不是任何站点都能直接替换使用的完整主题：现有站点可能已有公共头部、脚本、SEO 设置或其他必要标签。正式套用前，应把原模板中仍需保留的部分合并回来。

模板标签应按模板文件原样书写；在发布页面中，输出结果会由织梦解析。示例中的 HTML 代码在本文中已转义，仅用于展示源代码。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{dede:global.cfg_webname/}</title>
  <link rel="stylesheet" href="/templets/default/style/home.css">
</head>
<body>
  <header class="site-header">
    <div class="site-header__inner">
      <a class="site-name" href="/">{dede:global.cfg_webname/}</a>
      <p class="site-description">{dede:global.cfg_description/}</p>
    </div>
  </header>

  <nav class="site-nav" aria-label="主导航">
    <div class="site-nav__inner">
      <a href="/">首页</a>
      <a href="/about/">关于我们</a>
      <a href="/contact/">联系方式</a>
    </div>
  </nav>

  <main class="home-layout">
    <section class="home-main" aria-labelledby="latest-title">
      <h1 id="latest-title">最新内容</h1>
      <div class="article-list">
        {dede:arclist row='10' titlelen='60' orderby='pubdate' orderway='desc'}
        <article class="article-card">
          <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
          <p class="article-meta">发布时间： [field:pubdate function="MyDate('Y-m-d',@me)"/]</p>
          <p class="article-summary">[field:description function="cn_substr(@me,180)"/]</p>
        </article>
        {/dede:arclist}
      </div>
    </section>

    <aside class="home-side">
      <h2>站点信息</h2>
      <p>欢迎浏览本站内容。</p>
    </aside>
  </main>

  <footer class="site-footer">
    <p>{dede:global.cfg_webname/}</p>
  </footer>
</body>
</html>

row='10'表示标签请求输出的记录数量参数，不代表数据库中只有十篇文章，也不保证一定有十条符合条件的记录；实际结果还取决于数据、标签条件和版本实现。orderby='pubdate'、orderway='desc'用于表达排序意图，但可用字段和具体行为应以本站版本为准。不要把用户提交的内容直接拼接进标签属性或排序参数中。

示例中的 [field:description ...] 使用了织梦常见的字段函数形式。函数是否可用、长度处理方式以及输出内容细节，可能受版本和站点定制影响。摘要只是展示用，不应据此认定输出一定会自动过滤 HTML 或完成安全转义。若摘要来自用户可编辑内容，应检查该版本的输出处理方式，并在可信的生成流程中进行必要的内容清洗和上下文转义。

若站点已有公共头部、导航或页脚标签，应优先沿用原模板中的实现，不要为了套用示例而删除原有标签。比如原站点的导航由栏目数据生成，改成示例里的固定链接后，栏目新增、链接地址变化就不会自动同步。示例中 /about/ 和 /contact/ 也是演示路径，应替换为本站真实地址。

六、用 CSS 调整布局，而不是混合修改业务输出

结构和样式分开维护，便于后续调宽度、配色和响应式规则。下面的样式与上面的类名对应，可保存为示例中引用的 home.css。如果站点原本用其他样式文件，应将规则合并到实际文件并确认引用路径，不要重复加载相同样式表。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #222;
  background: #f5f6f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.site-header,
.site-nav,
.site-footer {
  background: #fff;
}

.site-header__inner,
.site-nav__inner,
.home-layout,
.site-footer {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header__inner {
  padding: 24px 0;
}

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

.site-description {
  margin: 6px 0 0;
  color: #666;
}

.site-nav {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.site-nav__inner {
  display: flex;
  gap: 24px;
  padding: 12px 0;
}

.site-nav a {
  color: #333;
  text-decoration: none;
}

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  padding: 28px 0;
}

.home-main,
.home-side,
.article-card {
  background: #fff;
  border: 1px solid #e7e8eb;
  border-radius: 8px;
}

.home-main,
.home-side {
  padding: 20px;
}

.article-card {
  margin: 16px 0;
  padding: 16px;
}

.article-card h2 {
  margin: 0;
  font-size: 18px;
}

.article-card h2 a {
  color: #222;
  text-decoration: none;
}

.article-meta,
.article-summary {
  color: #666;
  font-size: 14px;
}

.site-footer {
  padding: 20px 0;
  color: #666;
}

@media (max-width: 720px) {
  .home-layout {
    grid-template-columns: 1fr;
  }

  .site-nav__inner {
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

width: min(...) 是现代浏览器支持的 CSS 写法。如果站点需要兼容较旧浏览器，可改用项目已有的兼容方案，或设置固定最大宽度与百分比宽度作为替代。CSS 调整不会改变织梦标签本身的查询结果；同样，改标签也不会自动解决容器溢出、字号或移动端布局问题。

七、增加图片时要特别检查字段和地址

首页文章卡片常需要缩略图。若要显示图片，可以根据站点已有模板写法增加一个图片节点，例如使用文章列表中的缩略图字段：

{dede:arclist row='10' titlelen='60' orderby='pubdate' orderway='desc'}
<article class="article-card">
  <a href="[field:arcurl/]">
    <img src="[field:litpic/]" alt="[field:title/]" loading="lazy">
  </a>
  <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
</article>
{/dede:arclist}

这段代码只是展示字段使用方式。部分文章可能没有缩略图，字段也可能是空值；直接输出可能产生空地址或破损图片。可以通过站点已有的默认缩略图机制、模板判断能力或内容维护规范处理缺图情况。织梦不同版本和二次开发的条件标签写法并不完全相同，不要未经验证就照搬其他站点的判断语法。还要确认图片路径规则、站点是否使用 CDN，以及文件是否真实存在。

缩略图的 alt 是辅助文本，应简洁描述图片用途或内容。把文章标题放入属性时，仍需考虑属性上下文的转义；不能仅凭字段标签能输出字符串，就推断其中的引号等字符已被正确处理。

八、修改模板后的完整验证流程

1. 检查模板源文件。确认文件名和目录正确，标签开闭配对，没有误删原模板必需的脚本、公共区块或 SEO 输出。
2. 按站点方式生成首页。静态站点通常需要在后台执行生成首页的操作；后台菜单名称可能因版本和二次开发有所变化。动态运行或定制发布流程应遵循当前部署方式。
3. 访问最终首页。检查页面源代码和浏览器渲染结果，确认输出的是刚修改后的结构，而不是旧的 index.html 或缓存内容。
4. 检查链接和资源。确认文章链接、导航链接、CSS 地址和图片地址都能访问。尤其注意站点部署在子目录、使用 HTTPS 或调整了 URL 规则时，根路径和相对路径可能指向不同位置。
5. 覆盖典型内容情况。检查标题较长、摘要为空、没有缩略图、文章数量不足和栏目暂时无内容等情况。
6. 检查不同屏幕宽度。至少查看桌面和窄屏布局，确认导航换行、主侧栏堆叠、标题和图片不溢出。
7. 清理或刷新缓存。若源文件和生成结果已更新，但浏览器仍显示旧内容，再按实际情况清理应用、服务器、代理或 CDN 缓存。

验证时不要只看后台预览。后台预览、生成目录和线上访问路径可能并不一致；最终应检查用户实际访问到的页面。若页面由发布工具或定时任务同步到另一台服务器，还要确认修改后的生成文件确实发布到了线上。

九、安全与权限边界

模板文件可以输出 HTML，也能调用模板标签，但不应把它当作安全的沙箱。某些织梦版本或定制站点存在可执行 PHP 的模板标签或特殊处理机制，其可用性及启用方式取决于具体实现。不要为了方便在模板中执行未经审查的 PHP，也不要将后台可编辑模板权限交给不可信账号。

重点注意以下事项：

• 谨慎处理可编辑内容。文章标题、摘要、用户提交内容或外部数据不一定是安全的纯文本。模板标签输出不应被默认视为自动完成 HTML 转义；是否转义应查本站对应实现，并按 HTML 文本、属性、URL 等不同上下文处理。
• 不拼接不可信参数。不要把 URL 查询参数、表单值直接拼入模板标签、JavaScript、SQL 或属性值中。模板展示层不适合承担未校验输入的处理。
• 限制后台和文件访问权限。模板目录需要由部署流程或管理员按需修改即可，不宜对所有用户开放写权限。后台应启用合理的账号权限，并及时更新和维护站点。
• 只使用可信资源。引用外部脚本、样式和图片前应核实来源。避免在模板中加入来路不明的统计代码或复制来的可执行片段。
• 避免泄露敏感配置。首页模板只放需要公开展示的信息，不要输出数据库连接信息、后台路径、内部调试信息或密钥。

这些建议不能替代对实际版本、插件和服务器权限的安全检查。织梦老版本及定制程序的风险取决于具体代码和部署方式；如果站点承载重要业务，应由维护人员评估升级、补丁、备份和访问控制，而不是仅靠修改模板解决安全问题。

十、常见错误与排查方法

1. 修改后首页没有变化

优先确认改动的是当前生效的风格目录，而不是另一套模板；然后确认是否重新生成静态首页，以及访问到的文件是否与生成输出位置一致。若路径都正确，再检查浏览器、服务器或 CDN 缓存。

2. 首页空白或出现模板解析错误

检查标签是否缺少结束标签、标签属性的引号是否成对、复制代码时是否混入了全角符号。逐步撤回最近的改动，先确认基础 HTML 可正常生成，再一点点恢复标签。不要在排错过程中同时更换多个标签和样式文件。

3. 文章标题显示了标签字样或没有数据

确认标签写在织梦会解析的模板文件中，而不是直接写入最终静态页面。检查列表标签的开始和结束位置、字段名是否适用于当前标签，以及符合条件的内容是否存在。不同标签的字段范围并不相同，不能假定所有字段都能在任意标签中使用。

4. 样式没有加载

在浏览器开发者工具中查看 CSS 请求是否成功，检查路径是否指向真实文件、文件名大小写是否一致，以及站点是否部署在子目录。修改了 CSS 文件但页面仍旧旧样式时，也要考虑缓存。不要用大量行内样式掩盖路径问题。

5. 只有部分文章显示图片

先确认文章是否设置了缩略图，再检查 litpic 输出路径和图片文件是否有效。缺图时应有明确的占位方案，不能假设每条内容都有图片。还要排除混合协议、CDN 路径错误或静态文件未发布的问题。

6. 生成首页后手动内容消失

通常是直接编辑了生成后的首页文件。把需要长期保留的结构和内容移回模板或后台可维护的数据中，再重新生成。静态结果是输出物，不应作为唯一的内容来源。

7. 中文乱码或页面编码异常

检查模板文件保存编码、页面编码声明和服务器输出是否一致，并确认没有在复制代码时破坏原文件编码。转换编码前先备份；盲目批量转码可能导致更多文件损坏。

十一、推荐的修改顺序

为了让改动容易验证和回滚，可以按“先结构、再数据、后样式”的顺序操作：

1. 备份原模板，确认当前生效的首页模板与输出文件。
2. 只调整 HTML 区块结构，先不改数据标签。
3. 确认页面结构能正常生成后，再添加或调整文章列表等标签。
4. 检查链接、空值和数据输出，再修改 CSS 与响应式布局。
5. 按站点流程重新生成首页，测试线上实际访问结果。
6. 记录改动文件和回滚方式，保留可用备份。

这套顺序的核心是把模板解析、数据输出和视觉样式分开排查。页面不对时，可以先判断是文件未生效、标签无数据、路径错误还是 CSS 未加载，而不必从一大段混合代码中猜原因。

总结

修改织梦首页布局，先要找到当前生效的首页模板，而不是只编辑生成后的静态首页。确认版本和模板风格、做好备份后，再调整 HTML 结构、模板标签和 CSS，并按站点实际运行方式重新生成和验证。标签参数的支持范围及输出行为应以本站版本为准；对于可编辑内容和模板执行能力，也不能默认其天然安全。掌握这些边界后，首页改版就能在可验证、可回滚的基础上进行。