### [08.02.020 配置文章列表和文章详情模块](https://guaqi.com/docs/77637)

**Published:** 2026-09-11T02:30:30

**Author:** 二丿小青年

**Excerpt:** 一、这个功能能做什么 通过文章列表与详情模块，可以把后台文章组织成资讯首页、杂志页面、下载目录或图片分享站，并…

[08 页面构建器](/docs-archive/1264) / [08.02 模块与展示](/docs-archive/1266)

## 一、这个功能能做什么

通过文章列表与详情模块，可以把后台文章组织成资讯首页、杂志页面、下载目录或图片分享站，并逐项调整图片、文字、筛选与互动展示。

### 文章列表的 15 种布局

同一批文章可以采用不同展示方式。选中文章列表模块，在「内容设置 → 布局样式」中选择：

| 布局  | 展示效果与适合场景 |
| --- | --- |
| 网格  | 多列图文排列，适合常规文章首页和分类列表 |
| 卡片网格 | 以独立卡片组织图文，突出每篇文章 |
| 列表  | 按行浏览，适合标题和摘要较重要的内容 |
| 瀑布流 | 适合图片比例与内容高度不同的视觉内容 |
| 日志列表 | 以日志形式展示文章，适合持续更新的记录 |
| 小红书模式 | 用相应图文样式展示内容，适合图片型分享 |
| 下载网格 | 以网格展示下载类文章及适用资源信息 |
| 下载列表 | 按列表展示资源，便于比较资源信息 |
| 下载横向列表 | 用横向条目呈现下载内容 |
| 下载卡片 | 突出资源图标、副标题和适用下载统计 |
| 多分类分栏 | 按分类分列，每栏第一篇大图、其余篇目列表展示 |
| 分类精简列表 | 以分类标题、文章标题和时间组织紧凑内容区 |
| 左二右一（杂志） | 每三篇一组，左侧两篇、右侧一篇大图；小屏时大图在上 |
| 杂志混排流 | 按顺序组合列表、全宽大图与双列网格，形成有变化的阅读节奏 |
| 横向滑动卡片 | 拖拽或点击箭头切换卡片，适合横向推荐区 |

布局决定展示形式，文章仍需有对应内容。选择下载布局不会自动创建下载地址；有资源数据时，相应信息才有内容可展示。

### 列表可以逐项调整什么

| 设置  | 控制效果 | 使用提示 |
| --- | --- | --- |
| 数据来源 | 常规列表或当前内容相关 | 相关文章使用当前详情页的内容作为依据 |
| 模块分类 | 决定常规列表使用哪些分类 | 适合首页某个专题区；仍受当前站点和语言范围影响 |
| 自动 ID | 按当前分类或标签页面取得内容 | 适合归档页主体列表，不应随意用在普通首页 |
| 默认排序 | 综合、最新、热门、评论、点赞、收藏、下载、评分等 | 页面筛选带来的排序可以覆盖初始选择；以适用内容数据为准 |
| 只显示 | 全部、下载、音频、视频或画廊 | 同一站点可以分别做视频区、下载区和图片区 |
| 热门天数 | 配合热门排序控制适用时间范围 | 与默认排序一起检查 |
| 总数量 | 控制列表读取数量 | 分类分栏中表示每栏篇数；不同布局含义需结合说明 |
| 每行最大数量 | 控制一行或一屏的数量上限 | 窄容器下还受最小卡片宽度影响 |
| 最小卡片宽度 | 页面变窄时自动减少每行数量 | 适合同时照顾电脑、平板和手机 |
| 分页或加载更多 | 改变浏览后续内容的方式 | 部分杂志和分栏布局不使用底部加载更多 |
| 自动加载更多 | 适用布局滚动到底部时继续加载 | 页面中部模块谨慎使用，避免列表持续占据页面 |
| 标题  | 调整行数、字号与粗细 | 长标题可限制行数，让卡片更整齐 |
| 摘要  | 调整显示、行数与字号 | 图片展示区可少放文字，教程列表可保留说明 |
| 标签数量 | 限制每篇显示的标签数 | 避免标签过多挤占内容空间 |
| 作者与时间 | 选择作者头像、名称、发布时间等展示项 | 适合多作者网站和资讯内容 |
| 互动统计 | 选择浏览、评论、收藏、点赞等适用展示项 | 隐藏展示不等于删除统计数据 |
| 内容信息条 | 展示下载、音频、视频或画廊等适用信息 | 选择默认位置或图片上的位置 |
| 下载专属字段 | 适用布局显示大小、类型、属性、更新时间、评分、下载数 | 不同下载布局提供的展示项不同 |
| 缩略图显示 | 通过展示项决定是否显示图片 | 标题型列表可隐藏图片，作品型列表可突出图片 |
| 缩略图类型 | 选择适用的常规或切换形式 | 可选项与当前布局有关 |
| 缩略图占满 | 调整图片是否占满对应区域 | 与留白、比例一起观察 |
| 缩略图圆角 | 调整列表图片的转角 | 与整个模块的容器圆角分开设置 |
| 缩略图宽度 | 控制适用布局中图片所占宽度 | 在横向图文中平衡图片和文字 |
| 缩略图尺寸 | 选择服务器提供的缩略图、中等、大图或原图等版本 | 小卡片通常无需使用原图 |
| 缩略图比例 | 控制图片区域高宽比例 | 此项用“高÷宽”；正方形填 1，16:9 横图约填 0.56 |
| 杂志混排列表图片 | 单独控制列表项图片开关、宽度和比例 | 大图和双列卡片沿用网格图片设置 |
| 卡片内边距与间距 | 调整内容留白和卡片之间的距离 | 与模块容器内外边距分别作用 |
| 横滑箭头与位置 | 显示切换按钮并调整位置 | 箭头移到模块外侧时应留出足够空间 |

