友链页面
幻梦主题的友链页面以精美的卡片网格展示友情链接,支持分类筛选。
网格布局
.links-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
}
@media (min-width: 768px) {
.links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.links-grid { grid-template-columns: repeat(3, 1fr); }
}
卡片设计
每张友链卡片包含头像、名称、描述、分类和访问链接。悬停时卡片上移并加深阴影。
# data/friends.yaml
friends:
- name: "示例博客"
url: "https://example.com"
avatar: "https://example.com/avatar.png"
description: "一个有趣的博客"
category: "技术"
申请友链
页面底部设有「申请友链」区域,展示交换条件、站点信息和联系方式。所有内容均通过数据文件配置,无需修改模板。