特点#

• 侧边栏固定在页面左侧
• 主内容区域位于右侧
• 符合从左到右的阅读习惯
• 适合展示导航和分类等重要信息

布局结构#

适用场景#

• 传统博客风格
• 强调导航和分类的博客
• 需要突出用户资料的个人博客
• 内容为主，辅助信息次之的场景

配置示例#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  leftComponents: [
5
    { type: "profile", order: 1 },
6
    { type: "announcement", order: 2 },
7
    { type: "categories", order: 3 },
8
    { type: "tags", order: 5 },
9
  ],
10
  rightComponents: [], // 右侧组件为空
11
};

特点#

• 左右两侧同时存在侧边栏
• 主内容区域位于中间
• 最大化利用屏幕空间
• 可以展示更多辅助信息
• 适合宽屏显示器

布局结构#

适用场景#

• 宽屏桌面端浏览
• 信息密集型博客
• 需要展示大量辅助内容
• 专业性强的技术博客

响应式行为#

双侧边栏模式具有智能的响应式设计：

• 桌面端（≥1024px）：显示左右双侧边栏
• 平板端（768px-1023px）：只显示左侧边栏，右侧边栏自动隐藏
• 移动端（<768px）：只显示左侧边栏

配置示例#

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏
4
  leftComponents: [
5
    // 左侧边栏组件
6
    { type: "profile", order: 1 },
7
    { type: "announcement", order: 2 },
8
    { type: "categories", order: 3 },
9
    { type: "tags", order: 5 },
10
  ],
11
  rightComponents: [
12
    // 右侧边栏组件
13
    { type: "stats", order: 1 },
14
    { type: "sidebarToc", order: 2, showOnPostPage: true },
15
    { type: "advertisement", order: 10 },
16
  ],
17
};

⚠️ 重要限制#

启用双侧边栏后，文章列表的网格模式将无法使用，只能使用列表模式。原因详见下文”布局冲突分析”章节。

特点#

• 单列纵向排列
• 显示文章封面图
• 展示更多文章摘要
• 适合深度阅读

布局结构#

优点#

• ✅ 视觉冲击力强，封面图吸引眼球
• ✅ 可以展示更多文章信息（摘要、标签等）
• ✅ 适合图片内容丰富的博客
• ✅ 移动端友好，单列更易阅读
• ✅ 兼容所有侧边栏配置（单侧、双侧）

适用场景#

• 摄影博客、设计博客
• 强调视觉效果的博客
• 文章数量较少但质量高的博客
• 移动端访问为主的博客

配置示例#

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

特点#

• 双列横向排列
• 紧凑布局，信息密度高
• 适合快速浏览

布局结构#

优点#

• ✅ 单屏显示更多文章
• ✅ 适合快速浏览和查找
• ✅ 节省垂直滚动空间
• ✅ 现代化的瀑布流风格
• ✅ 适合文章数量多的博客

限制#

• ⚠️ 不支持双侧边栏模式
• ⚠️ 屏幕宽度 < 1200px 时自动切换为列表模式
• ⚠️ 封面图目前显示不全，视觉吸引力较弱，待优化

适用场景#

• 技术博客、文字为主的博客
• 文章数量多，需要快速检索
• 桌面端访问为主的博客
• 强调信息密度的场景

配置示例#

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

响应式行为#

网格模式具有智能的响应式设计：

• 桌面端（≥1200px）：显示双列网格
• 平板端和移动端（<1200px）：自动切换为单列列表模式
• 布局切换按钮：仅在桌面端显示

空间占用分析#

让我们通过实际的宽度计算来理解这个问题：

1
总宽度：1920px
2

3
├─ 左侧边栏：    280px  (固定宽度)
4
├─ 左侧间距：     40px  (margin)
5
├─ 主内容区域： 1560px  (剩余空间)
6
│  ├─ 文章卡片1： 750px
7
│  ├─ 卡片间距：   60px
8
│  └─ 文章卡片2： 750px
9
└─ 右侧间距：     40px
10

11
主内容区域 = 1920 - 280 - 40 - 40 = 1560px
12
每列宽度   = (1560 - 60) / 2 = 750px  ✅ 足够显示

1
总宽度：1920px
2

