你的导航页真酷，想问一下你的导航页是如何实现的？

[shirayner]

https://kuizuo.cn/resource

[kuizuo]

这里我想你可能要问的是数据部分是如何渲染的，首先我在 data/resource.ts 定义了所有相关资源的信息，例如

{
    name: '每周必刷🔥',
    resources: [
      {
        name: '稀土掘金',
        desc: '稀土掘金是一个技术博客平台，是程序员发布自己的技术文章、分享知识的地方',
        logo: '/img/resource/juejin.png',
        href: 'https://juejin.cn/',
      },
      {
        name: 'OSS Insight',
        desc: 'Open Source Software Insight',
        logo: '/img/resource/ossinsight.png',
        href: 'https://ossinsight.io/',
      },
      // ...
    ],
  },

定义完每个分组(分组名,资源列表)就可以开始进行组件渲染部分。 这个文件 pages/resource/index.tsx 会自动生成 resource路由，这样你访问 /resource 就能够得到这个页面渲染的结果了。

主要的核心就两部分代码一个是整个页面的代码，另一个是单项卡片的代码。剩余的部分就是css装饰了，这其实就没什么好说的了，就使用到了 CSS Module 限制作用域。