### 文章详情的展示能力

| 模块或设置 | 可以做到什么 |
| --- | --- |
| 文章标题区 | 选择适用的标题区信息，结合正文、作者、分类、标签等独立模块组织详情 |
| 文章 Banner | 选择常规、模糊或轮播样式，设置比例、图片尺寸和适用宽度 |
| Banner 轮播控制 | 设置切换按钮、按钮位置与指示器 |
| 资源下载模块 | 提供默认、游戏下载（简约）、下载资源（清晰版）、下载资源（紧凑版）、下载资源（属性版）五种布局 |
| 下载展示项 | 选择相应资源信息，配置图片、支持说明的图标文字与链接、背景 |
| 视频模块 | 设置是否自动播放；开启后以静音方式开始，用户可手动打开声音 |
| 音频模块 | 选择适用音频展示信息，配合后台的音频与权限配置 |
| 画廊模块 | 设置图片尺寸、每行上限和最小卡片宽度 |
| 评论模块 | 控制评论表单与列表展示，选择默认或瀑布流布局，设置每页评论和回复数、字数限制、间距及加载方式 |
| 互动模块 | 使用横向图标行或右侧悬浮轨展示适用互动按钮 |
| 打赏模块 | 设置货币或积分打赏、预设金额、自定义金额及支持者头像数量 |
| 相关文章区 | 添加文章列表，数据来源选择「当前内容相关」，再选择需要的列表布局和展示项 |
| 文内目录 | 用目录模块关联正文模块 ID，从正文的二级至四级标题生成导航 |

## 二、设置后会有什么效果

同一批文章可以在首页做杂志混排，在分类页用紧凑列表，在详情页显示相关文章。下载内容可以突出资源类型、大小和评分，图片内容可以突出特色图；无需为每种版式重新录入一套文章。

## 三、怎么使用

### 配置文章展示的顺序

1.  打开目标前端的构建器，选择首页、文章归档或文章详情模板。
2.  添加或选中文章列表模块，先确定数据来源，再选分类或启用归档页的自动 ID。
3.  选择布局与展示项，再调整排序、数量、加载方式。
4.  调整图片、标题、摘要和卡片留白；整个模块的圆角与边距到「容器设置」中调整。
5.  配置文章详情时，分别添加标题、正文、下载、媒体、评论与相关文章等需要的模块。
6.  保存并按项目的发布流程更新前台，分别查看电脑宽度和手机宽度，以及不同语言、分类的实际内容。

## 四、常见问题

### 为什么相关文章在首页没有内容？

「当前内容相关」需要一篇当前内容作为依据，应放在详情页使用。普通首页没有对应内容 ID，应使用常规列表和分类筛选。

### 为什么选了每行四篇，手机上只有一两篇？

每行数量是上限。容器变窄并达到最小卡片宽度后，会自动减少列数，避免每张卡片被挤得太窄。

### 为什么改了圆角，文章图片没有变化？

先确认改的是「缩略图圆角」还是「容器设置 → 圆角」。前者控制图片，后者控制整个模块外框；两项需要分别设置。

### 为什么切换布局后，部分展示项或加载按钮不见了？

不同布局提供的展示项不同。例如下载布局突出资源信息，分类精简列表只保留少量字段；多分类分栏和左二右一杂志布局不使用常规底部加载更多。按当前布局提供的选项配置即可。



---