# Fumadocs UI (the default theme of Fumadocs): 橫幅
URL: /zh-TW/docs/ui/components/banner
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/banner.zh-TW.mdx
為您的網站加上橫幅
Install to your codebase:
```bash
npx @fumadocs/cli@latest add banner
```
## 使用方式 [#usage]
將此元素放在根版面配置的最上方，即可用來顯示公告。
```tsx
import { Banner } from 'fumadocs-ui/components/banner';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{/* [!code ++] */}
Hello World
{children}
);
}
```
### 變體 [#variant]
變更預設變體。
```tsx
import { Banner } from 'fumadocs-ui/components/banner';
Hello World;
// 自訂顏色
Hello World
;
```
### 變更版面配置 [#change-layout]
預設情況下，橫幅會使用 `style` 標籤來調整 Fumadocs 的版面配置 (例如縮減側邊欄的高度) 。
您可以透過以下方式停用此行為：
```tsx
import { Banner } from 'fumadocs-ui/components/banner';
Hello World;
```
### 關閉 [#close]
若要讓使用者可以關閉橫幅，請為橫幅設定一個 ID。
```tsx
import { Banner } from 'fumadocs-ui/components/banner';
Hello World;
```
狀態會自動保存。