瓜奇
瓜奇
首页
瓜奇的优势
  • 为什么使用瓜奇夯
  • 瓜奇为什么快?
  • 瓜奇为什么安全?
  • 构建器介绍
安装瓜奇待完成
  • 开始
  • 环境准备
  • 前端规则
MCP使用教程
插件设置待补全
  • 智能搜索
  • 支付设置
  • AI设置
  • 物流设置
开发教程
  • 本地开发环境搭建
搜索
  • 首页
  • 产品中心优惠
  • 功能演示
  • 帮助中心
  • 插件中心新
  • 模板中心
  • 构建器非常夯
首页/文档/08 页面构建器/08.02 模块与展示/
打开 MD 链接

08.02.020 配置文章列表和文章详情模块

发布于 2小时前
1

08 页面构建器 / 08.02 模块与展示

一、这个功能能做什么

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

文章列表的 15 种布局

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

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

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

列表可以逐项调整什么

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

文章详情的展示能力

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

二、设置后会有什么效果

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

三、怎么使用

配置文章展示的顺序

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

四、常见问题

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

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

为什么选了每行四篇,手机上只有一两篇?

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

为什么改了圆角,文章图片没有变化?

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

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

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

上一篇
08.02.010 配置模块通用外观和显示条件一、这个功能能做什么 选中模块后,先配置内容,再调整通用外观。设置面板只显示该模块支持的属性,不存在所有模块完…
下一篇
08.02.030 配置文档导航与分类展示模块一、这个功能能做什么 文档菜单、分类菜单与普通文章列表是不同模块。选择目标内容类型,再配置分类来源、层级和展示…
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于帮助文档FAQ协议
瓜奇 © 2026鄂ICP备16020046号-7