社交媒体链接设置指南

新增功能

本网站现在支持以下新的社交媒体链接：

1. 微信公众号 (WeChat MP)

• 显示微信公众号名称
• 点击后弹出二维码模态框
• 支持自定义二维码图片

2. 小红书 (RedNote)

• 直接链接到小红书用户主页
• 使用心形图标表示

配置步骤

步骤 1: 修改 _config.yml

在你的 _config.yml 文件中添加以下配置：

author:
  # ... 现有配置 ...
  
  # 微信公众号配置
  wechat_mp: "你的微信公众号ID或名称"
  wechat_qr_image: "images/wechat_qr.png"  # 二维码图片路径
  
  # 小红书配置
  rednote: "你的小红书用户名"
  
  # ... 现有配置 ...

步骤 2: 准备微信公众号二维码图片

1. 将你的微信公众号二维码图片保存到 images/ 目录
2. 确保图片路径与 wechat_qr_image 配置一致
3. 推荐图片尺寸：200x200 像素或更大

步骤 3: 重启 Jekyll 服务器

修改配置后，需要重启 Jekyll 服务器：

# 停止当前服务器 (Ctrl+C)
# 重新启动
jekyll serve

功能说明

微信公众号

• 点击链接会直接弹出二维码模态框，不会弹出空白页面
• 显示二维码图片和公众号名称
• 支持点击背景关闭
• 响应式设计，适配各种屏幕尺寸
• 界面提示使用英文显示

小红书

• 直接跳转到小红书用户主页
• 使用 https://www.xiaohongshu.com/user/profile/用户名 格式
• 图标使用 Font Awesome 的心形图标

图标说明

• 微信公众号: 使用 fa-comments 图标（对话气泡），显示为微信绿色 (#07C160)
• 小红书: 使用 fa-heart 图标（心形），显示为小红书红色 (#FF2442)

这些图标都来自 Font Awesome，确保图标库已正确加载。图标颜色会自动应用，无需额外配置。

颜色特性

微信公众号图标

• 默认颜色: 微信绿色 (#07C160)
• 悬停颜色: 深绿色 (#06AD56)
• 品牌一致性: 使用微信官方品牌色

小红书图标

• 默认颜色: 小红书红色 (#FF2442)
• 悬停颜色: 深红色 (#E61E3C)
• 品牌一致性: 使用小红书官方品牌色

悬停效果

• 鼠标悬停时图标会变为更深的颜色
• 提供更好的交互反馈
• 增强用户体验

故障排除

问题 1: 图标不显示

• 检查 Font Awesome 是否正确加载
• 确认 CSS 文件路径正确

问题 2: 二维码图片不显示

• 检查图片路径是否正确
• 确认图片文件存在
• 检查图片格式是否支持（推荐 PNG、JPG）

问题 3: 链接不工作

• 检查配置文件语法是否正确
• 确认 YAML 缩进正确
• 重启 Jekyll 服务器

自定义样式

如果需要修改样式，可以编辑 _includes/scripts.html 中的 CSS 样式，或者创建自定义 CSS 文件。

示例配置

author:
  name: "Black Sun"
  wechat_mp: "BlackSun_HCI"
  wechat_qr_image: "images/wechat_qr.png"
  rednote: "black_sun_hci"
  # ... 其他配置 ...

这样配置后，你的网站就会在侧边栏显示微信公众号和小红书的链接了！