Footer

基础页脚

最简单的 Footer 使用方式,展示网站名称、标语和版权信息

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
/>

带有 Logo 的页脚

通过 logo 属性添加网站 Logo

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
logo={{ src: "https://via.placeholder.com/100", alt: "网站Logo" }}
/>

带有社交媒体链接的页脚

通过 socialLinks 属性添加社交媒体链接

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
socialLinks={[
  "https://github.com/myusername",
  "https://twitter.com/myusername",
  "https://linkedin.com/in/myusername"
]}
/>

带有产品链接的页脚

通过 products 属性添加产品链接

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
products={[
  { name: "产品A", href: "/products/a" },
  { name: "产品B", href: "/products/b" },
  { name: "产品C", href: "/products/c", external: true }
]}
/>

带有导航链接的页脚

通过各种链接属性添加导航链接

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

带有鼓舞人心标语的页脚

通过 inspirationalSlogan 属性添加鼓舞人心的标语,显示在横幅中

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

带有 ICP 备案号的页脚

通过 icp 属性添加 ICP 备案号(中国网站需要)

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
icp="京ICP备12345678号-1"
/>

完整示例

展示 Footer 组件的多种属性组合使用

<Footer 
siteName="我的网站"
homeLink="/"
slogan="简单而强大"
company="我的公司"
copyright="保留所有权利"
inspirationalSlogan="构建美好的数字体验"
logo={{ src: "https://via.placeholder.com/100", alt: "网站Logo" }}
products={[
  { name: "产品A", href: "/products/a" },
  { name: "产品B", href: "/products/b" }
]}
socialLinks={[
  "https://github.com/myusername",
  "https://twitter.com/myusername"
]}
aboutLink="/about"
contactLink="/contact"
termsLink="/terms"
privacyLink="/privacy"
teamLink="/team"
careersLink="/careers"
newsLink="/news"
blogLink="/blog"
faqLink="/faq"
icp="京ICP备12345678号-1"
/>