简述

问题描述

前情提示

系统：

一说

  • 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn.com ，转载请标明出处！

  • 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤

  • 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行

添加完成后的效果图如下：

在这里插入图片描述

那么上方的效果如何实现呢？或者如何再添加其他显示呢？

解决

打开主题配置文件/home/myblog/themes/next/_config.yml找到social，简单理解为前端显示名称: 链接 || 图标，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/janeyork || github
  E-Mail: mailto:janeyork1314@gmail.com || envelope
  CSDN: mailto:janeyork1314@gmail.com || book
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

那么图标可以从哪里来呢？可以去官网查看：http://www.fontawesome.com.cn/faicons/

设置完成后，赶紧重新生成看看效果吧！