Footer

一个响应式页脚组件，包含 logo、导航链接、社交媒体链接和版权信息

预览

页脚组件

功能特点

🎨 响应式网格布局设计
🔗 集成社交媒体链接
📱 移动端友好布局
🌐 多语言支持
📄 动态导航分区
©️ 自定义版权信息

使用方法

在页面中导入并使用页脚组件：

page.tsx

import Footer from '@/components/footer';
 
export default function Page({ children }) {
  return (
    <>
      {children}
      <Footer />
    </>
  );
}

自定义应用名称

您可以通过设置 NEXT_PUBLIC_APP_NAME 环境变量来更改应用名称。

NEXT_PUBLIC_APP_NAME="您的应用名称"

自定义 Logo

您可以通过替换 public/logo.svg 文件来更改 logo。

自定义导航

您可以通过在 messages/zh.json 文件中设置 footer.navs 来自定义导航分区。

messages/zh.json

{
  "footer": {
    "navs": [
      {
        "title": "产品",
        "items": [
          { "name": "功能", "href": "/features" },
          { "name": "价格", "href": "/pricing" }
        ]
      },
      {
        "title": "公司",
        "items": [
          { "name": "关于我们", "href": "/about" },
          { "name": "博客", "href": "/blog" }
        ]
      }
    ]
  }
}

自定义社交链接

您可以通过修改页脚组件中的 socials 数组来自定义社交媒体链接：

const socials = [
  {
    name: 'GitHub',
    href: 'https://github.com/your-repo',
    icon: (props) => <TbBrandGithub {...props} />
  },
  // 添加更多社交链接
];

自定义版权信息

您可以通过在 messages/zh.json 文件中设置 footer.copyright 来自定义版权文本。

messages/zh.json

{
  "footer": {
    "copyright": "© 2024 您的公司名称。保留所有权利。"
  }
}

On this page