命名布局（Named Layout）

有时，相关路由的布局需要与其兄弟路由截然不同。 可以为不同的兄弟路由定义多个布局。 一个default布局和任意数量的named布局。 子路由可以请求特定的named布局。

Qwik City 定义了layouts在 src/routes 中的约定，其文件名要以 layout 开头。 这就是为什么默认布局被命名为 layout.tsx。 命名布局也以 layout 开头，后跟一个破折号 - 和一个唯一名称，例如 layout-narrow.tsx。

src/
└── routes/
    ├── contact/
    │   └── index@narrow.tsx      # https://example.com/contact (Layout: layout-narrow.tsx)
    ├── layout.tsx                # Default layout
    ├── layout-narrow.tsx         # Default named layout
    └── index.tsx                 # https://example.com/ (Layout: layout.tsx)

• https://example.com/

  ┌──────────────────────────────────────────────────┐
  │       src/routes/layout.tsx                      │
  │  ┌────────────────────────────────────────────┐  │
  │  │    src/routes/index.tsx                    │  │
  │  │                                            │  │
  │  └────────────────────────────────────────────┘  │
  │                                                  │
  └──────────────────────────────────────────────────┘
  

• https://example.com/contact

  ┌──────────────────────────────────────────────────┐
  │       src/routes/layout-narrow.tsx               │
  │  ┌────────────────────────────────────────────┐  │
  │  │    src/routes/contact/index@narrow.tsx     │  │
  │  │                                            │  │
  │  └────────────────────────────────────────────┘  │
  │                                                  │
  └──────────────────────────────────────────────────┘