logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

定制 Next 页面的布局(Layout)

  • Nex G S应用的页面需要共享一些界面,如应用标志、导航栏等,可以各自定制布局。
  • Nex G S在'app'目录下创建了默认布局文件layout,作为应用的根布局,所有页面都会使用这个必须的布局。
  • 布局文件中定义了一个t layout组件,其中必须包含children属性以显示页面内容。
  • 布局使用了HTML元素,包括head组件输出页面head标签内容,以及包元素绑定children。
  • 布局组件可以修改,定义类型root layout props包含children属性(React node类型)用于绑定输出或直接结构使用。
  • 可进一步改造布局视图,给children添加包装元素,使用main标签和其他元素如header,用于显示表情符号和文字说明。
  • 修改后的布局将在页面顶部显示应用首页标志、表情符号及相关文字。