1.1 左侧边栏模式 (position: “left”)#

布局结构#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  showRightSidebarOnPostPage: true, // 是否在文章详情页显示右侧边栏
5
};

1.2 双侧边栏模式 (position: “both”)#

布局结构#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏

2.1 列表模式 (defaultMode: “list”)#

列表布局结构#

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // 列表模式
4
    allowSwitch: true,   // 允许用户切换
5
  },
6
};

2.2 网格模式 (defaultMode: “grid”)#

2.2.1 双列网格 (Columns: 2)#

这是网格模式的默认配置，适合大多数场景。

2.2.2 三列网格 (Columns: 3) ✨ New#

在宽屏设备上，您可以开启三列网格模式，进一步提高信息密度。

⚠️ 注意：三列网格模式仅在左侧边栏模式（或无侧边栏）下生效。如果您启用了双侧边栏，系统将自动回退到双列网格，以保证文章卡片有足够的展示宽度。

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    allowSwitch: true,
5
    grid: {
6
      masonry: true,  // 开启瀑布流
7
      columns: 3,     // 设置为 3 列模式（仅单侧边栏生效）
8
    },
9
  },
10
};

2.3 瀑布流布局 (Masonry)#

Firefly 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。

• 智能排版：采用 Z 字形分布（左右交替），严格保持文章的时间顺序。
• 消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上一行的卡片，消除垂直方向的空白间隙。
• 配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

3.1 左侧边栏 + 网格模式#

这是最灵活的组合。您可以选择 2 列或 3 列网格。

• 2 列模式：经典的网格布局，卡片宽度适中，阅读舒适。
• 3 列模式：适合宽屏（≥1024px），单屏展示更多内容，视觉效果震撼。

3.2 双侧边栏 + 网格模式#

在旧版本中，此组合被禁用。但在最新版 Firefly 中，我们解除了限制，允许双侧边栏与网格模式共存。

特点与限制：

• 强制双列：即使您配置了 columns: 3，在此模式下也会强制显示为 2 列。
• 空间紧凑：由于左右都有侧边栏，中间的主内容区域相对较窄。
• 信息密度极高：这是信息密度最高的布局方式，适合需要同时展示大量导航信息和文章列表的站点。

3.3 布局选择建议#

4.1 智能降级规则#

为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：

1. 3 列网格 -> 2 列网格：当屏幕宽度不足以容纳 3 列时（或开启双侧边栏时），自动降级为单列表模式。
2. 网格模式 -> 列表模式：当屏幕宽度小于 1200px（平板和手机）时，网格模式会自动切换为单列列表模式，以保证卡片内容的可读性。
3. 双侧边栏 -> 左侧边栏：当屏幕宽度小于 1280px 时，右侧边栏会自动隐藏，文章目录导航会切换成浮动目录导航。

Q1: 为什么我配置了 3 列网格，但只显示 2 列？#

A: 请检查以下情况：

1. 是否开启了双侧边栏（position: "both"）？双侧边栏模式下强制 2 列。
2. 屏幕宽度是否足够？3 列模式通常需要 ≥1024px 的宽度。

Q2: 为什么在手机上看不到网格效果？#

A: 为了保证阅读体验，Firefly 在屏幕宽度小于 1200px 时会自动强制切换为列表模式。手机屏幕太窄，不适合展示多列网格。

Q3: 布局切换按钮在哪里？#

A: 布局切换按钮位于导航栏右侧。它仅在屏幕宽度 ≥ 1200px 时显示，因为在小屏幕上系统强制使用列表模式，无需切换。