ShipNow LogoShipNow

Header

一个响应式的头部组件，包含 Logo、导航链接和身份验证功能

预览

Header 组件

功能特点

  • 🎨 响应式设计，支持移动端菜单
  • 🔐 内置身份验证集成
  • 🌐 语言切换功能
  • 🎭 暗色/亮色主题切换
  • 💳 已登录用户的积分显示
  • 📱 移动端友好的汉堡菜单

使用方法

在你的页面中导入并使用 Header 组件：

page.tsx
import Header from '@/components/header';
 
export default function Page({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}

自定义应用名称

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

NEXT_PUBLIC_APP_NAME="你的应用名称"

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

自定义导航链接

你可以通过在 messages/zh.json 语言文件中设置 header.links 来更改导航链接。

messages/zh.json
{
  "header": {
    "links": [
      { "title": "功能", "href": "/features" },
      { "title": "定价", "href": "/pricing" },
      { "title": "文档", "href": "/docs" }
    ]
  }
}

用户中心

学习如何自定义和扩展 ShipNow 用户中心（Dashboard），包括菜单、新页面和添加表格。

Logo Cloud

一个响应式 Logo 展示组件，用于展示技术栈或合作伙伴，并支持深色模式

On this page

ShipNow Logo获取 ShipNow