标签 / 组件
组件
共 14 篇文章
- LinkCard 链接卡片组件：小而精致的资源推荐块 2026年6月24日介绍 LinkCard 组件的设计思路——标题、描述、图标和链接组成的紧凑信息卡，适合在文章中展示站点、项目或外部资源。
- Pic 图片组件：带说明文字与灯箱缩放 2026年6月24日介绍 Pic 组件的设计思路——用于展示图片，支持说明文字、尺寸属性以及点击打开灯箱缩放。
- Poetry 诗词组件：更适合排版短诗与摘句 2026年6月24日介绍 Poetry 组件的设计思路——用标题、作者、正文和尾注组织出更像诗词的排版形式。
- Tip 提示组件：一条能悬浮提示、也能点击复制的小提示 2026年6月24日介绍 Tip 组件的设计思路——用于展示一条带虚线下划线的小提示，支持悬浮提示、Iconify 图标与点击复制。
- LinkBanner 链接横幅组件：图片卡片式外链展示 2026年6月20日介绍 LinkBanner 组件——用横幅图片 + 标题 + 描述的卡片式外链展示，支持自动提取域名作为描述，适合作为文章中的推荐链接或项目展示。
- Alert 提示组件：五种类型与插槽定制 2026年6月19日介绍 Alert 组件的设计思路——五种语义类型、卡片与扁平两种风格、自定义图标颜色，以及标题插槽与默认插槽的灵活组合。
- BlogHeader 博客头部组件：Logo、标题与 Emoji 动画 2026年6月19日介绍 BlogHeader 组件的设计——圆形 Logo、逐字动画标题、Emoji 尾巴背景，以及鼠标悬浮时的交互效果。
- Blur 与 Quote 组件：模糊文字与图标引用 2026年6月19日介绍两个轻量组件——Blur 让文字模糊、鼠标悬浮恢复清晰；Quote 用大图标搭配文字，打造优雅的引用块效果。
- Badge 徽标组件：自动图标与头像识别 2026年6月19日介绍 Badge 组件的核心能力——外部链接自动获取站点图标、GitHub 链接自动识别用户头像、支持圆形与方形两种形状，以及在文章中灵活嵌入的使用方式。
- Chat 聊天气泡组件：左右对话与中间提示 2026年6月19日介绍一个适合 Astro 博客文章的 Chat 组件，支持右侧自己的消息、左侧他人的消息，以及居中的时间和系统提示。
- Key 按键组件：会亮、能按、可触发事件 2026年6月19日介绍一个适合 Astro 博客的 Key 组件，支持组合键展示、macOS 图标风格、键盘按下高亮，以及按键和点击触发 press 事件。
- Tab 标签页组件：切换展示文字与组件 2026年6月19日介绍 Tab 组件的设计——多标签页切换、命名插槽、居中布局，以及在文章中展示文字和组件交替切换的用法。
- ProseA 链接组件：智能图标与优雅外链 2026年6月19日介绍 ProseA 组件如何自动识别内外部链接、匹配域名图标，并支持自定义 Iconify 图标。
- Timeline 时间轴组件：用节点串起多段内容 2026年6月19日介绍 Timeline 组件的设计思路——按标题组织时间节点、支持单条和多条卡片内容，以及在 MDX 中展示时间线信息的方式。