本文记录了一次Django网站首页的优化过程。将精品教程推荐从列表改为2×2网格卡片展示，每行两个教程；并在其下方新增“工具推荐”版块，一行三个工具图标和标题。修改涉及模板、视图和CSS，并实现了响应式适配。

核心问题

如何将网站首页的精品教程从列表改为2×2网格，并在下方新增3列工具推荐？

背景

网站首页原有的“精品教程推荐”采用列表形式展示，视觉密度较低，且缺少工具类资源的集中推荐入口。为了提升首页信息展示效率和用户体验，计划进行两项调整：

  1. 将精品教程推荐由列表改为一行两个的网格布局，共展示四个教程；
  2. 在精品教程下方新增一个“工具推荐”版块，一行展示三个工具（图片 + 标题），并提供跳转链接。

以下记录修改过程和技术要点。

精品教程推荐布局调整

原布局

之前教程推荐为单列列表，每项包含封面和标题，纵向堆叠。

新布局：2×2 网格

采用 CSS Grid 将卡片排列为两列两行。具体修改：

  • 容器设置 display: grid，grid-template-columns: repeat(2, 1fr)，形成等宽两列；
  • 卡片内容改为上图下文结构，封面图片在上方，标题位于下方；
  • 后端数据仍从数据库取浏览量最高的 4 门教程，通过视图传递 homepage_course_cards 列表。

模板片段（index/templates/index/index.html）调整了循环渲染逻辑，确保每个卡片占据网格一个单元。

新增“工具推荐”版块

版块位置

工具推荐区块直接放置在精品教程推荐的正下方，视觉上形成清晰的分区。

布局与内容

  • 使用 Grid 布局，grid-template-columns: repeat(3, 1fr)，一行容纳三个推荐工具；
  • 每个工具项包含一张封面图片和一个标题，点击可跳转到对应工具页面；
  • 当前推荐的三个工具分别为：隐水印工具、提示词工具、ComfyUI 安装。

数据提供

在视图 index/views/index.py 中新增 homepage_tool_cards 上下文变量，以列表字典形式定义每个工具的图片、标题和跳转链接。开发者可以通过修改此列表轻松更换封面图或链接。

涉及文件修改

本次优化修改了三个文件：

  • index/templates/index/index.html：调整精品教程的网格结构，新增工具推荐区块的 HTML 代码；
  • index/views/index.py：在首页视图的上下文数据中增加 homepage_tool_cards；
  • static/index/css/pages/index_v2.css：定义教程 2 列网格、工具 3 列网格，并编写响应式样式。

响应式设计

为了保证在不同屏幕尺寸下的良好体验，CSS 增加了媒体查询：

  • 桌面端（>768px）：教程卡片保持两列，工具卡片保持三列；
  • 移动端（≤768px）：教程和工具卡片均变为单列堆叠，图片和标题自适应缩放。

后续维护建议

若需更换工具推荐的内容，只需编辑 index/views/index.py 中 homepage_tool_cards 列表内各字典的 image 和 href 字段，无需改动模板或样式。

通过本次调整，首页信息架构更清晰，内容密度得到提升，同时为以后扩展更多推荐版块提供了可复用的网格模式。