編輯 app\layout.jsx 檔案內容如下:
import Link from "next/link";
import "./globals.css"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="flex flex-col px-4 py-2 min-h-screen">
<header>
<nav>
<ul className="flex gap-2">
<li><Link href="/">Home</Link></li>
<li><Link href="/reviews">Reviews</Link></li>
<li><Link href="/about" prefetch={false}>About</Link></li>
</ul>
</nav>
</header>
<main className="grow py-3">
{children}
</main>
<footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank">RAWG</a></footer>
</body>
</html>
)
}
程式執行圖:
上面可以看到網頁的版面分上中下三層,中間的內容占版面的大部分,頁尾置底
關鍵語法
<body className="flex flex-col min-h-screen">
<main className="grow">
這樣把高度撐到跟螢幕一樣
main 裡面的 grow 把 footer 推到頁面最底下
編輯 components\NavBar.jsx 檔案內容如下:
import Link from "next/link"
function NavBar() {
return (
<nav >
<ul className="flex gap-2">
<li><Link href="/" className="text-orange-800 hover:underline">Home</Link></li>
<li><Link href="/reviews" className="text-orange-800 hover:underline">Reviews</Link></li>
<li><Link href="/about" className="text-orange-800 hover:underline" prefetch={false}>About</Link></li>
</ul>
</nav >
)
}
export default NavBar
編輯 app\layout.jsx 檔案內容如下:
import Link from "next/link";
import NavBar from "../components/NavBar";
import "./globals.css"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="bg-orange-50 flex flex-col px-4 py-2 min-h-screen">
<header>
<NavBar />
</header>
<main className="grow py-3">
{children}
</main>
<footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank" className="text-orange-800 hover:underline">RAWG</a></footer>
</body>
</html>
)
}
執行結果圖:
大叔的鐵人賽第八天結束 :)