logo
English

导航菜单

Documents

App Layout

Introduction

The AppLayout component is designed for page layouts, providing a complete layout framework that includes sidebar navigation, header, main content area, and footer. It’s particularly suitable for documentation sites, blogs, knowledge bases, and other scenarios that require navigation and content display.

Basic Usage

The simplest way to use the application layout:

最基本的应用布局使用方式，包含侧边栏、头部、主内容区和页脚

应用布局示例
logo
English

入门

欢迎使用应用布局

这是一个包含侧边栏、头部和页脚的完整布局示例。

应用布局适合用于文档站点、管理后台等场景。

---
import { AppLayout, Container, Heading } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';
import * as astroI18n from 'astro:i18n';

const sidebarItems: ISidebarItem[] = [
  {
    text: '入门',
    href: '/docs/getting-started',
    items: [
      { href: '/docs/getting-started', text: '快速开始' },
      { href: '/docs/installation', text: '安装' },
    ],
  },
  {
    text: '组件',
    href: '/docs/components',
    items: [
      { href: '/docs/components/button', text: 'Button 按钮' },
      { href: '/docs/components/card', text: 'Card 卡片' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '应用布局示例',
    description: '这是一个应用布局的示例页面',
    keywords: '布局,示例,应用布局',
    author: 'CofficLab',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
    astroI18n: astroI18n,
  }}
  footerConfig={{
    siteName: '我的文档站点',
    homeLink: '/',
    slogan: '简单而强大的组件库',
    company: 'CofficLab',
    copyright: '保留所有权利',
    inspirationalSlogan: '让开发更加愉悦',
  }}
  mainContentConfig={{
    padding: 'md',
    verticalPadding: '4xl',
  }}>
  <Container size="lg">
    <Heading level={1} margin="none">欢迎使用应用布局</Heading>
    <p>这是一个包含侧边栏、头部和页脚的完整布局示例。</p>
    <p>应用布局适合用于文档站点、管理后台等场景。</p>
  </Container>
</AppLayout>

debug

Whether to enable debug mode, showing borders for each section.

调试模式示例
logo

调试模式

调试模式示例

启用调试模式后，您可以看到各个布局区域的边框。

这对于开发时调整布局非常有帮助。

---
import { AppLayout, Heading, Alert } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '调试模式',
    href: '/debug',
    items: [
      { href: '/debug/layout', text: '布局调试' },
      { href: '/debug/components', text: '组件调试' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '调试模式示例',
    description: '展示AppLayout的调试模式功能',
    keywords: '调试,布局,开发',
    author: 'Developer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '调试示例',
    homeLink: '/',
    slogan: '开发调试工具',
    company: 'Dev Team',
    copyright: '2024 调试示例',
    inspirationalSlogan: '让调试更加高效',
  }}
  mainContentConfig={{
    padding: 'md',
  }}
  debug={true}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 调试模式示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      启用调试模式后，您可以看到各个布局区域的边框。
    </p>
    <p style="margin-bottom: 0.5rem;">这对于开发时调整布局非常有帮助。</p>
    <Alert type="info" title="调试信息" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <li>头部区域：显示导航栏和搜索功能</li>
        <li>侧边栏：显示导航菜单</li>
        <li>主内容区：显示页面主要内容</li>
        <li>页脚：显示站点信息和链接</li>
      </ul>
    </Alert>
  </div>
</AppLayout>

footerConfig

Footer configuration, including site information, social media links, etc.

页脚配置示例
logo

页脚配置

页脚配置示例

这个示例展示了如何配置页脚的各种属性。

---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '页脚配置',
    href: '/footer',
    items: [
      { href: '/footer/basic', text: '基础页脚' },
      { href: '/footer/advanced', text: '高级页脚' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '页脚配置示例',
    description: '展示AppLayout的页脚配置功能',
    keywords: '页脚,配置,布局',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '页脚配置示例',
    homeLink: '/',
    slogan: '完整的页脚配置展示',
    company: 'Footer Demo',
    copyright: '2024 页脚示例',
    inspirationalSlogan: '让页脚更加美观',
    socialLinks: [
      'https://github.com/footer-demo',
      'https://twitter.com/footer_demo',
      'https://linkedin.com/company/footer-demo',
    ],
  }}
  mainContentConfig={{
    padding: 'md',
  }}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 页脚配置示例 </Heading>
    <p style="margin-bottom: 0.5rem;">这个示例展示了如何配置页脚的各种属性。</p>
    <Alert type="success" title="配置的页脚属性" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>siteName: 站点名称</ListItem>
        <ListItem>homeLink: 首页链接</ListItem>
        <ListItem>slogan: 站点口号</ListItem>
        <ListItem>company: 公司名称</ListItem>
        <ListItem>copyright: 版权信息</ListItem>
        <ListItem>inspirationalSlogan: 激励口号</ListItem>
        <ListItem>socialLinks: 社交媒体链接</ListItem>
      </ul>
    </Alert>
  </div>
</AppLayout>

headerConfig

Header configuration, passed to the AppHeader component.

头部配置示例
logo

头部配置

头部配置示例

这个示例展示了如何配置头部的各种属性。

头部高度选项

  • 3xs: 最小高度
  • 2xs: 较小高度
  • xs: 小高度
  • sm: 较小高度
  • md: 中等高度 (默认)
  • lg: 大高度
  • xl: 最大高度
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '头部配置',
    href: '/header',
    items: [
      { href: '/header/height', text: '头部高度' },
      { href: '/header/sticky', text: '粘性头部' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '头部配置示例',
    description: '展示AppLayout的头部配置功能',
    keywords: '头部,配置,导航',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'lg',
    sticky: false,
  }}
  footerConfig={{
    siteName: '头部配置示例',
    homeLink: '/',
    slogan: '头部配置展示',
    company: 'Header Demo',
    copyright: '2024 头部配置示例',
    inspirationalSlogan: '让头部更加美观',
  }}
  mainContentConfig={{
    padding: 'md',
  }}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 头部配置示例 </Heading>
    <p style="margin-bottom: 0.5rem;">这个示例展示了如何配置头部的各种属性。</p>
    <Alert type="warning" title="配置的头部属性" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>height: 头部高度 (lg)</ListItem>
        <ListItem>sticky: 粘性头部 (true)</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 头部高度选项 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>3xs: 最小高度</ListItem>
        <ListItem>2xs: 较小高度</ListItem>
        <ListItem>xs: 小高度</ListItem>
        <ListItem>sm: 较小高度</ListItem>
        <ListItem>md: 中等高度 (默认)</ListItem>
        <ListItem>lg: 大高度</ListItem>
        <ListItem>xl: 最大高度</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

loadingDelay

The delay time (in milliseconds) for displaying the loading interface.

加载延迟示例
logo

加载延迟

加载延迟示例

这个示例设置了2秒的加载延迟，您可以看到骨架屏效果。

延迟时间建议

  • 0-100ms: 立即显示，适合快速加载
  • 100-500ms: 短延迟，避免闪烁
  • 500-2000ms: 中等延迟，显示骨架屏
  • 2000ms+: 长延迟，适合复杂内容
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '加载延迟',
    href: '/loading',
    items: [
      { href: '/loading/delay', text: '延迟设置' },
      { href: '/loading/skeleton', text: '骨架屏' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '加载延迟示例',
    description: '展示AppLayout的加载延迟功能',
    keywords: '加载,延迟,骨架屏',
    author: 'Developer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '加载延迟示例',
    homeLink: '/',
    slogan: '加载延迟展示',
    company: 'Loading Demo',
    copyright: '2024 加载延迟示例',
    inspirationalSlogan: '让加载更加流畅',
  }}
  mainContentConfig={{
    padding: 'md',
  }}
  loadingDelay={2000}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 加载延迟示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例设置了2秒的加载延迟，您可以看到骨架屏效果。
    </p>
    <Alert type="error" title="加载延迟配置" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>loadingDelay: 2000 (毫秒)</ListItem>
        <ListItem>在内容加载前显示骨架屏</ListItem>
        <ListItem>提升用户体验</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 延迟时间建议 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>0-100ms: 立即显示，适合快速加载</ListItem>
        <ListItem>100-500ms: 短延迟，避免闪烁</ListItem>
        <ListItem>500-2000ms: 中等延迟，显示骨架屏</ListItem>
        <ListItem>2000ms+: 长延迟，适合复杂内容</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

mainContentConfig

Main content area configuration.

主内容配置示例
logo

主内容配置

全宽Hero部分

没有容器限制，宽度可以100%占满

主内容配置示例

这个示例展示了如何配置主内容区域的各种属性。

配置的主内容属性

  • padding: lg (大内边距)

灵活的布局

您可以自由组合全宽区域和容器限制区域

---
import { AppLayout, Heading, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '主内容配置',
    href: '/main',
    items: [
      { href: '/main/padding', text: '内边距' },
      { href: '/main/fullwidth', text: '全宽模式' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '主内容配置示例',
    description: '展示AppLayout的主内容配置功能',
    keywords: '主内容,配置,布局',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '主内容配置示例',
    homeLink: '/',
    slogan: '主内容配置展示',
    company: 'Main Demo',
    copyright: '2024 主内容配置示例',
    inspirationalSlogan: '让内容更加美观',
  }}
  mainContentConfig={{
    padding: 'lg',
  }}>
  <!-- 全宽Hero部分 -->
  <div
    style="background-color: #3b82f6; color: white; padding: 2.5rem; text-align: center;">
    <Heading level={1} align="center" margin="none"> 全宽Hero部分 </Heading>
    <p style="font-size: 1.125rem;">没有容器限制，宽度可以100%占满</p>
  </div>

  <!-- 自定义容器部分 -->
  <div style="margin: 0 auto; padding: 1.5rem; max-width: 1200px;">
    <Heading level={2} margin="none"> 主内容配置示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何配置主内容区域的各种属性。
    </p>
    <div
      style="border: 1px solid #10b981; padding: 1rem; border-radius: 0.375rem; margin-top: 1rem;">
      <Heading level={3} margin="none"> 配置的主内容属性 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>padding: lg (大内边距)</ListItem>
      </ul>
    </div>
  </div>

  <!-- 另一个全宽部分 -->
  <div style="background-color: #f59e0b; margin-top: 2rem; padding: 2.5rem;">
    <div style="margin: 0 auto; max-width: 1200px;">
      <Heading level={2} align="center" margin="none"> 灵活的布局 </Heading>
      <p>您可以自由组合全宽区域和容器限制区域</p>
    </div>
  </div>
</AppLayout>

metaConfig

Metadata configuration, including page title, description, etc.

元数据配置示例
logo

元数据配置

元数据配置示例

这个示例展示了如何配置页面的元数据信息。

SEO优化建议

  • title: 50-60字符，包含关键词
  • description: 150-160字符，吸引点击
  • keywords: 相关关键词，用逗号分隔
  • robots: 控制搜索引擎爬虫行为
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';
import Logo from '@/assets/favicon.png';

const sidebarItems: ISidebarItem[] = [
  {
    text: '元数据配置',
    href: '/meta',
    items: [
      { href: '/meta/basic', text: '基础元数据' },
      { href: '/meta/advanced', text: '高级元数据' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '元数据配置示例',
    description: '展示AppLayout的元数据配置功能，包含完整的SEO信息',
    keywords: '元数据,SEO,配置,布局',
    author: 'SEO Expert',
    robots: 'index,follow',
    favicon: Logo,
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '元数据配置示例',
    homeLink: '/',
    slogan: '元数据配置展示',
    company: 'Meta Demo',
    copyright: '2024 元数据配置示例',
    inspirationalSlogan: '让SEO更加优化',
  }}
  mainContentConfig={{
    padding: 'md',
  }}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 元数据配置示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何配置页面的元数据信息。
    </p>
    <Alert type="info" title="配置的元数据属性" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>title: 页面标题</ListItem>
        <ListItem>description: 页面描述</ListItem>
        <ListItem>keywords: 关键词</ListItem>
        <ListItem>author: 作者</ListItem>
        <ListItem>robots: 搜索引擎指令</ListItem>
        <ListItem>favicon: 网站图标</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> SEO优化建议 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>title: 50-60字符，包含关键词</ListItem>
        <ListItem>description: 150-160字符，吸引点击</ListItem>
        <ListItem>keywords: 相关关键词，用逗号分隔</ListItem>
        <ListItem>robots: 控制搜索引擎爬虫行为</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

showFooter

Whether to show the footer.

页脚显示控制示例
logo

显示控制

页脚显示控制示例

这个示例展示了如何控制页脚的显示和隐藏。

使用场景

  • showFooter=false: 适合全屏应用
  • showHeader=false: 适合简洁页面
  • showSidebar=false: 适合单页应用
  • 全部为false: 适合自定义布局
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '显示控制',
    href: '/show',
    items: [
      { href: '/show/header', text: '显示头部' },
      { href: '/show/sidebar', text: '显示侧边栏' },
      { href: '/show/footer', text: '显示页脚' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '页脚显示控制示例',
    description: '展示AppLayout的页脚显示控制功能',
    keywords: '页脚,显示,控制,布局',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '页脚显示控制示例',
    homeLink: '/',
    slogan: '页脚显示控制展示',
    company: 'Show Demo',
    copyright: '2024 页脚显示控制示例',
    inspirationalSlogan: '让布局更加灵活',
  }}
  mainContentConfig={{
    padding: 'md',
  }}
  showFooter={true}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 页脚显示控制示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何控制页脚的显示和隐藏。
    </p>
    <Alert type="info" title="显示控制属性" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showFooter: true (显示页脚)</ListItem>
        <ListItem>showHeader: true (显示头部)</ListItem>
        <ListItem>showSidebar: true (显示侧边栏)</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 使用场景 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showFooter=false: 适合全屏应用</ListItem>
        <ListItem>showHeader=false: 适合简洁页面</ListItem>
        <ListItem>showSidebar=false: 适合单页应用</ListItem>
        <ListItem>全部为false: 适合自定义布局</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

showHeader

Whether to show the header.

头部显示控制示例
logo

头部控制

头部显示控制示例

这个示例展示了如何控制头部的显示和隐藏。

使用场景

  • showHeader=true: 适合需要导航的页面
  • showHeader=false: 适合全屏应用或简洁页面
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '头部控制',
    href: '/header',
    items: [
      { href: '/header/show', text: '显示头部' },
      { href: '/header/hide', text: '隐藏头部' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '头部显示控制示例',
    description: '展示AppLayout的头部显示控制功能',
    keywords: '头部,显示,控制,导航',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '头部显示控制示例',
    homeLink: '/',
    slogan: '头部显示控制展示',
    company: 'Header Demo',
    copyright: '2024 头部显示控制示例',
    inspirationalSlogan: '让导航更加灵活',
  }}
  mainContentConfig={{
    padding: 'md',
  }}
  showHeader={true}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 头部显示控制示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何控制头部的显示和隐藏。
    </p>
    <Alert type="warning" title="头部控制选项" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showHeader: true (显示头部)</ListItem>
        <ListItem>showHeader: false (隐藏头部)</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 使用场景 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showHeader=true: 适合需要导航的页面</ListItem>
        <ListItem>showHeader=false: 适合全屏应用或简洁页面</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

showSidebar

Whether to show the sidebar.

侧边栏显示控制示例
logo

侧边栏控制

侧边栏显示控制示例

这个示例展示了如何控制侧边栏的显示和隐藏。

使用场景

  • showSidebar=true: 适合需要导航的文档站点
  • showSidebar=false: 适合单页应用或简洁页面
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '侧边栏控制',
    href: '/sidebar',
    items: [
      { href: '/sidebar/show', text: '显示侧边栏' },
      { href: '/sidebar/hide', text: '隐藏侧边栏' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '侧边栏显示控制示例',
    description: '展示AppLayout的侧边栏显示控制功能',
    keywords: '侧边栏,显示,控制,导航',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '侧边栏显示控制示例',
    homeLink: '/',
    slogan: '侧边栏显示控制展示',
    company: 'Sidebar Demo',
    copyright: '2024 侧边栏显示控制示例',
    inspirationalSlogan: '让导航更加灵活',
  }}
  mainContentConfig={{
    padding: 'md',
  }}
  showSidebar={true}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 侧边栏显示控制示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何控制侧边栏的显示和隐藏。
    </p>
    <Alert type="success" title="侧边栏控制选项" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showSidebar: true (显示侧边栏)</ListItem>
        <ListItem>showSidebar: false (隐藏侧边栏)</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 使用场景 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>showSidebar=true: 适合需要导航的文档站点</ListItem>
        <ListItem>showSidebar=false: 适合单页应用或简洁页面</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

sidebarConfig

Sidebar configuration, including navigation items, etc.

侧边栏配置示例
logo

侧边栏配置

侧边栏配置示例

这个示例展示了如何配置侧边栏的导航结构。

导航结构建议

  • 层次清晰：不超过3层嵌套
  • 分类明确：相关内容归类
  • 命名一致：使用统一的命名规范
  • 链接有效：确保所有链接可访问
---
import { AppLayout, Heading, Alert, ListItem } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '侧边栏配置',
    href: '/sidebar',
    items: [
      { href: '/sidebar/basic', text: '基础侧边栏' },
      { href: '/sidebar/nested', text: '嵌套菜单' },
      { href: '/sidebar/custom', text: '自定义样式' },
    ],
  },
  {
    text: '组件库',
    href: '/components',
    items: [
      { href: '/components/buttons', text: '按钮组件' },
      { href: '/components/forms', text: '表单组件' },
      { href: '/components/layout', text: '布局组件' },
      { href: '/components/navigation', text: '导航组件' },
    ],
  },
  {
    text: '文档',
    href: '/docs',
    items: [
      { href: '/docs/getting-started', text: '快速开始' },
      { href: '/docs/installation', text: '安装指南' },
      { href: '/docs/tutorial', text: '教程' },
      { href: '/docs/api', text: 'API参考' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '侧边栏配置示例',
    description: '展示AppLayout的侧边栏配置功能',
    keywords: '侧边栏,配置,导航,菜单',
    author: 'Designer',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
    sticky: false,
  }}
  footerConfig={{
    siteName: '侧边栏配置示例',
    homeLink: '/',
    slogan: '侧边栏配置展示',
    company: 'Sidebar Demo',
    copyright: '2024 侧边栏配置示例',
    inspirationalSlogan: '让导航更加清晰',
  }}
  mainContentConfig={{
    padding: 'md',
  }}>
  <div style="padding: 1rem;">
    <Heading level={1} margin="none"> 侧边栏配置示例 </Heading>
    <p style="margin-bottom: 0.5rem;">
      这个示例展示了如何配置侧边栏的导航结构。
    </p>
    <Alert type="warning" title="配置的侧边栏结构" marginY="md">
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>侧边栏配置：包含3个主要分组</ListItem>
        <ListItem>嵌套菜单：支持多级导航</ListItem>
        <ListItem>响应式设计：移动端自动隐藏</ListItem>
      </ul>
    </Alert>
    <div style="margin-top: 2rem;">
      <Heading level={2} margin="sm"> 导航结构建议 </Heading>
      <ul style="list-style-type: disc; margin-left: 1rem;">
        <ListItem>层次清晰：不超过3层嵌套</ListItem>
        <ListItem>分类明确：相关内容归类</ListItem>
        <ListItem>命名一致：使用统一的命名规范</ListItem>
        <ListItem>链接有效：确保所有链接可访问</ListItem>
      </ul>
    </div>
  </div>
</AppLayout>

搜索