PrimeEdge 主题教程

社交链接

配置页脚社交媒体图标

社交链接

PrimeEdge 在页脚区域显示社交媒体图标链接，方便访客关注你的社交账号。

基础配置

在 hugo.toml 中使用 [[params.social]] 定义社交链接：

[[params.social]]
  name = "GitHub"
  url = "https://github.com/username"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Twitter"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-twitter"

社交链接参数

参数 必填 说明
name 是 平台名称，用于 aria-label
url 是 个人主页链接
icon 是 Font Awesome 品牌图标类名

支持的社交平台

代码托管

[[params.social]]
  name = "GitHub"
  url = "https://github.com/username"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Gitee"
  url = "https://gitee.com/username"
  icon = "fa-brands fa-git-alt"

[[params.social]]
  name = "GitLab"
  url = "https://gitlab.com/username"
  icon = "fa-brands fa-gitlab"

社交媒体

[[params.social]]
  name = "Twitter / X"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-x-twitter"

[[params.social]]
  name = "微博"
  url = "https://weibo.com/username"
  icon = "fa-brands fa-weibo"

[[params.social]]
  name = "知乎"
  url = "https://www.zhihu.com/people/username"
  icon = "fa-brands fa-zhihu"

即时通讯

[[params.social]]
  name = "QQ"
  url = "tencent://message/?uin=123456789"
  icon = "fa-brands fa-qq"

[[params.social]]
  name = "Telegram"
  url = "https://t.me/username"
  icon = "fa-brands fa-telegram"

[[params.social]]
  name = "Discord"
  url = "https://discord.gg/invitecode"
  icon = "fa-brands fa-discord"

内容平台

[[params.social]]
  name = "YouTube"
  url = "https://youtube.com/@username"
  icon = "fa-brands fa-youtube"

[[params.social]]
  name = "Bilibili"
  url = "https://space.bilibili.com/userid"
  icon = "fa-brands fa-bilibili"

[[params.social]]
  name = "小红书"
  url = "https://www.xiaohongshu.com/user/profile/userid"
  icon = "fa-solid fa-book-open"

专业平台

[[params.social]]
  name = "LinkedIn"
  url = "https://linkedin.com/in/username"
  icon = "fa-brands fa-linkedin"

[[params.social]]
  name = "掘金"
  url = "https://juejin.cn/user/userid"
  icon = "fa-solid fa-book"

[[params.social]]
  name = "CSDN"
  url = "https://blog.csdn.net/username"
  icon = "fa-solid fa-code"

完整示例

[[params.social]]
  name = "GitHub"
  url = "https://github.com/kok777"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Gitee"
  url = "https://gitee.com/k_ok"
  icon = "fa-brands fa-git-alt"

[[params.social]]
  name = "微博"
  url = "https://weibo.com/tlk8"
  icon = "fa-brands fa-weibo"

[[params.social]]
  name = "QQ"
  url = "tencent://message/?uin=5131408"
  icon = "fa-brands fa-qq"

[[params.social]]
  name = "Twitter"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-x-twitter"

[[params.social]]
  name = "知乎"
  url = "https://www.zhihu.com/people/username"
  icon = "fa-brands fa-zhihu"

图标样式

社交图标默认样式：

  • 圆形背景
  • 悬停时放大效果
  • 深色/浅色模式自适应

显示位置

社交图标显示在：

  • 页脚区域
  • 关于页面（如配置）

下一步

Comments

0%