DAY08- 初步完成網頁layout

2023 iThome 鐵人賽

DAY 8

自我挑戰組

中年大叔(40+)前端自學筆記系列第 8 篇

15th鐵人賽中年大叔自學筆記萬年菜雞

不惑的胖虎

2023-09-23 00:26:46

179 瀏覽

分享至

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

執行結果圖: