# 首页导航 (https://21notion.com/docs/basic-feature/homepage)











## 首页布局

通过视频快速了解 FLO.W 模板首页的布局和功能：

<Tabs items={['B站', 'YouTube']}>
  <Tab value="B站">
    <BilibiliVideo url="//player.bilibili.com/player.html?isOutside=true&aid=115223889447103&bvid=BV1HtpezrEWC&cid=32460443042&p=3" width={560} height={315} autoplay={false} />
  </Tab>

  <Tab value="YouTube">
    <YoutubeVideo url="https://www.youtube.com/embed/hyTC9vubHaA?si=36zLGlcjOd7V4AN4" width={560} height={315} />
  </Tab>
</Tabs>

## 顶部导航条

### 导航条原理

了解 Notion 模板中导航条的工作原理：

<Tabs items={['B站', 'YouTube']}>
  <Tab value="B站">
    <BilibiliVideo url="//player.bilibili.com/player.html?isOutside=true&aid=115223889447103&bvid=BV1HtpezrEWC&cid=32460505547&p=4" width={560} height={315} autoplay={false} />
  </Tab>

  <Tab value="YouTube">
    <YoutubeVideo url="https://www.youtube.com/embed/6VINPPe6KFw?si=q5WMxs92ODXIeqbJ" width={560} height={315} />
  </Tab>
</Tabs>

### 移动导航条位置

学习如何调整和移动导航条的位置：

<Tabs items={['B站', 'YouTube']}>
  <Tab value="B站">
    <BilibiliVideo url="//player.bilibili.com/player.html?isOutside=true&aid=115223889447103&bvid=BV1HtpezrEWC&cid=32460506833&p=5" width={560} height={315} autoplay={false} />
  </Tab>

  <Tab value="YouTube">
    <YoutubeVideo url="https://www.youtube.com/embed/l8_rgyjLuRI?si=uVhEts0w3XASpIz2" width={560} height={315} />
  </Tab>
</Tabs>

## 导航栏的细分功能模块

在实际使用过程中，你可能会觉得某些模块的放置位置不够满意，或者不够恰当，接下来的教程就教你如何迁移功能模块的位置。

### 明确导航栏结构

首先在 FLO.W 系统中，所有的功能模块都是放置在顶部导航栏的，例如下图红框圈起来的就是具体的项目细分功能

<img alt="项目管理模块顶部导航栏结构" src={__img0} placeholder="blur" />

展开「项目导航栏」左侧的小三角，你会发现在小三角里面还有一些相同的页面，如下图所示

<img alt="导航栏展开三角显示隐藏真实页面" src={__img1} placeholder="blur" />

其实这里才是细分功能模块「真实页面」（即页面的本体）的存放位置，而导航栏上的页面只是一种「页面引用」

<img alt="导航栏引用页面与真实页面对比" src={__img2} placeholder="blur" />

### 更改功能模块位置

现在如果我想将「旅行计划」这个导航条放到「生活记录模块」的话，该怎么做呢？有两种思路。

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="single">
  <Accordion title="方法 1：直接引用页面">
    直接在「生活记录」模块的导航栏位置，用符号 @ 来引用「旅行计划」这个页面

        <img alt="用@符号直接引用页面的方法" src={__img3} placeholder="blur" />

    但是这样一来，引用的页面 icon 上就会带有一个小箭头。因此如果你不希望有这个小箭头的话，请使用下面的「方法 2」。
  </Accordion>

  <Accordion title="方法 2：移动页面后引用（推荐）">
    步骤 01：移动页面到隐藏位置

    先将「旅行计划」的「真实页面」移动到「生活记录」导航栏的隐藏位置

        <img alt="页面移动到导航栏隐藏位置步骤" src={__img4} placeholder="blur" />

    **如何移动【旅行计划】这个页面？**

    1. 进入【旅行计划】这个页面
    2. 点击右上角的三个小点
    3. 使用【移动到】这个功能
    4. 将【旅行计划】这个页面移动到【生活记录】这个页面中
    5. 移动后你会发现【旅行计划】被放在了【生活记录】页面的最底部
    6. 将【旅行计划】拖动到顶部导航栏的【隐藏位置】

    步骤 02：引用真实页面

    再在「生活记录」导航栏位置，用符号 @ 引用「旅行计划」的真实页面，这样就不会出现小箭头了
  </Accordion>
</Accordions>