在專案的根目錄下建立 public\images 資料夾
找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片)
接著在 app\reviews\ 底下遊戲資料page 都加上圖片
編輯 app\reviews\hollow-knight\page.jsx 檔案內容如下(其他page比照辦理)
import Heading from "@/components/heading"
function HollowKnightPage() {
return (
<div>
<Heading>Hollow Knight</Heading>
<img src="/images/hollow-knight.jpg" alt="" width="640" height="360"
className="mb-2 rounded" />
<p>This will be the reviews for Hollow Knight</p>
</div>
)
}
export default HollowKnightPage
執行畫面1:
執行畫面2:
編輯 app\reviews\page.jsx 檔案內容如下:
import Link from "next/link"
import Heading from "@/components/heading"
function ReviewsPage() {
return (
<div>
<Heading>Reviews</Heading>
<ul className="flex flex-col gap-3">
<li className="border w-80 bg-white shadow hover:shadow-xl">
<Link href="/reviews/hollow-knight">
<img src="/images/hollow-knight.jpg" alt="" width="320" height="180"
className="rounded-t" />
<h2 className="text-center py-1">Hollow Knight</h2>
</Link>
</li>
<li className="border w-80 bg-white shadow hover:shadow-xl">
<Link href="/reviews/stardew-valley">
<img src="/images/stardew-valley.jpg" alt="" width="320" height="180"
className="rounded-t" />
<h2 className="text-center py-1">Stardew Valley</h2>
</Link>
</li>
<li className="border w-80 bg-white shadow hover:shadow-xl">
<Link href="/reviews/hellblade">
<img src="/images/hellblade.jpg" alt="" width="320" height="180"
className="rounded-t" />
<h2 className="text-center py-1">Hellblade</h2>
</Link>
</li>
</ul>
</div>
)
}
export default ReviewsPage
執行畫面:
今天是9/15,這兩天寫完10天的存檔,明天9/16是開賽期限的最後一天,希望這次可以順利地完成鐵人賽
大叔的鐵人賽第十天結束 :)