跳到主要内容

友链维护指南

概述​

本站使用自定义友链页面，支持以下能力：

  • 分类展示
  • 响应式布局
  • 深色 / 浅色主题切换
  • 星标推荐展示
  • 置顶优先排序
  • 强推卡片差异化样式

友链页面源码位于：

  • src/pages/friends.js
  • src/pages/friends.module.css

数据结构说明​

当前友链数据存储在 src/pages/friends.js 的 friendsData 中，采用“按分类分组”的结构：

const friendsData = [
  {
    category: '技术博客',
    links: [
      {
        name: 'React',
        url: 'https://react.dev/',
        description: '用于构建用户界面的 JavaScript 库',
        isPinned: false,
        isStarred: true,
        isFeatured: false
      }
    ]
  }
]

顶层字段​

每个分类对象包含：

  • category：分类名称
  • links：该分类下的友链数组

单个友链字段​

每个友链对象支持以下字段：

  • name（必填）：网站名称
  • url（必填）：网站链接
  • description（必填）：网站简短描述，建议 50 字以内
  • isPinned（可选）：是否置顶，true 表示优先展示
  • isStarred（可选）：是否星标推荐，true 时标题旁显示星标
  • isFeatured（可选）：是否强推卡片，true 时使用差异化高亮卡片样式

建议没有特殊需求时显式写出这 3 个布尔字段，便于后续维护。

如何添加新的友链​

1. 找到对应分类​

在 friendsData 中找到要添加友链的分类对象，例如：

{
  category: '好友博客',
  links: [
    {
      name: 'SysNow的博客',
      url: 'https://sysnow.xyz/',
      description: '理工的PWM_King的博客',
      isPinned: false,
      isStarred: false,
      isFeatured: false
    }
  ]
}

示例：

{
  name: '新的友链',
  url: 'https://example.com/',
  description: '这里填写一段简短描述',
  isPinned: false,
  isStarred: false,
  isFeatured: false
}

如何添加新的分类​

直接在 friendsData 中新增一个分类对象：

{
  category: '学习资源',
  links: [
    {
      name: '示例站点',
      url: 'https://example.com/',
      description: '高质量学习资源整理',
      isPinned: false,
      isStarred: false,
      isFeatured: false
    }
  ]
}

注意：

  • category 名称应清晰可读
  • 不需要额外手动维护分类标签数组
  • 页面会根据 friendsData.map(item => item.category) 自动生成分类标签

推荐字段使用建议​

isPinned​

用于需要固定优先展示的站点。

适用场景：

  • 重点合作站点
  • 自己长期关注的网站
  • 希望在“全部”视图中始终排在前面的链接

isStarred​

用于给友链标题增加星标提示。

适用场景：

  • 推荐程度较高
  • 想让用户快速识别重点站点
  • 不一定要整张卡片特殊高亮，但希望有明确标记

isFeatured​

用于强推卡片样式高亮。

适用场景：

  • 强烈推荐
  • 对自己帮助很大的网站
  • 希望在视觉上与普通卡片形成明显差异

排序规则​

页面中的“全部”视图和分类视图都会执行统一排序，优先级如下：

  1. isPinned: true
  2. isStarred: true
  3. isFeatured: true
  4. 其余项目保持原有顺序

这意味着：

  • 置顶友链会优先排到最前
  • 星标友链会比普通友链更靠前
  • 强推友链会进一步获得排序与样式强化

维护示例​

普通友链​

{
  name: '普通站点',
  url: 'https://normal-example.com/',
  description: '一个普通展示的友链',
  isPinned: false,
  isStarred: false,
  isFeatured: false
}

星标友链​

{
  name: '推荐站点',
  url: 'https://star-example.com/',
  description: '值得优先关注的网站',
  isPinned: false,
  isStarred: true,
  isFeatured: false
}

置顶 + 强推友链​

{
  name: '强推站点',
  url: 'https://featured-example.com/',
  description: '重点推荐，并希望始终靠前展示',
  isPinned: true,
  isStarred: true,
  isFeatured: true
}

页面访问​

友链页面访问路径：

/friends

设计特点​

  • 分类筛选：点击分类标签可快速切换友链分组
  • 统一排序：全部和分类视图都按优先级自动排序
  • 星标展示：标题旁显示星标徽记
  • 置顶高亮：置顶卡片带有“置顶”标签并优先排列
  • 强推差异化：强推卡片使用独立配色
  • 响应式设计：自动适配桌面、平板、手机
  • 主题适配：支持深色 / 浅色主题

注意事项​

  1. 链接有效性：定期检查友链链接是否可访问
  2. 分类合理：分类名称应准确反映网站性质
  3. 描述简洁：描述尽量简洁，避免卡片过长
  4. 优先级克制使用：isPinned 和 isFeatured 不宜滥用，否则会削弱重点信息
  5. HTTPS 优先：优先填写 HTTPS 链接
  6. 字段保持完整：新增友链时建议把 3 个布尔字段都写全，避免后续理解成本上升

常见问题​

Q: 为什么我的友链没有显示？​

A: 请检查：

  • 是否添加在正确的 links 数组中
  • 对象字段名是否拼写正确
  • url 是否以 http:// 或 https:// 开头
  • JavaScript 对象逗号和括号是否完整

Q: 为什么排序和我写入的顺序不一致？​

A: 页面会先按以下优先级排序：

  • isPinned
  • isStarred
  • isFeatured

如果这些字段不同，展示顺序会优先按优先级处理，而不是单纯按照书写顺序。

Q: 如何删除友链？​

A: 直接在对应分类的 links 数组中删除对应对象即可。

Q: 如何修改友链显示重点？​

A: 修改以下字段即可：

  • isPinned
  • isStarred
  • isFeatured

更新日志​

  • 2025-04-26：初始版本，支持基础友链功能
  • 2026-03-28：更新为按分类分组的数据结构说明
  • 2026-03-28：新增星标、置顶、强推卡片维护说明
  • 2026-03-28：补充统一排序规则与维护示例