社交图标配置

极简主题提供了丰富的社交图标配置，支持国内外主流平台，并创新性地支持二维码悬浮展示功能。

支持的社交平台

国内平台

📺 Bilibili - 哔哩哔哩
💬 WeChat - 微信
📱 Weibo - 新浪微博
📖 Douban - 豆瓣
💼 Zhihu - 知乎
📧 Email - 邮箱

国际平台

🐙 GitHub
🐦 Twitter / X
💼 LinkedIn
📘 Facebook
📸 Instagram
🎬 YouTube
📌 Pinterest
🎵 Spotify
💬 Telegram
🎮 Steam

基本配置

在 hugo.yaml 的 params 部分配置社交图标：

1
2
3
4
5
6
7
8


params:
  socialIcons:
    - name: github
      url: "https://github.com/yourusername"
    - name: bilibili
      url: "https://space.bilibili.com/12345678"
    - name: email
      url: "mailto:your@email.com"

配置参数

参数	类型	必填	说明
name	string	✅	平台名称（小写）
url	string	✅	链接地址
hoverImage	string	❌	悬浮图片路径（二维码）

二维码悬浮功能

主题创新支持鼠标悬停时弹出二维码名片，非常适合展示微信、公众号等二维码。

微信二维码示例

1
2
3
4
5


params:
  socialIcons:
    - name: wechat
      url: "javascript:void(0);"  # 不需要跳转，使用空链接
      hoverImage: "/images/wechat-qr.png"  # 二维码图片路径

公众号二维码示例

1
2
3
4
5


params:
  socialIcons:
    - name: wechat
      url: "javascript:void(0);"
      hoverImage: "/images/official-account-qr.png"

效果说明

当访客将鼠标悬停在图标上时：

图标上方会弹出一个悬浮卡片
卡片中显示配置的二维码图片
移开鼠标后卡片自动消失

完整配置示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


params:
  socialIcons:
    # GitHub - 代码托管
    - name: github
      url: "https://github.com/mommo"
    
    # Bilibili - 视频平台
    - name: bilibili
      url: "https://space.bilibili.com/12345678"
    
    # 微信 - 带二维码悬浮
    - name: wechat
      url: "javascript:void(0);"
      hoverImage: "/images/wechat-qr.png"
    
    # 知乎 - 问答社区
    - name: zhihu
      url: "https://www.zhihu.com/people/yourusername"
    
    # 豆瓣 - 书影音
    - name: douban
      url: "https://www.douban.com/people/yourusername/"
    
    # 微博 - 社交媒体
    - name: weibo
      url: "https://weibo.com/yourusername"
    
    # 邮箱 - 联系方式
    - name: email
      url: "mailto:your@email.com"
    
    # Twitter - 国际社交
    - name: twitter
      url: "https://twitter.com/yourusername"
    
    # Telegram - 即时通讯
    - name: telegram
      url: "https://t.me/yourusername"
    
    # YouTube - 视频平台
    - name: youtube
      url: "https://www.youtube.com/@yourchannel"

二维码图片准备

存放位置

将二维码图片放在以下任一位置：

static 目录：static/images/wechat-qr.png
- 引用路径：/images/wechat-qr.png
assets 目录：assets/images/wechat-qr.png
- 可使用 Hugo 图片处理功能

生成二维码

推荐使用以下工具生成二维码：

微信官方：微信 App 内生成
在线工具：草料二维码
浏览器插件：QR Code Generator

高级用法

链接类型说明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 普通链接
url: "https://example.com"

# 邮箱链接
url: "mailto:your@email.com"

# 电话链接
url: "tel:+8613800138000"

# 空链接（不跳转，配合悬浮图使用）
url: "javascript:void(0);"

# 页内锚点
url: "#contact"

排列顺序

图标按照配置顺序从左到右（或从上到下）排列：

1
2
3
4
5


socialIcons:
  - name: github      # 第1个
  - name: bilibili    # 第2个
  - name: wechat      # 第3个
  - name: email       # 第4个

控制显示数量

建议配置 4-8 个社交图标，避免主页过于拥挤：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# ✅ 推荐：精简配置
socialIcons:
  - name: github
  - name: bilibili
  - name: wechat
  - name: email

# ❌ 避免：过多图标
socialIcons:
  - name: github
  - name: bilibili
  - name: weibo
  - name: zhihu
  - name: douban
  - name: twitter
  - name: facebook
  - name: instagram
  # ... 过多

平台名称参考

平台	name 值	说明
GitHub	`github`	代码托管
Bilibili	`bilibili`	视频平台
微信	`wechat`	即时通讯
微博	`weibo`	社交媒体
知乎	`zhihu`	问答社区
豆瓣	`douban`	书影音
邮箱	`email`	电子邮件
Twitter	`twitter`	国际社交
Facebook	`facebook`	社交网络
Instagram	`instagram`	图片分享
LinkedIn	`linkedin`	职业社交
YouTube	`youtube`	视频平台
Telegram	`telegram`	即时通讯
Steam	`steam`	游戏平台
Spotify	`spotify`	音乐平台
Pinterest	`pinterest`	图片收藏
RSS	`rss`	订阅源

主题适配

社交图标会根据主题自动调整：

亮色主题：深色图标
暗色主题：浅色图标
悬停效果：图标颜色变化

常见问题

Q: 图标不显示？

A: 检查以下几点：

name 值是否正确（小写，无空格）
缩进是否正确（YAML 格式）
图标名称是否在支持列表中

Q: 二维码图片加载失败？

A: 确认：

图片路径正确
图片文件存在于 static 目录
文件格式支持（PNG/JPG/WebP）

Q: 如何添加不支持的图标？

A: 主题使用 SVG 图标库，如需添加新图标：

在 layouts/partials/svg.html 中添加 SVG 代码
或通过自定义 CSS 添加

Q: 可以自定义图标颜色吗？

A: 图标颜色由主题控制，自动适配亮色/暗色主题。如需自定义，可修改主题 CSS 或使用自定义样式覆盖。