首页框体调整指南#

Firefly（流萤）博客的首页布局非常灵活，你可以根据自己的喜好调整各种框体的位置和顺序。本指南将详细介绍如何调整首页的各种组件布局。

一、侧边栏布局配置#

1. 核心配置文件#

所有侧边栏的布局配置都在这个文件中：

1
src/config/sidebarConfig.ts

2. 右侧边栏组件顺序#

右侧边栏的组件顺序可以通过修改 rightComponents 数组的顺序来调整。

示例配置：

1
// 右侧边栏组件配置列表
2
rightComponents: [
3
    {
4
        // 组件类型：公告组件
5
        type: "announcement",
6
        // 是否启用该组件
7
        enable: true,
8
        // 组件位置
9
        position: "top",
10
        // 是否在文章详情页显示
11
        showOnPostPage: true,
12
    },
13
    {
14
        // 组件类型：日历组件
15
        type: "calendar",
16
        // 是否启用该组件
17
        enable: true,
18
        // 组件位置
19
        position: "top",
20
        // 是否在文章详情页显示
21
        showOnPostPage: false,
22
    },
23
    {
24
        // 组件类型：站点统计组件
25
        type: "stats",
26
        // 是否启用该组件
27
        enable: true,
28
        // 组件位置
29
        position: "top",
30
        // 是否在文章详情页显示
31
        showOnPostPage: true,
32
    },
33
    // 其他组件...
34
],

3. 组件位置的重要性#

关键知识点：

position: "top" - 固定在顶部的组件
position: "sticky" - 会跟随页面滚动的组件

重要规则：

所有 top 位置的组件会优先于 sticky 位置的组件渲染

这意味着：

如果一个组件是 top 位置，另一个是 sticky 位置，无论它们在数组中的顺序如何，top 位置的组件都会显示在上面
只有当两个组件都是相同位置类型时，才会按照数组顺序渲染

4. 实际调整步骤#

步骤 1：打开配置文件

1
# 用 VS Code 打开
2
type src/config/sidebarConfig.ts
3

4
# 或用记事本打开
5
notepad src/config/sidebarConfig.ts

步骤 2：调整组件顺序

将你想显示在前面的组件移到数组的前面。

步骤 3：统一位置类型

如果想严格按照数组顺序显示，确保所有组件的 position 属性相同（都设为 top 或都设为 sticky）。

步骤 4：保存并刷新

保存文件后，刷新浏览器即可看到效果。

二、常见布局调整需求#

1. 公告显示在最顶部#

1
rightComponents: [
2
    {
3
        type: "announcement",
4
        position: "top",
5
        // 其他配置...
6
    },
7
    // 其他组件...
8
],

2. 站点统计显示在公告下方#

1
rightComponents: [
2
    {
3
        type: "announcement",
4
        position: "top",
5
    },
6
    {
7
        type: "stats",
8
        position: "top",
9
    },
10
    // 其他组件...
11
],

3. 日历显示在中间#

1
rightComponents: [
2
    {
3
        type: "announcement",
4
        position: "top",
5
    },
6
    {
7
        type: "calendar",
8
        position: "top",
9
    },
10
    {
11
        type: "stats",
12
        position: "top",
13
    },
14
    // 其他组件...
15
],

三、左侧边栏布局#

1. 左侧边栏组件配置#

左侧边栏的配置类似，修改 leftComponents 数组：

1
// 左侧边栏组件配置列表
2
leftComponents: [
3
    {
4
        // 组件类型：用户资料组件
5
        type: "profile",
6
        position: "top",
7
        // 其他配置...
8
    },
9
    {
10
        // 组件类型：音乐播放器
11
        type: "music",
12
        position: "sticky",
13
        // 其他配置...
14
    },
15
    // 其他组件...
16
],

2. 左侧边栏常用组件#

profile - 用户资料卡片
music - 音乐播放器
categories - 分类列表
tags - 标签云

四、移动端布局#

1. 移动端底部组件#

在移动端（<768px），侧边栏会变成底部组件，配置在 mobileBottomComponents 数组中：

1
// 移动端底部组件配置列表
2
mobileBottomComponents: [
3
    {
4
        type: "profile",
5
        // 其他配置...
6
    },
7
    {
8
        type: "announcement",
9
        // 其他配置...
10
    },
11
    // 其他组件...
12
],

2. 移动端布局特点#

组件会水平排列在页面底部
只显示图标，不显示文字
点击图标会展开对应的功能

五、高级布局调整#

1. 响应式布局配置#

平板端配置：

1
// 平板端(769-1279px)显示哪侧侧边栏
2
// left: 平板端显示左侧边栏
3
// right: 平板端显示右侧边栏
4
tabletSidebar: "left",

双侧边栏配置：

1
// 侧边栏位置
2
// left: 仅显示左侧边栏
3
// right: 仅显示右侧边栏
4
// both: 双侧边栏
5
position: "both",
6

7
// 文章详情页是否显示双侧边栏
8
showBothSidebarsOnPostPage: true,

2. 组件显示控制#

每个组件都可以控制在不同页面的显示：

1
{
2
    type: "calendar",
3
    enable: true,
4
    position: "top",
5
    // 是否在文章详情页显示
6
    showOnPostPage: false,
7
    // 是否在非文章详情页显示
8
    showOnNonPostPage: true,
9
},

六、常见问题解答#

Q: 为什么我调整了顺序但没有生效？#

A: 检查组件的 position 属性，确保它们是相同的类型（都为 top 或都为 sticky）。

Q: 如何隐藏某个组件？#

A: 将组件的 enable 属性设置为 false：

1
{
2
    type: "advertisement",
3
    enable: false,
4
    // 其他配置...
5
},

Q: 移动端的组件顺序可以调整吗？#

A: 可以，修改 mobileBottomComponents 数组的顺序即可。

Q: 组件的 `position` 有什么区别？#

top - 固定在侧边栏顶部，不会跟随滚动
sticky - 会跟随页面滚动，保持在视野内

七、布局调整最佳实践#

1. 右侧边栏推荐顺序#

1
rightComponents: [
2
    // 1. 公告（重要信息）
3
    { type: "announcement", position: "top" },
4
    // 2. 站点统计（展示数据）
5
    { type: "stats", position: "top" },
6
    // 3. 日历（辅助功能）
7
    { type: "calendar", position: "top" },
8
    // 4. 目录（文章页专用）
9
    { type: "sidebarToc", position: "sticky" },
10
],

2. 左侧边栏推荐顺序#

1
leftComponents: [
2
    // 1. 用户资料（个人信息）
3
    { type: "profile", position: "top" },
4
    // 2. 音乐播放器（娱乐功能）
5
    { type: "music", position: "sticky" },
6
    // 3. 分类和标签（导航功能）
7
    { type: "categories", position: "sticky" },
8
    { type: "tags", position: "sticky" },
9
],

3. 移动端推荐顺序#

1
mobileBottomComponents: [
2
    { type: "profile" },
3
    { type: "categories" },
4
    { type: "music" },
5
    { type: "tags" },
6
],

八、实际调整案例#

案例 1：公告 + 日历 + 站点统计#

目标： 公告显示在最顶部，然后是日历，最后是站点统计

配置：

1
rightComponents: [
2
    {
3
        type: "announcement",
4
        position: "top",
5
    },
6
    {
7
        type: "calendar",
8
        position: "top",  // 注意：这里要设为 top
9
    },
10
    {
11
        type: "stats",
12
        position: "top",
13
    },
14
    // 其他组件...
15
],

案例 2：站点统计 + 公告 + 日历#

目标： 站点统计显示在最顶部，然后是公告，最后是日历