Daymd.

导航页面

Daymd 为您提供了个人导航库。您可以在里面收藏自己喜爱的站点。

#启用

在 API 中设置 navItems 中添加一条 Nav 的数据，或者在页脚中添加 Nav 的数据。

navItems: [
    // ...
    {
      name: 'Nav',
      to: '/website',
    },
    // ...可以继续添加
],

#数据添加

导航页面有独立的数据管理页面，您可以在这里添加数据。目标文件夹是 /navData。

#友链

打开文件 navData/friend.ts 在里面添加友链数据。

示例数据：

export const Friends: Friend[] = [
  {
    title: "Jetzihan",
    description: "Daymd 作者的个人网站",
    website: "https://jetzihan.netlify.app/",
    avatar: "https://avatars.githubusercontent.com/u/83146544?v=4",
  },
  {
    title: "小张的博客",
    description: "小张的个人网站",
    website: "https://example.com",
    avatar: "https://avatars.githubusercontent.com/u/83146544?v=4",
  },
  // ...
];

方括号中可以包含无数条数据，每条数据都是一个 Friend 类型的对象。每条数据包含四个字段, 分别是:title, description, website, avatar。分别用来指明站点名称、描述、站点地址、头像地址。

#站点收藏

打开文件 navData/website.ts 在里面添加站点数据。它可以被分成各个类别，各个类别为一条数据，你可以在 WebsiteCategory 后面的方括号中添加数据。

export const websiteData: WebsiteCategory[] = [
  // ...
  {
    name: "工具",
    websites: [
      {
        name: "CodePen",
        desc: "前端创意大本营",
        logo: "https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico",
        href: "https://codepen.io/",
        tags: ["在线编码", "开发平台"],
      },
      {
        name: "Codesandbox",
        desc: "在线编码代码沙盒",
        logo: "https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/20220806212946.png",
        href: "https://codesandbox.io/?from-app=1",
        tags: ["在线编码", "开发平台"],
      },
      {
        name: "stackblitz",
        desc: "针对 Web 开发者的在线 IDE",
        logo: "https://c.staticblitz.com/assets/pwa-icon-f559737e5eae9b3544e5cc1291118bf758ee20873d496f1ce2052859fb3b72d6.png",
        href: "https://stackblitz.com/",
        tags: ["在线编码", "开发平台"],
      },
    ],
  },
  // ....
]

以上是一个类别的示例，每个类别包含两个字段，分别是 name 和 websites。name 是类别的名称，websites 是一个数组，包含了类别下的站点数据。每个站点数据又包含五个字段，分别是 name, desc, logo, href, tags。分别用于指明站点的名称、描述、站点的 logo 地址、站点的地址、站点的标签。

{
    name: "stackblitz",
    desc: "针对 Web 开发者的在线 IDE",
    logo: "https://c.staticblitz.com/assets/pwa-icon-f559737e5eae9b3544e5cc1291118bf758ee20873d496f1ce2052859fb3b72d6.png",
    href: "https://stackblitz.com/",
    tags: ["在线编码", "开发平台"],
},

上述工具类别的数据渲染成果如下：

1

提示
遇到问题？
如需要帮助，可以选择给电子邮箱发邮件: czhorange@foxmail.com 或者点击进入 issue 提交界面.
Last Updated:2022-08-31
文档地址