3
├─ 左侧边栏：    280px  (固定宽度)
4
├─ 左侧间距：     40px  (margin)
5
├─ 主内容区域： 1240px  (剩余空间)
6
│  ├─ 文章卡片1： 590px
7
│  ├─ 卡片间距：   60px
8
│  └─ 文章卡片2： 590px
9
├─ 右侧间距：     40px
10
└─ 右侧边栏：    280px  (固定宽度)
11

12
主内容区域 = 1920 - 280 - 40 - 40 - 280 - 40 = 1240px
13
每列宽度   = (1240 - 60) / 2 = 590px  ❌ 空间不足

1
双侧边栏 + 网格模式
2

3
总宽度：1366px
4

5
主内容区域 = 1366 - 280 - 40 - 40 - 280 - 40 = 686px
6
每列宽度   = (686 - 60) / 2 = 313px  ❌ 严重不足
7

8
每列只有 313px，文章标题都无法完整显示！

视觉体验问题#

即使在宽屏显示器上，双侧边栏 + 网格模式也会带来以下问题：

1. 文章卡片过窄

   • 标题需要多行折叠
   • 摘要显示不完整
   • 标签和元信息拥挤

2. 阅读体验差

   • 每行文字过短，阅读不流畅
   • 视线需要频繁跳转
   • 信息扫描效率低

3. 视觉不平衡

   • 三栏布局已经占据大量横向空间
   • 再将中间栏分成两列，过于碎片化
   • 破坏了”中心内容突出”的设计原则

布局对比图示#

❌空间不足 双侧边栏 + 网格模式（拥挤）

✅布局合理：双侧边栏 + 列表模式（舒适）

✅ 布局合理：单侧边栏 + 网格模式（舒适）

自动冲突检测#

1
// src/utils/layout-utils.ts (示例)
2

3
// 检测布局冲突
4
function canUseGridLayout(): boolean {
5
  const { position } = sidebarLayoutConfig;
6

7
  // 如果启用了双侧边栏，禁用网格模式
8
  if (position === "both") {
9
    return false;
10
  }
11

12
  return true;
13
}
14

15
// 自动修正布局
16
function getActualLayoutMode(): "list" | "grid" {
17
  const { defaultMode } = siteConfig.postListLayout;
18

19
  if (defaultMode === "grid" && !canUseGridLayout()) {
20
    console.warn("网格模式与双侧边栏冲突，已自动切换为列表模式");
21
    return "list";
22
  }
23

24
  return defaultMode;
25
}

布局切换按钮行为#

1
// 双侧边栏时，隐藏布局切换按钮
2
const showLayoutSwitch =
3
  siteConfig.postListLayout.allowSwitch &&
4
  sidebarLayoutConfig.position !== "both";

✅ 推荐组合#

❌ 不推荐/不支持组合#

单侧边栏模式#

• Desktop (≥1024px)：显示侧边栏
• Tablet (768px-1023px)：显示侧边栏
• Mobile (<768px)：显示侧边栏（可配置隐藏）

双侧边栏模式#

• Desktop (≥1024px)：显示左右双侧边栏
• Tablet (768px-1023px)：只显示左侧边栏
• Mobile (<768px)：只显示左侧边栏

列表模式#

• 所有屏幕尺寸：始终单列显示
• Mobile：缩小间距和卡片内边距

网格模式#

• Wide Desktop (≥1200px)：双列网格
• Tablet & Mobile (<1200px)：自动切换为单列列表
• 布局切换按钮：仅在 ≥1200px 时显示

摄影/设计博客#

1
// 推荐：左侧边栏 + 列表模式
2
position: "left"
3
defaultMode: "list"

原因：列表模式可以展示精美的封面图，突出视觉效果。

技术博客#

1
// 方案1：左侧边栏 + 网格模式
2
position: "left"
3
defaultMode: "grid"
4

5
// 方案2：双侧边栏 + 列表模式
6
position: "both"
7
defaultMode: "list"

原因：技术博客文章多，网格模式便于快速查找；或使用双侧边栏展示更多分类和标签。

个人日记#

1
// 推荐：左侧边栏 + 列表模式
2
position: "left"
3
defaultMode: "list"

原因：突出内容，营造亲切感。