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