个人信息卡片

个人信息卡片显示在博客首页的侧边栏区域，包含头像、名称、座右铭（motto）和社交链接。它是访客了解你的第一窗口。

基础配置

所有个人信息配置在 _config.modernduang.yml 的 profile 字段下：

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

属性	类型	默认值	描述
`avatar`	`string`	`''`	头像图片 URL，支持本地路径和远程 URL
`motto`	`string`	`''`	个人座右铭或一句个性签名

名称来源

个人信息卡片中的名称自动取自 Hexo 主配置 _config.yml 中的 author 字段，无需在主题配置中重复设置：

# _config.yml（Hexo 主配置文件）
title: 我的博客
author: 张三

若 author 未设置，卡片名称区域留空。

头像

头像支持两种资源类型：

远程 URL：avatar: https://example.com/avatar.png
本地路径：avatar: /img/avatar.png（文件放在 source/img/ 目录下）

头像以圆形裁剪显示，带粘土风格的内凹阴影边框。建议使用正方形图片以获得最佳显示效果。

座右铭

motto 显示在名称下方，以浅色小字呈现。适合放置座右铭、个人签名或一句简短介绍。

profile:
  motto: 种一棵树最好的时间是十年前，其次是现在。

跳转链接

个人信息卡片中的头像、名称和座右铭均是可点击的链接，统一指向 /about 页面。访客点击卡片上的任意位置（头像、名称或座右铭）即可跳转到关于页面，查看更详细的个人介绍。

这为博客提供了直观的导航路径——从首页的个人信息卡片一键进入关于页面，无需在导航栏中额外点击。

社交链接

social 数组用于在个人信息卡片底部展示社交图标。每个条目包含三个属性：

属性	类型	必填	描述
`name`	`string`	是	社交平台名称，点击后 hover 提示显示
`url`	`string`	是	个人主页链接
`icon`	`string`	是	内置图标名或自定义 SVG 字符串

内置社交图标

以下图标名可以直接使用，无需提供 SVG：

图标名	平台
`github`	GitHub
`bilibili`	哔哩哔哩
`email`	电子邮件
`blog`	博客
`tiktok`	抖音
`kuaishou`	快手
`xiaohongshu`	小红书
`wechat`	微信
`qq`	QQ
`gitee`	Gitee（码云）
`rss`	RSS 订阅

使用自定义 SVG

若上述列表无法满足你的需求，可以将 icon 设置为自定义 SVG 字符串：

profile:
  social:
    - name: 知乎
      url: https://www.zhihu.com/people/yourname
      icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="..."/></svg>'

完整配置示例

profile:
  avatar: https://cdn.example.com/avatar.webp
  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

卡片中的社交图标以圆形排列，悬停时有弹跳放大效果和背景色变化。

#个人信息卡片

#基础配置

#名称来源

#头像

#座右铭

#跳转链接

#社交链接

#内置社交图标

#使用自定义 SVG

#完整配置示例

#相关页面