织梦模板如何修改首页布局？-织梦建站-盈思创科技

核心思想：理解织梦首页的构成

在动手之前,你必须明白织梦首页是如何工作的，它不是单一的 index.html 文件，而是由多个部分组合而成的：

（图片来源网络，侵删）

index.html (首页模板文件)：这是首页的“骨架”或“容器”，它本身不包含具体的内容，而是通过特定的标签来调用其他模板文件。
head.htm (头部模板)：包含网站的 <head> 部分，如 <title>、<meta> 标签、CSS/JS 引入等。
header.htm (页头模板)：网站最顶部的部分，通常是 Logo、主导航菜单等。
footer.htm (页脚模板)：网站最底部的部分，通常是版权信息、备案号、友情链接等。
*`index_.htm块模板)**：这是首页**核心内容**的模板文件，通过index.html` 中的标签来调用。
- index_article.htm：用于调用文章列表（如“网站公告”、“最新文章”等）。
- index_img.htm：用于调用图片集/幻灯片。
- index_product.htm：用于调用产品列表（适用于商城站）。
- index_hot.htm：用于调用热门内容。
- ...等等。

*修改首页布局的本质，就是修改 index.html 这个“骨架”，调整其中调用的各个 `index_.htm` 模块的位置、样式和数量。**

后台可视化修改 (适合新手)

这是最简单、最安全的方法，无需懂代码，通过后台拖拽即可实现。

登录后台：使用你的管理员账号登录织梦DedeCMS后台。
进入模板管理：在左侧菜单栏找到【模板】 -> 【模板管理】。
选择首页模板：在模板管理页面，点击顶部的【默认模板管理】标签页，找到你当前使用的模板，在【主页模板】这一列，点击 index.html 后面的【修改】按钮。
进入可视化编辑：打开 index.html 文件后，你会看到顶部有几个选项卡。请务必点击【可视化】选项卡。
拖拽模块：
- 在可视化编辑模式下,页面的各个内容模块（如“头条文章”、“推荐文章”、“图片新闻”等）都会被一个边框框起来。
- 你可以用鼠标直接拖拽这些模块到新的位置，比如把“图片新闻”拖到导航栏下面。
- 你也可以选中某个模块,按键盘上的 Delete 键来删除它。
- 还可以通过右键菜单来调整模块的属性。
生成首页：修改完成后，点击页面底部的【保存】按钮，在后台左侧菜单找到【生成】 -> 【首页生成】，点击“开始生成”，这样才能让你的修改在网站上生效。

优点：零代码，直观，安全。缺点：自由度较低，只能调整现有模块的位置，无法创建全新的布局或大幅改变样式。

手动修改模板代码 (进阶方法)

当你需要更灵活的布局,比如改变列数、添加新的内容区域时，就需要手动修改模板代码了，这需要你懂一些HTML和CSS知识。

（图片来源网络，侵删）

步骤1：备份！备份！备份！

在修改任何文件之前,请务必备份你的模板文件（通常是 templets/default/ 目录下的所有文件），这是最重要的习惯，可以防止误操作导致网站崩溃。

步骤2：修改 `index.html` (调整布局结构)

index.html 通常使用HTML的 <table> 或者 <div> 标签来布局，现代网站推荐使用 <div> + CSS 的方式。

示例：将原来的单栏布局改成两栏布局

假设你的 index.html 原始内容是这样的（简化版）：

（图片来源网络，侵删）

{dede:include filename="head.htm"/}
{dede:include filename="header.htm"/}
<table width="980" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="680">
      <!-- 左侧主要内容区 -->
      {dede:loop table='dede_archives' sort='pubdate' row='4'}
      <a href='[field:arcurl/]'>[field:title/]</a><br>
      {/dede:loop}
    </td>
    <td width="300">
      <!-- 右侧边栏 -->
      {dede:include filename="index_hot.htm"/}
    </td>
  </tr>
</table>
{dede:include filename="footer.htm"/}

你想把它改成左右两栏,并且中间有间隔，可以修改为：

{dede:include filename="head.htm"/}
{dede:include filename="header.htm"/}
<div class="main-container">
  <!-- 左侧主要内容区 -->
  <div class="main-content">
    {dede:include filename="index_article.htm"/} <!-- 调用文章列表模板 -->
  </div>
  <!-- 右侧边栏 -->
  <div class="sidebar">
    {dede:include filename="index_hot.htm"/}   <!-- 调用热门文章模板 -->
    {dede:include filename="index_img.htm"}    <!-- 再调用一个图片集模板 -->
  </div>
</div>
{dede:include filename="footer.htm"/}

步骤3：修改或创建CSS文件 (美化布局)

光有HTML结构还不行,你需要用CSS来控制这些 div 的宽度、位置、间距等。

