• 简体中文

      • 社交图标

      ModernDuang 内置了 11 种常用社交平台的 SVG 图标，同时支持自定义 SVG 字符串扩展。社交图标可同时出现在个人信息卡片和页脚两个位置。

      内置图标列表

      以下 11 种图标可直接通过图标名引用，无需提供 SVG 代码：

      图标名平台图标描述
      githubGitHubGitHub Invertocat 猫图标
      bilibili哔哩哔哩B 站小电视图标
      email电子邮件信封图标
      blog博客浏览器窗口图标
      tiktok抖音音符图标
      kuaishou快手播放图标
      xiaohongshu小红书书本图标
      wechat微信聊天气泡图标
      qqQQ企鹅图标
      giteeGitee（码云）代码分支图标
      rssRSS信号波纹图标

      社交图标出现的位置

      社交图标在 ModernDuang 中有两个独立的展示位置，配置方式各自独立：

      位置一：个人信息卡片

      在首页侧边栏个人信息卡片中展示，通过 profile.social 配置：

      profile:
  avatar: https://example.com/avatar.png
  motto: 享受当下，创造未来
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email

      详情请参阅 个人信息卡片。

      位置二：页脚

      在页脚区域展示，通过 footer.social 配置，分为预置开关和自定义项：

      footer:
  social:
    travelling: true
    github: true
    email: false
    custom:
      - name: RSS
        url: /atom.xml
        icon: rss
        color: '#FF6600'

      详情请参阅 页脚与备案。

      图标样式

      所有社交图标共享一致的视觉风格：

      • 尺寸：统一 20x20px 的 SVG 视口
      • 颜色：使用 currentColor，自动继承父元素文字颜色
      • 悬停效果：
        • 个人信息卡片：图标放大并显示彩色背景
        • 页脚：图标透明度变化，背景色微调
      • 圆形背景：每个图标包裹在圆形容器中（个人信息卡片）或直接显示（页脚）
      • 暗色模式：自动适配，无需额外配置

      使用自定义 SVG

      如果内置图标无法满足需求（如需要知乎、掘金、CSDN 等其他平台图标），你可以提供自定义 SVG 字符串。自定义 SVG 适用于 profile.social 和 footer.social.custom 的 icon 字段。

      自定义 SVG 规范

      social:
  - name: 知乎
    url: https://www.zhihu.com/people/yourname
    icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M13.325 14.05h3.962l1.304-3.068h-3.964l1.306-3.07h-1.794l-2.606 6.138h1.793zm8.613-2.058c0 5.508-4.487 9.995-9.995 9.995s-9.995-4.487-9.995-9.995 4.487-9.995 9.995-9.995 9.995 4.487 9.995 9.995z"/></svg>'

      自定义 SVG 需遵循以下规范以保证显示效果一致：

      规范项建议
      viewBox"0 0 24 24"（保持图标比例一致）
      width / height20（不强制但推荐）
      fill"currentColor"（让图标颜色随主题自动变化）
      尺寸限制图标会自动缩放到容器大小，无需精确像素对齐

      获取图标 SVG 资源

      推荐以下途径获取高质量的图标 SVG：

      获取后，复制图标的 SVG path 数据，嵌入到统一的 viewBox="0 0 24 24" 容器中即可。

      图标颜色

      个人信息卡片中的颜色

      社交图标在个人信息卡片中悬停时显示主题默认颜色。如果内置图标对应的平台有品牌色，会在悬停时使用品牌色作为背景。

      页脚中的颜色

      在页脚的 social.custom 中，可以通过 color 属性自定义悬停背景色：

      footer:
  social:
    custom:
      - name: 知乎
        url: https://www.zhihu.com/people/yourname
        icon: '<svg viewBox="0 0 24 24">...</svg>'
        color: '#0066FF'
      属性类型描述
      colorstringCSS 颜色值，用于悬停时的背景色。不指定时使用默认主题色

      完整配置示例

      以下示例在个人信息卡片和页脚两处都配置了社交图标：

      # 个人信息卡片中的社交图标
profile:
  avatar: https://example.com/avatar.png
  motto: 享受当下，创造未来
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email
    - name: RSS
      url: /atom.xml
      icon: rss

# 页脚中的社交图标
footer:
  since: 2024
  author: 你的名字
  powered: true
  social:
    travelling: true
    github: true
    email: true
    custom:
      - name: 知乎
        url: https://www.zhihu.com/people/yourname
        icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M..."/></svg>'
        color: '#0066FF'

      相关页面