Footer

Introduction

The Footer component is used to create the footer section of websites, providing copyright information, navigation links, social media links, and other content. This component supports high customization and can display or hide different sections as needed.

Component features:

Clear information hierarchy - Displays different categories of footer information through visual hierarchy and grouping
Responsive layout - Maintains good usability and aesthetics across different screen sizes
Customizability - Supports various configuration options to adapt to different website needs
Brand consistency - Maintains consistency with the overall website design style
Multi-language support - Supports display in multiple languages, automatically detecting the current language environment
Social media integration - Provides display of social media links
Product link display - Can add product link lists
Logo display - Supports adding website logos

Basic Usage

The simplest footer usage, including website name, tagline, company name, and copyright information:

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

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

Add social media links, supporting various social platforms:

              ---
/**
 * @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',
  ]}
/>

Product Links

Add product link lists, supporting both internal and external links:

              ---
/**
 * @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 Display

Add website logo to enhance brand recognition:

              ---
/**
 * @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',
  }}
/>

Add various navigation links, such as About Us, Contact Us, Terms of Service, etc.:

              ---
/**
 * @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"
/>

Complete Example

A complete footer example combining all features:

              ---
/**
 * @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号"
/>

Feature Showcase

View a comprehensive showcase of all footer features:

              ---
/**
 * @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"
/>