找到CSS文件：通常在 templets/default/style/ 目录下，文件名为 style.css 或 dedecms.css。
添加或修改CSS样式：在上一步的 index.html 中，我们给 div 加上了 class 属性，现在就在CSS文件中定义这些 class 的样式。

/* 在 style.css 文件中添加以下代码 */
.main-container {
  width: 1200px; /* 总宽度 */
  margin: 20px auto; /* 居中，并上下留出间距 */
  overflow: hidden; /* 清除浮动 */
}
.main-content {
  width: 900px; /* 左侧内容宽度 */
  float: left;   /* 左浮动 */
  margin-right: 20px; /* 与右侧边栏的间距 */
}
.sidebar {
  width: 280px; /* 右侧边栏宽度 */
  float: left;  /* 左浮动 */
}

步骤4：生成首页

和可视化修改一样,修改完 index.html 和 style.css 后，务必到后台【生成】 -> 【首页生成】，让新布局生效。

完全自定义首页 (高级方法)

如果你想做一个和默认模板风格完全不同的首页,比如一个营销落地页，你可以从零开始构建。

创建新模板文件：在 templets/你的模板目录/ 下，创建一个新的文件，index_new.html。
编写HTML结构：完全按照你的设计稿，用HTML构建页面结构，可以使用任何你喜欢的HTML5标签。
调用织梦标签：在HTML结构中，使用织梦的标签来动态获取数据，常用的标签有：
- 文章列表：{dede:arclist titlelen='30' row='10' typeid='1'}...{/dede:arclist}
- 栏目导航：{dede:channel type='top'}...{/dede:channel}
- ：{dede:field name='body'/} (通常用于“关于我们”这类页面)
- 网站配置信息：{dede:global name='cfg_webname'/} (网站名称)
引入CSS和JS：在 <head> 部分通过 <link> 和 <script> 标签引入你自己的CSS和JS文件。
后台设置：
- 进入【系统】 -> 【系统基本参数】 -> 【核心设置】。
- 找到“主页文件名”选项，将其修改为你刚刚创建的文件名，index_new.html。
- 保存后,到【生成】 -> 【首页生成】，生成新的首页。

常见问题与技巧

Q: 修改后首页没变化，还是旧页面？
- A: 忘记【生成首页】了！这是新手最容易犯的错误，修改模板后必须手动生成才能看到效果。
Q: 我想在首页添加一个新的内容模块，客户评价”。
- A:
  1. 在后台【内容管理】 -> 【添加自定义文档】，创建一个名为“客户评价”的栏目，并设置好栏目属性（使用“封面”或“列表”）。
  2. 在这个栏目里添加你的客户评价文章。
  3. 在 index.html 中，使用 {dede:arclist} 标签调用这个栏目ID下的文章。
  4. 创建一个新的模板文件,index_comment.htm，在里面写好评价的HTML结构。
  5. 在 index.html 中用 {dede:include filename='index_comment.htm'/} 来引入它。
Q: 布局乱了，文字溢出或错位怎么办？
- A: 90%的情况是CSS问题，使用浏览器的开发者工具（按F12）来检查元素，看看是哪个 div 的宽度、高度、浮动或外边距设置不当导致的，检查是否有未闭合的HTML标签。
Q: 如何让首页的某个模块只在首页显示？
- A: 在 index.html 中，给调用这个模块的标签加上 isdefault='1' 属性。 {dede:include filename='index_special.htm' isdefault='1'/}，这样这个模块就只在首页生效，其他页面调用时会忽略。

方法	难度	灵活性	适用场景
可视化修改	低	低	微调模块位置，快速调整。
手动修改代码	中	高	改变列数、增减模块、自定义样式。
完全自定义	高	极高	打造全新的首页设计，如营销页。

对于大多数用户来说,方法一和方法二结合使用是最常见的，先用可视化调整大致布局，再手动修改代码进行精细调整和样式美化。

希望这份详细的指南能帮助你成功修改织梦首页的布局！祝你操作顺利！

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

核心思想：理解织梦首页的构成

后台可视化修改 (适合新手)

手动修改模板代码 (进阶方法)

步骤1：备份！备份！备份！

步骤2：修改 `index.html` (调整布局结构)

步骤3：修改或创建CSS文件 (美化布局)

步骤4：生成首页

完全自定义首页 (高级方法)

常见问题与技巧

相关文章

织梦模板首页如何修改？

目录[+]

核心思想：理解织梦首页的构成

后台可视化修改 (适合新手)

手动修改模板代码 (进阶方法)

步骤1：备份！备份！备份！

步骤2：修改 index.html (调整布局结构)

步骤3：修改或创建CSS文件 (美化布局)

步骤4：生成首页

完全自定义首页 (高级方法)

常见问题与技巧

相关文章

织梦模板首页如何修改？

目录[+]

步骤2：修改 `index.html` (调整布局结构)