头像 余温Gueen
头像
余温Gueen
-- : -- : --
切换主题色
-- : -- : --
博客 hugo-teek +3 友链配置友情链接配置说明 2020 字 8 分钟 -- 次

友链页面配置说明

最后更新于:

🌐 友链页面配置概述

Hugo-Teek 主题内置了精美的友链页面模板，支持分组展示、头像显示、描述信息、链接统计等功能。友链配置采用 YAML 格式数据文件，通过 Hugo 的数据文件系统进行管理。

✨ 友链页面特性

🎨 设计特性

  • 分组展示：支持按分类分组展示友链
  • 头像支持：自动获取或自定义友链头像
  • 响应式布局：自适应网格布局，适配各种屏幕
  • 悬停效果：精美的卡片悬停动画效果

⚙️ 配置特性

  • 数据驱动：通过 YAML 数据文件管理友链
  • 灵活分组：支持自定义友链分类
  • 参数扩展：支持自定义友链属性
  • 排序控制：支持按权重排序友链

📁 配置文件路径

Hugo-Teek 友链配置采用数据文件结构，配置文件位于以下位置：

1# hugo-teek-site/data/friends.yml
2# 友链数据配置文件
3# 包含所有友链信息
1# hugo-teek-site/content/about/friend-links.md
2# 友链页面内容文件
3# 定义页面元数据和基础内容

配置优先级

1配置加载顺序：
21️⃣ data/friends.yml（友链数据文件）
32️⃣ content/about/friend-links.md（页面内容文件）
43️⃣ 主题默认模板（layouts/_default/friends.html）

📝 友链数据配置

基础数据结构

最简单的友链配置，包含名称、链接和描述：

1friends:
2  - name: "白木博客"
3    url: "https://baimu.live"
4    description: "记录生活，分享技术"
1friends:                          # ◀️ 友链表根节点
2  - name: "白木博客"               # ◀️ 网站名称
3    url: "https://baimu.live"     # ◀️ 网站链接
4    description: "记录生活，分享技术" # ◀️ 网站描述

友链配置字段说明

字段必填说明
name✅网站名称，显示在友链卡片上
url✅网站链接，点击跳转的目标地址
description❌网站描述，简短介绍网站内容
avatar❌头像链接，自定义友链头像
weight❌排序权重，数字越小越靠前

🌳 分组友链配置

创建分组结构

通过添加 group 字段实现友链分组展示：

 1friends:
 2  # 技术博客分组
 3  - group: "技术博客"
 4    weight: 1
 5    items:
 6      - name: "白木博客"
 7        url: "https://baimu.live"
 8        description: "记录生活，分享技术"
 9        avatar: "https://baimu.live/avatar.png"
10        weight: 1
11      
12      - name: "Hugo官方"
13        url: "https://gohugo.io"
14        description: "Hugo静态网站生成器官方文档"
15        weight: 2
16  
17  # 生活随笔分组
18  - group: "生活随笔"
19    weight: 2
20    items:
21      - name: "示例博客"
22        url: "https://example.com"
23        description: "一个示例博客网站"
24        weight: 1
1🌐 友链页面
2├── 📚 技术博客 (group)
3│   ├── 白木博客
4│   └── Hugo官方
5└── 📝 生活随笔 (group)
6    └── 示例博客

分组配置最佳实践

⚠️ 注意事项

  • 每个分组的 group 名称必须唯一
  • 分组内的 weight 控制该分组内友链的排序
  • 分组的 weight 控制分组之间的排序顺序
  • 建议合理分组，保持页面结构清晰

🎨 头像配置

自定义友链头像

通过 avatar 字段配置友链头像：

1friends:
2  - name: "白木博客"
3    url: "https://baimu.live"
4    description: "记录生活，分享技术"
5    avatar: "https://baimu.live/avatar.png"
6    weight: 1
1# 方式1：直接链接
2avatar: "https://example.com/avatar.jpg"
3
4# 方式2：使用 Gravatar
5avatar: "https://www.gravatar.com/avatar/MD5_HASH"
6
7# 方式3：使用 Cravatar（国内推荐）
8avatar: "https://cravatar.cn/avatar/MD5_HASH"

头像查找与使用

🔍 头像资源

  • 推荐使用 100x100 或 200x200 像素的正方形图片
  • 支持格式：PNG、JPG、WebP
  • 建议使用 HTTPS 链接确保安全性
  • 如不提供头像，主题会显示默认占位图标

🔗 外部链接处理

友链链接配置

友链页面中的所有链接都会自动添加安全属性：

1friends:
2  - name: "外部博客"
3    url: "https://external-blog.com"
4    description: "一个外部博客网站"
1# 主题会自动处理：
2✅ 添加 rel="noopener noreferrer" 安全属性
3✅ 在新窗口打开外部链接 (target="_blank")
4✅ 自动识别 http/https 协议

📋 完整配置示例

典型友链页面配置

 1# ========================================
 2# 🌐 友链数据配置
 3# ========================================
 4friends:
 5  # 技术博客分组
 6  - group: "💻 技术博客"
 7    weight: 1
 8    items:
 9      - name: "白木博客"
