nextjs 实战开发2 Mercury Header头组件开发
上期文章说到，我们已经梳理出开发的流程，并且将脚手架搭建好，本篇文章将对header头组件进行开发。
编写前的准备工作
首先需要把脚手架的page.tsx默认页面进行重置，使其不干扰我们的开发进程，编辑 /app/page.tsx
export default function Home() {
return <div>Hello World</div>;
}
创建components文件夹，用于存放一些常见的组件tsx文件，在创建号的文件夹中，我们创建/app/components/Header.tsx文件。
export default function Header() {
return <div>这里是头文件</div>;
}
并且在/app/layout.tsx中导入头模块，这样就能在所有页面中显示网站的页眉了。
提示 - 为什么Header放在RootLayout中能够全局显示 ?
在 Next.js 中，layout.tsx文件具有特殊的作用，它是一个布局组件，用于定义在多个页面之间共享的 UI，让我解释为什么<Header />会全局显示？
- 布局组件的工作原理
- layout.tsx 是一个"包装器"组件，它会包裹所有的页面内容
- children 属性代表了所有子页面的内容
- 放在 children 之外的组件会在所有页面中保持不变
- 渲染流程
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<Header /> {/* 固定在布局中，所有页面都会显示 */}
{children} {/* 这里会渲染各个页面的具体内容 */}
</body>
</html>
);
}
- 工作方式
- 当用户访问任何页面时，Next.js会首先渲染
layout.tsx将具体页面的内容作为 children 插入到布局中，<Header />因为在布局中且在 children 之外，所以会始终显示。
这就像一个固定的框架，<Header/>是框架的一部分，而 children 是框架中不断变化的内容。
基础布局实现
首先，我们观察到页眉组件有 logo、link、button，要实现这些功能，nextjs提供了一套组件进行调用。
import Image from "next/image";
import Link from "next/link";
首先我们要把页眉的轮廓画出来，通过 Tailwind CSS 进行优化
<header className="fixed top-0 left-0 right-0 bg-white z-10 shadow-md">
<p>这里是头文件</p>
</header>
-
fixed
- 使元素固定定位
- 元素会脱离正常文档流
- 即使页面滚动，header 也会固定在视窗顶部
-
top-0 left-0 right-0
- top-0: 距离顶部 0 像素
- left-0: 距离左侧 0 像素
- right-0: 距离右侧 0 像素
- 这三个属性组合使 header 横向铺满整个屏幕
-
bg-white
- 设置背景色为白色
-
z-10
- 设置 z-index 为 10
- 控制元素的层叠顺序，确保 header 显示在其他内容之上
-
shadow-md
- 添加中等大小的阴影效果
- 使 header 看起来有立体感，与内容区分开
继续优化页眉内容，我们将标题最大位置限制在1280px的范围内，这样可以让在大屏幕上的内容居中显示。
接下来我们将页眉进行优化，让内容平衡分配和高度对其，并且扩大页眉的高度
这样一来，我们可以观察到基本布局以及和完整版本的一致了，因此后面就是对布局的每个部分进行优化即可。
如果喜欢我的文章请百度搜索：曲速引擎 warp drive csdn 在首页找到我的技术博客访问地址，所有内容都将在我的技术博客上展示，比起其他平台更容易搜索完整版本。
更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
