在Yohaku首页中添加更多社交链接

引入

部署完Yohaku后注意到mx-space管理后台只能设置Github, Weibo, 哔哩哔哩, 网易云音乐这四个社交链接。但是在 Innei 的主页可以看到不止这四个链接

分析

通过在mx-space后台更新社交链接时打开控制台或抓包易知：浏览器通过请求 PATCH https://example.com/api/v2/owner 来更新社交链接

请求体为

JSON

{
  "socialIds": {
    "github": "username",
    "bilibili": "id"
    // ...
  }
}

分析源代码SocialIcon.tsx：

TSX

//第 19 行附近
export const socialIconSet: Record<
  string,
  [string, ReactNode, string, (id: string) => string]
> = {
  github: [
    'Github',
    <i className="i-mingcute-github-line" />,
    '#181717',
    (id) => `https://github.com/${id}`,
  ],
  twitter: [
    'Twitter',
    <i className="i-mingcute-twitter-line" />,
    '#1DA1F2',
    (id) => `https://twitter.com/${id}`,
  ],
  x: ['X', <XIcon />, 'rgba(36,46,54,1.00)', (id) => `https://x.com/${id}`],
  telegram: [
    'Telegram',
    <i className="i-mingcute-telegram-line" />,
    '#0088cc',
    (id) => `https://t.me/${id}`,
  ],
  mail: [
    'Email',
    <i className="i-mingcute-mail-line" />,
    '#D44638',
    (id) => `mailto:${id}`,
  ],
  get email() {
    return this.mail
  },
  get feed() {
    return this.rss
  },
  rss: ['RSS', <i className="i-mingcute-rss-line" />, '#FFA500', (id) => id],
  bilibili: [
    '哔哩哔哩',
    <BilibiliIcon />,
    '#00A1D6',
    (id) => `https://space.bilibili.com/${id}`,
  ],
  netease: [
    '网易云音乐',
    <NeteaseCloudMusicIcon />,
    '#C20C0C',
    (id) => `https://music.163.com/#/user/home?id=${id}`,
  ],
  qq: [
    'QQ',
    <i className="i-mingcute-qq-fill" />,
    '#1e6fff',
    (id) => `https://wpa.qq.com/msgrd?v=3&uin=${id}&site=qq&menu=yes`,
  ],
  wechat: [
    '微信',
    <i className="i-mingcute-wechat-fill" />,
    '#2DC100',
    (id) => id,
  ],
  weibo: [
    '微博',
    <i className="i-mingcute-weibo-line" />,
    '#E6162D',
    (id) => `https://weibo.com/${id}`,
  ],
  discord: [
    'Discord',
    <i className="i-mingcute-discord-fill" />,
    '#7289DA',
    (id) => `https://discord.gg/${id}`,
  ],
  bluesky: [
    'Bluesky',
    <BlueskyIcon />,
    '#0085FF',
    (id) => `https://bsky.app/profile/${id}`,
  ],
  steam: [
    'Steam',
    <SteamIcon />,
    '#0F1C30',
    (id) => `https://steamcommunity.com/id/${id}`,
  ],
}

可知，还可以定义的有

Twitter
X
Telegram
QQ
Wechat
mail
RSS
Bluesky
Discord
Steam

由于QQ临时会话的接口已不再适用，可以改为直接跳转到 id，并填入添加好友或入群链接

TSX

qq: [
  'QQ',
  <i className="i-mingcute-qq-fill" />,
  '#1e6fff',
  (id) => id,
],

添加更多链接

因此可以通过 Reqable 抓包然后加上这部分内容再发送给服务器更新社交链接

示例：

JSON

{
  "socialIds": {
    "github": "Elvish064",
    "bilibili": "1613372234",
    "X": "Elvish064",
    "telegram": "Elvish064",
    "qq": "https://qm.qq.com/cgi-bin/qm/qr?k=bLl4uuTl3BK2rKissNgVgdHyk22korJ4&jump_from=webapi&authKey=XIkvyvxvUHQ+MrpO3evV827wT3bHzxNtEYTzxKvqgbInpbPe4scR3S2JJuQSa3nY",
    "mail": "elvish@elvish.me",
    "rss": "https://www.elvish.me/feed"
  }
}

现在刷新一下主页，应该也有一排数个社交链接了。