10        url: "https://baimu.live"
11        description: "记录生活，分享技术，探索开源世界"
12        avatar: "https://baimu.live/avatar.png"
13        weight: 1
14      
15      - name: "Hugo 官方"
16        url: "https://gohugo.io"
17        description: "世界上最快的静态网站构建工具"
18        avatar: "https://gohugo.io/images/hugo-logo-wide.svg"
19        weight: 2
20      
21      - name: "Bootstrap Icons"
22        url: "https://icons.getbootstrap.com"
23        description: "开源 SVG 图标库"
24        weight: 3
25  
26  # 生活随笔分组
27  - group: "📝 生活随笔"
28    weight: 2
29    items:
30      - name: "示例生活博客"
31        url: "https://example-life.com"
32        description: "记录生活中的点滴美好"
33        weight: 1
34  
35  # 工具资源分组
36  - group: "🛠️ 工具资源"
37    weight: 3
38    items:
39      - name: "CNB Cool"
40        url: "https://cnb.cool"
41        description: "新一代代码托管平台"
42        weight: 1
43      
44      - name: "Vercel"
45        url: "https://vercel.com"
46        description: "前端开发者平台"
47        weight: 2
 1---
 2title: "友链"
 3description: "我的朋友们，互联网上的邻居们"
 4layout: "friends"
 5---
 6
 7## 🤝 友情链接
 8
 9欢迎与各位博主交换友链！
10
11### 📋 申请友链
12
13如果你希望添加友链，请确保你的网站：
14- ✅ 内容健康、积极向上
15- ✅ 有原创内容，非纯采集站
16- ✅ 网站可正常访问
17
18### 📝 本站信息
19
20```yaml
21name: "白木博客"
22url: "https://baimu.live"
23avatar: "https://baimu.live/avatar.png"
24description: "记录生活，分享技术"

⚙️ 友链页面文件

创建友链页面

在 content 目录下创建友链页面文件：

 1---
 2title: "友链"
 3description: "我的朋友们，互联网上的邻居们"
 4layout: "friends"
 5---
 6
 7## 🤝 友情链接
 8
 9欢迎与各位博主交换友链！
10
11### 📋 申请友链
12
13如果你希望添加友链，请确保你的网站：
14- ✅ 内容健康、积极向上
15- ✅ 有原创内容，非纯采集站
16- ✅ 网站可正常访问
17
18### 📝 本站信息
19
20```yaml
21name: "你的博客名称"
22url: "https://your-domain.com"
23avatar: "https://your-domain.com/avatar.png"
24description: "你的网站描述"
1
2```yaml
3---
4title: "友链"                           # ◀️ 页面标题
5description: "我的朋友们..."             # ◀️ 页面描述
6layout: "friends"                       # ◀️ 使用友链布局模板
7---

配置方式对比

配置方式适用场景难度灵活性
数据文件管理友链列表⭐ 简单⭐⭐⭐⭐
页面文件编辑页面内容⭐ 简单⭐⭐⭐
主题模板自定义样式⭐⭐⭐ 复杂⭐⭐⭐⭐⭐

🔧 常见问题

友链不显示或显示异常

1原因：数据文件格式错误或路径不对
2解决：
31️⃣ 检查 data/friends.yml 文件是否存在
42️⃣ 使用 YAML 验证器检查语法
53️⃣ 确保 friends 根节点存在
64️⃣ 重启开发服务器：make dev
1原因：头像链接错误或无法访问
2解决：
31️⃣ 检查 avatar 链接是否可访问
42️⃣ 确保使用 HTTPS 协议
53️⃣ 检查图片格式是否支持
64️⃣ 尝试使用其他图床
1原因：weight 值设置不当
2解决：
31️⃣ 分组间使用 weight 控制顺序
42️⃣ 分组内使用 weight 控制友链顺序
53️⃣ 建议以 10 为间隔，方便后续插入

配置生效检查清单

1✅ 数据文件路径正确 (data/friends.yml)
2✅ YAML 语法无误（使用在线 YAML 验证器检查）
3✅ 页面文件使用 layout: "friends"
4✅ 友链链接格式正确（包含 https://）
5✅ 头像链接可正常访问
6✅ 重启开发服务器后生效

📝 配置模板速查

常用友链模板

1friends:
2  - name: "网站名称"
3    url: "https://example.com"
4    description: "网站描述"
5    avatar: "https://example.com/avatar.png"
6    weight: 10
1friends:
2  - group: "分组名称"
3    weight: 1
4    items:
5      - name: "网站名称"
6        url: "https://example.com"
7        description: "网站描述"
8        weight: 1
1friends:
2  - group: "技术博客"
3    weight: 1
4    items:
5      - name: "博客名称"
6        url: "https://blog.example.com"
7        description: "博客描述"
8        avatar: "https://blog.example.com/avatar.png"
9        weight: 1

🎉 友链页面配置完成！

如有问题，请在 Hugo-Teek项目仓库 的 Issues 中反馈

📡
👤 作者: 余温Gueen
🔗 链接: https://wiki.xxdevops.cn/hobby/youliang-peizhi
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章