博客随笔
友链互换
友情链接卡片的数据结构说明与添加方法
一、 前言
感谢您跟我交换友链！您可以依照下文填写此模板以提交您的信息，同时我的友链信息如下所示：
{
avatar: 'https://uecook.top/avatar.avif',
name: '圣堂之魂',
title: '是圣堂呀~请你吃青苹果！',
links:
[
{ type: 'L', icon: 'house', url: 'https://uecook.top', title: '主页' },
{ type: 'L', icon: 'id-card', url: 'https://oc.uecook.top', title: 'OC' },
{ type: 'F', icon: 'bookmark', url: 'https://blog.uoca.top', title: 'blog' },
]
}互换规则：
- 您与我在线上 / 线下相识，并在至少一个社交平台互为好友；
- 您的博客或网站正在正常运行，并且在可预见的未来也将继续运行下去；
- 您的博客或网站必须使用 SSL/TLS 加密，并最好开启了 HSTS。
二、 字段与填充说明
1. 顶层字段
Prop
Type
2. links 数组字段
Prop
Type
三、 图标类型
1. Lucide 图标（ L ）
使用 Lucide 图标库，icon 字段填写图标名称。
可用图标名参考：Lucide Icons
{ type: 'L', icon: 'house', url: 'https://uecook.top', title: '主页' },
{ type: 'L', icon: 'id-card', url: 'https://oc.uecook.top', title: 'OC' },2. Feather 图标（ F ）
使用 Feather 图标库，icon 字段填写图标名称。
可用图标名参考：Feather Icons
{ type: 'F', icon: 'bookmark', url: 'https://blog.uoca.top', title: 'blog' },3. 自定义 SVG（ T ）
直接在 icon 字段填写完整的 SVG 代码。
自定义图标必须包含完整的 <svg> 标签。
{
type: 'T',
icon: '<svg viewBox="0 0 640 640"><path d="M320 128C214 128 128 214 128 320C128 426 214 512 320 512C337.7 512 352 526.3 352 544C352 561.7 337.7 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320L576 352C576 405 533 448 480 448C450.7 448 424.4 434.8 406.8 414.1C384 435.1 353.5 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192C347.9 192 373.7 200.9 394.7 216.1C400.4 211.1 407.8 208 416 208C433.7 208 448 222.3 448 240L448 352C448 369.7 462.3 384 480 384C497.7 384 512 369.7 512 352L512 320C512 214 426 128 320 128zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320z"/></svg>',
url: 'mailto:[email protected]',
title: 'email'
}四、 注意事项
URL 限制：链接地址必须以 https:// 开头，不支持 http:// 或其他协议。
链接数量：links 数组最多包含 4 个元素，且第 1 个链接必填。
副标题长度：title 字段最多显示 70 个字符，超出部分会被截断。
五、 添加步骤
- 打开
js/cards.js文件 - 在
CARDS_DATA数组末尾添加新的对象 - 按照数据结构填写必要字段
- 保存文件并刷新页面