一直眼馋木木大佬，Heo大佬博客上的装备页面，这个页面用来展现自己的好物以及数码设备，虽然说实用价值不大，但是这逼格一定要拉满，我的博客不能没有，于是弄了两个小时，最后成功，先看效果图：

在你的 Next.js 博客项目中，创建一个新的页面文件 

，并将以下代码粘贴到该文件中。

import { NextPage } from "next"
import ListLayout from "../components/layout/ListLayout"
import { FC } from "react"
import Image from 'next/image'

interface DeviceType {
    name: string;
    img: string;
    description: string;
}

const devices: DeviceType[] = [
    {
        name: "小米 12X",
        img: "图片地址",
        description: "好用，小巧次旗舰，小团子送我的！我要用好久！。"
    },
    {
        name: "荣耀手环6",
        img: "图片地址",
        description: "计步，血氧，睡眠，NFC 通通都有，表盘漂亮。"
    },
    // 添加更多设备信息
]

const DeviceCard: FC<DeviceType> = ({ name, img, description }) => {
    return (
        <div className="transition duration-200 ease-in-out transform bg-white shadow-lg rounded-3xl hover:scale-105 dark:bg-true-gray-900">
            <div className="relative w-full h-40 bg-true-gray-0 rounded-t-3xl overflow-hidden dark:bg-true-gray-900">
                <Image layout='fill' objectFit="cover" src={img} alt={name} className="object-cover" />
            </div>
            <div className="flex flex-col items-center justify-between h-full p-5">
                <div className="text-center">
                    <p className="leading-4 dark:text-white">{name}</p>
                    <div className="mt-3 text-xs text-true-gray-400 dark:text-true-gray-300">
                        {description}
                    </div>
                </div>
            </div>
        </div>
    )
}

const Devices: NextPage = () => {

    return (
        <ListLayout>
            <h1 className="mb-4 text-2xl font-bold md:text-3xl lg:mb-8 dark:text-white">我的装备📱</h1>
            <div className="grid grid-cols-2 gap-4 my-6 md:grid-cols-4 lg:grid-cols-5">
                {devices.map((device: DeviceType) => <DeviceCard key={device.name} {...device} />)}
            </div>
        </ListLayout>
    )
}

export default Devices

如果使用的是外部图片链接，则不需要将图片添加到 

 属性包含正确的外部图片 URL。

 目录，编辑此文件，在15行引用图标：

import DeviceIcon from '../assets/device.svg'

{
    name: '装备',
    link: '/devices',
    icon: <DeviceIcon />,
    color: Colors['green'].text.normal,
    width: 'group-hover:w-9.5',
  }

完成这些步骤后，你应该能够在网站上访问并查看展示你数码设备的新页面了。确保图片链接有效，并且 

 文件正确配置以允许加载外部图片。如果有更多设备需要展示，可以继续在 

为你的博客加入装备页面！

为你的博客加入说说功能

Zotero:免费且开源的论文阅读神器

为博客加入翻转公众号挂件

趣玩系列：坤坤鉴定器

前言

折腾过程

添加新页面

添加图片资源

导航栏集成