友链页面
ModernDuang 的友链页面用于展示你的友情链接,支持分组展示、友链卡片和交换友链板块。友链数据通过 _config.modernduang.yml 集中管理。
友链分组
首先,通过 friendGroups 定义友链的分组类别。每个分组由一个名称和对应的 emoji 图标组成:
friendGroups:
技术伙伴: 🌟
日常: 🎨
朋友们: 🤝
RSS 订阅: 📡
- 键为分组名称,值为显示用的 emoji 图标(推荐使用单字符 emoji)。
- 分组数量无限制,但建议控制在 5 个以内以保持页面整洁。
- 分组显示顺序与配置顺序一致。
友链列表
通过 friends 数组添加具体的友链条目,每个条目须指定所属的 group:
friends:
- name: 张三的技术博客
url: https://zhangsan.dev
desc: 前端开发与生活记录
avatar: https://zhangsan.dev/avatar.png
group: 技术伙伴
- name: 李四的小站
url: https://lisi.blog
desc: 读书、旅行、摄影
avatar: https://lisi.blog/avatar.png
group: 日常
注意: 如果某条友链的 group 没有在 friendGroups 中定义,该友链将不会显示在页面上。
友链卡片样式
每个友链以圆形粘土风格卡片展示:
┌──────────────────┐
│ [头像] 名称 │
│ 描述 │
└──────────────────┘
- 头像圆角裁剪显示
- 悬停时卡片向上浮动并放大
- 点击卡片任意区域即可访问友链站点(新标签页打开)
交换友链板块(siteInfo)
友链页面底部可展示你站点的交换信息,方便其他站长获取你的信息用于交换友链。通过 siteInfo 字段配置:
siteInfo:
url: https://yourblog.com
avatar: https://yourblog.com/avatar.png
atom: https://yourblog.com/atom.xml
站点名称(name)和描述(description)会自动从 Hexo 主配置 _config.yml 中继承:
# _config.yml
title: 我的博客 # 对应 siteInfo 中的 name
description: 记录技术与生活 # 对应 siteInfo 中的 description
siteInfo 提供的数据用于友链页面底部的交换友链板块,在该板块中自动展示你的站点信息,方便其他站长获取。
自定义交换友链板块
友链页面底部的「交换友链」板块内容由主题目录下的 layout/_link-apply.md 文件定义。你可以直接编辑该文件来自定义板块的内容和格式。
该文件支持以下语法:
<!-- siteinfo --> 标记
在 _link-apply.md 中使用 <!-- siteinfo --> HTML 注释标记来插入站点信息卡片的位置:
请在留言中按如下格式提供您的站点信息(下方也是我的站点信息):
<!-- siteinfo -->
<!-- siteinfo --> 标记会被自动替换为你的站点信息卡片,包含博客名、简介、网站地址、头像图片和 Atom 订阅地址,访客可以一键复制各项信息。
{%card%} 卡片语法
使用 {%card%}内容{%card%} 包裹一段内容,使其渲染为带样式的提示卡片:
{%card%}如果您符合以上条件,欢迎在下方评论区留言申请交换友链~{%card%}
支持的 Markdown 语法
_link-apply.md 中支持以下标准 Markdown 语法:
- 标题(
#、##、###)
- 无序列表(
-)
- 链接(
[文字](url))
- 加粗(
**文字**)和斜体(*文字*)
- 分割线(
---)
完整示例
layout/_link-apply.md:
---
title: 交换友链
---
朋友,我需要您的网站:
- 支持 HTTPS 站点且稳定运行
- 必须符合中国大陆法律法规
- 不包含广告、盈利、大量搬运内容
{%card%}如果您符合以上条件,欢迎在下方评论区留言申请交换友链~{%card%}
请在留言中按如下格式提供您的站点信息(下方也是我的站点信息):
<!-- siteinfo -->
---
### 温馨提示
- 我会尽快处理您的申请
- 下方评论区显示可能有些许延迟,感谢您的等候~
友链页面 Markdown
友链页面本身(通过 hexo new page links 创建,即 source/links/index.md)用于撰写页面顶部的说明文字:
---
title: 友链
date: 2024-01-01
layout: links
---
欢迎来到我的友链页面!以下是我常访问的一些优秀站点。
注意: {%card%}...{%card%} 标签和 <!-- siteinfo --> 标记是用于 layout/_link-apply.md 中的,不要写在 source/links/index.md 中。友链卡片列表和交换友链板块由主题自动渲染,无需在页面 Markdown 中手动插入。
完整配置示例
# friendGroups — 友链分组定义
friendGroups:
技术伙伴: 🌟
日常: 🎨
朋友们: 🤝
# siteInfo — 你的站点信息(用于交换板块)
siteInfo:
url: https://myblog.com
avatar: https://myblog.com/avatar.png
atom: https://myblog.com/atom.xml
# friends — 友链列表
friends:
- name: 张三的技术博客
url: https://zhangsan.dev
desc: 前端开发与生活记录
avatar: https://zhangsan.dev/avatar.png
group: 技术伙伴
- name: 李四的小站
url: https://lisi.blog
desc: 读书、旅行、摄影
avatar: https://lisi.blog/avatar.png
group: 日常
- name: 王五的笔记
url: https://wangwu.cc
desc: 后端工程师的成长之路
avatar: https://wangwu.cc/avatar.png
group: 技术伙伴
相关页面