为什么需要 BlogHeader

博客的头部是读者打开页面后最先看到的区域。一个精心设计的头部不仅能传达博客的品牌感，还能通过细节动画为页面增添活力。

BlogHeader 组件将 Logo、标题、副标题和 Emoji 尾巴整合在一起，并提供鼠标悬浮时的逐字动画效果。

默认效果

不传任何属性时，组件使用站点常量中的标题和默认配置：

🐱 🌸 📚 🎮

喵 洛 阁

记录生活、踩坑与折腾

鼠标悬浮在组件区域上，标题的每个汉字会依次做字重变化动画，背景的 Emoji 也会开始浮动。

自定义配置

自定义标题和副标题

🐱 🌸 📚 🎮

喵 洛 阁

人生如逆旅，我亦是行人。

自定义 Emoji 尾巴

Emoji 尾巴对应标题中的每个汉字，悬浮时作为模糊背景浮动显示：

🐑 🍇 🐟 🍕

纸 鹿 摸 鱼 处

纸鹿至麓不知路，支炉制露不止漉

不同标题标签

通过 tag 属性控制标题的 HTML 标签级别：

🐱 🌸 📚 🎮

h 2 标 签 标 题

适合子页面或文章内嵌

🐱 🌸 📚 🎮

d i v 标 签

无语义，适合嵌入展示

Props 一览

核心实现

逐字动画

标题被拆分为单个字符，每个字符通过 CSS 变量 --delay 获得不同的动画延迟，实现波浪式的字重变化效果：

{
  titleChars.map((char, i) => (
    <span class="split-char" style={`--delay: ${(i + 1) * 0.1}s`}>
      {char}
    </span>
  ))
}

.split-char {
  display: inline-block;
  animation: 3.14s infinite alternate char-weight;
  animation-delay: var(--delay);
  animation-play-state: paused;
}

.blog-header:hover .split-char {
  animation-play-state: running;
}

@keyframes char-weight {
  0% {
    font-weight: 600;
  }
  38% {
    font-weight: 300;
  }
  100% {
    font-weight: 900;
  }
}

Emoji 尾巴

Emoji 数组通过 CSS Grid 平铺在组件背景层，使用 filter: blur 和 opacity 创建柔和的模糊效果。悬浮时透明度提升，同时触发浮动动画：

.emoji-tail {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  filter: blur(2px);
  pointer-events: none;
  z-index: -2;
}

.blog-header:hover .emoji-tail {
  opacity: 0.4;
}

响应式适配

在小屏幕上，Logo 和标题字号会自动缩小，Emoji 背景也相应调整：

@media (max-width: 640px) {
  .blog-logo {
    height: 2.5em;
    width: 2.5em;
  }
  .header-title {
    font-size: 1.2em;
  }
  .emoji-tail {
    font-size: 3rem;
  }
}

暗色模式

组件通过 html.dark 选择器自动适配暗色主题：

• 文字颜色切换为浅色
• Emoji 尾巴的不透明度微调，避免在深色背景上过于刺眼

小结

BlogHeader 组件虽然只占页面顶部一小块区域，但通过逐字动画和 Emoji 尾巴这些细节，让博客的第一印象更具个性和辨识度。所有动画仅在鼠标悬浮时触发，不影响正常的阅读体验。