logo
简体中文
导航

Footer

简介

Footer 组件用于创建网站的页脚部分，提供版权信息、导航链接和社交媒体链接等内容。该组件支持高度自定义，可以根据需要显示或隐藏不同的部分。

组件特性：

  • 清晰的信息层次 - 通过视觉层次和分组展示不同类别的页脚信息
  • 响应式布局 - 在不同屏幕尺寸下保持良好的可用性和美观性
  • 可定制性 - 支持多种配置选项，适应不同网站的需求
  • 品牌一致性 - 与网站整体设计风格保持一致
  • 多语言支持 - 支持多种语言显示，自动检测当前语言环境
  • 社交媒体整合 - 提供社交媒体链接的展示
  • 产品链接展示 - 可添加产品链接列表
  • Logo 展示 - 支持添加网站 Logo

基础用法

最简单的页脚用法，包含网站名称、标语、公司名称和版权信息：

              ---
/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
/>

社交媒体链接

添加社交媒体链接，支持多种社交平台：

              ---
/**
 * @component Footer.WithSocial
 *
 * @description
 * 展示带有社交媒体链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
    'https://linkedin.com/in/myusername',
    'https://facebook.com/myusername',
  ]}
/>

产品链接

添加产品链接列表，支持内部和外部链接：

              ---
/**
 * @component Footer.WithProducts
 *
 * @description
 * 展示带有产品链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  products={[
    { name: '产品A', href: '/products/a' },
    { name: '产品B', href: '/products/b' },
    { name: '产品C', href: '/products/c' },
    { name: '外部产品', href: 'https://example.com', external: true },
  ]}
/>

Logo 展示

添加网站 Logo，增强品牌识别度：

              ---
/**
 * @component Footer.WithLogo
 *
 * @description
 * 展示带有Logo的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  logo={{
    src: getExampleImage({
      width: 100,
      height: 100,
      provider: 'robohash',
      tag: 'logo',
    }),
    alt: '网站Logo',
  }}
/>

导航链接

添加各种导航链接，如关于我们、联系我们、服务条款等：

              ---
/**
 * @component Footer.WithNavigation
 *
 * @description
 * 展示带有导航链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  aboutLink="/about"
  contactLink="/contact"
  termsLink="/terms"
  privacyLink="/privacy"
  blogLink="/blog"
  faqLink="/faq"
/>

完整示例

结合所有功能的完整页脚示例：

              ---
/**
 * @component Footer.Complete
 *
 * @description
 * 展示完整功能的页脚示例，包含所有主要属性。
 */
import { Footer } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  logo={{
    src: getExampleImage({
      width: 100,
      height: 100,
      provider: 'robohash',
      tag: 'logo',
    }),
    alt: '网站Logo',
  }}
  products={[
    { name: '产品A', href: '/products/a' },
    { name: '产品B', href: '/products/b' },
    { name: '产品C', href: '/products/c' },
    { name: '外部产品', href: 'https://example.com', external: true },
  ]}
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
    'https://linkedin.com/in/myusername',
    'https://facebook.com/myusername',
  ]}
  aboutLink="/about"
  contactLink="/contact"
  termsLink="/terms"
  privacyLink="/privacy"
  teamLink="/team"
  careersLink="/careers"
  newsLink="/news"
  blogLink="/blog"
  faqLink="/faq"
  icp="京ICP备12345678号"
/>

功能展示

查看所有页脚功能的综合展示：

              ---
/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
/>

            
              ---
/**
 * @component Footer.WithSocial
 *
 * @description
 * 展示带有社交媒体链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
    'https://linkedin.com/in/myusername',
    'https://facebook.com/myusername',
  ]}
/>

            
              ---
/**
 * @component Footer.WithProducts
 *
 * @description
 * 展示带有产品链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  products={[
    { name: '产品A', href: '/products/a' },
    { name: '产品B', href: '/products/b' },
    { name: '产品C', href: '/products/c' },
    { name: '外部产品', href: 'https://example.com', external: true },
  ]}
/>

            
              ---
/**
 * @component Footer.WithLogo
 *
 * @description
 * 展示带有Logo的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  logo={{
    src: getExampleImage({
      width: 100,
      height: 100,
      provider: 'robohash',
      tag: 'logo',
    }),
    alt: '网站Logo',
  }}
/>

            
              ---
/**
 * @component Footer.WithNavigation
 *
 * @description
 * 展示带有导航链接的页脚示例。
 */
import { Footer } from '@coffic/cosy-ui';
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  aboutLink="/about"
  contactLink="/contact"
  termsLink="/terms"
  privacyLink="/privacy"
  blogLink="/blog"
  faqLink="/faq"
/>