测试 BlogHeader.astro 组件

这篇文章用来测试我新创建的 BlogHeader.astro 组件，该组件复刻了 Vue 博客中的 BlogHeader 组件功能。

测试默认用法

🚀 💻 📝 🌟

Z S X の 小 站

专注于前端开发和技术分享

测试自定义属性

🎉 🎨 🚀 💡

自 定 义 标 题

这是一个自定义副标题

测试隐藏标题

🚀 💻 📝 🌟

测试自定义图标

🚀 💻 📝 🌟

G i t H u b 头 像

使用 GitHub 头像作为 logo

测试效果说明

• 默认样式：显示博客 logo、标题和副标题，带有动画效果
• 自定义属性：支持自定义标题、副标题和 emoji 尾缀
• 隐藏标题：可以选择隐藏标题，只显示 logo
• 自定义图标：支持使用自定义图片作为 logo
• 动画效果：鼠标悬停时触发文字和 emoji 的动画效果
• 响应式设计：适配不同屏幕尺寸

结论

BlogHeader.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种配置选项，可以根据需要灵活调整。

你可以通过修改组件的属性来定制不同的博客头部效果，例如更换 logo、修改标题和副标题、调整 emoji 尾缀等。