iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0

編輯 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>
    )
}

執行結果圖:
圖片


大叔的鐵人賽第八天結束 :)


上一篇
DAY07- 在Next.js的專案中使用Tailwind CSS
下一篇
DAY09- 自訂可重複使用的組件(components)
系列文
中年大叔(40+)前端自學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言