YXK's Blog

Alert 提示框组件演示

Sun, 22 Mar 2026 00:00:00 GMT

import Alert from '../../components/post/Alert.astro';

Alert 提示框组件演示 📢

本文展示 Alert 提示框组件的各种功能和用法。这个组件可以帮助你：

突出显示重要信息
区分不同类型的提示（提醒、信息、问题、警告、错误）
支持卡片风格和扁平风格
自定义标题、图标和颜色

基本用法

提醒（Tip）

这是一个提醒类型的提示框，默认用于显示一般性的提示信息。

支持 Markdown 语法，比如粗体、斜体、行内代码等。

</Alert>

信息（Info）

这是一个信息类型的提示框，用于显示补充说明或背景信息。

你可以在这里添加更多的解释性内容。

</Alert>

问题（Question）

这是一个问题类型的提示框，用于提出问题或引发思考。

默认插槽的超链接粗体 Inline code

</Alert>

警告（Warning）

这是一个警告类型的提示框，用于提醒用户注意潜在的问题或风险。

请仔细阅读以下内容，确保你了解相关风险。

</Alert>

错误（Error）

这是一个错误类型的提示框，用于显示错误信息或失败原因。

请检查你的输入或联系管理员获取帮助。

</Alert>

自定义标题

你可以通过 title 属性自定义标题：

这是带有自定义标题的提示框，标题会覆盖默认的类型标题。

</Alert>

卡片风格

使用 card 属性启用卡片风格（默认启用）：

这是一个卡片风格的提示框，具有渐变背景和更好的视觉效果。

卡片风格适合用于需要特别强调的内容。

</Alert>

扁平风格

使用 flat 属性禁用卡片风格：

这是一个扁平风格的提示框，背景更加简洁。

扁平风格适合用于内容较多或需要节省空间的场景。

</Alert>

自定义图标

你可以通过 icon 属性指定自定义的 Iconify 图标：

使用自定义图标的提示框，这里使用了 ri:lightbulb-fill 图标。

图标可以在 Iconify 或 Yesicon 搜索获取。

</Alert>

另一个自定义图标的示例，使用 carbon:favorite 图标。

</Alert>

自定义颜色

你可以通过 color 属性自定义主题色：

使用自定义颜色的提示框，这里使用了紫色 #8B5CF6。

颜色可以是任何有效的 CSS 颜色值。

</Alert>

使用粉色的提示框，颜色值为 #EC4899。

</Alert>

组合使用

你可以同时使用多个属性来创建独特的提示框：

默认插槽的超链接粗体 Inline code

这是一个组合了多种自定义属性的提示框，包括自定义标题、图标、颜色和卡片风格。

</Alert>

默认插槽的超链接粗体 Inline code

这是一个扁平风格的错误提示框，同样支持自定义标题、图标和颜色。

</Alert>

仅标题，自定义图标和颜色

这个提示框只设置了标题、图标和颜色，内容区域为空。

</Alert>

组件使用方式

在 MDX 文件中导入并使用：

import Alert from '../../components/post/Alert.astro';

<Alert type="tip">
  这是一个提示框
</Alert>

<Alert type="info" title="自定义标题" icon="ri:lightbulb-fill" color="#8B5CF6">
  支持 Markdown 和 **富文本内容**
</Alert>

支持的类型

类型	说明	默认图标	默认颜色
tip	提醒	ph:notepad-bold	#3A7（绿色）
info	信息	ph:info-bold	var(--c-primary)
question	问题	ph:question-bold	#3AF（青色）
warning	警告	ph:warning-bold	#F80（橙色）
error	错误	ph:x-circle-bold	#F33（红色）

Props 属性说明

属性	类型	默认值	说明
type	`'tip' \| 'info' \| 'question' \| 'warning' \| 'error'`	`'tip'`	提示框类型
card	`boolean`	`true`	是否启用卡片风格
flat	`boolean`	`false`	是否使用扁平风格（与 card 相反）
icon	`string`	-	自定义 Iconify 图标
color	`string`	-	自定义主题颜色
title	`string`	-	自定义标题

图标资源

图标可以从以下网站获取：

Iconify - 超过 200,000 个开源图标
Yesicon - 图标搜索和浏览工具

图标格式为 集合名：图标名，例如：

ri:lightbulb-fill
ph:question-bold
carbon:favorite

结语

Alert 组件让博客中的重要信息更加醒目，通过不同的类型和样式帮助读者快速识别内容的性质。

你可以根据需要选择合适的类型和风格，让博客内容更加丰富多彩！🎉

Badge 徽章组件演示

Sun, 22 Mar 2026 00:00:00 GMT

import Alert from '../../components/post/Alert.astro'; import Badge from '../../components/post/Badge.astro';

Badge 徽章组件演示 ️

本文展示 Badge 徽章组件的各种功能和用法。这个组件可以帮助你：

创建美观的链接徽章
自动获取外部网站的图标
GitHub 链接自动显示用户头像
支持圆形和方形两种样式
自定义图标和文本

基本用法

普通带链接

纯文本指定圆形

纯文本指定方形

带个图

外部域名自动获取站点图标

Badge 组件可以自动根据外部链接获取对应的站点图标：

GitHub 链接自动识别头像

GitHub 链接会自动获取用户的头像：

也可以指定为方形：

在其他组件中使用

你可以在其他组件（如 Alert）中嵌套使用 Badge 组件：

</Alert>

组件使用方式

在 MDX 文件中导入并使用：

import Badge from '../../components/post/Badge.astro';

<!-- 基本用法 -->
<Badge link="https://example.com" text="徽章文本" />

<!-- 圆形样式 -->
<Badge text="圆形" round={true} />

<!-- 方形样式 -->
<Badge text="方形" square={true} />

<!-- 自定义图标 -->
<Badge img="https://example.com/icon.png" text="带图标" />

<!-- 在 Alert 中使用 -->
<Alert type="tip">
  <Badge link="https://example.com" text="链接徽章" />
</Alert>

Props 属性说明

属性	类型	默认值	说明
img	`string`	-	自定义图标 URL
text	`string`	-	徽章文本内容
link	`string`	-	链接地址
round	`boolean`	`false`	是否使用圆形样式
square	`boolean`	`false`	是否使用方形样式

样式说明

自动样式规则

有图标时：默认为圆形，除非指定 square={true}
无图标时：默认为方形，除非指定 round={true}

视觉效果

边框和背景色会根据当前文本颜色自动调整
悬停时颜色会加深
外部链接会自动在新标签页打开
鼠标悬停会显示域名提示

图标获取规则

Badge 组件会智能地获取图标：

自定义图标优先：如果提供了 img 属性，直接使用自定义图标
GitHub 头像：如果是 GitHub 链接，自动获取用户头像
站点图标：如果是其他外部链接，使用 Google 服务获取站点 favicon
无图标：如果没有链接或内部链接，不显示图标

暗色模式适配

Badge 组件完全适配暗色模式：

边框颜色自动调整
背景色透明度优化
悬停效果保持一致

结语

Badge 组件让博客中的链接更加美观和实用，通过自动获取图标和智能样式，让读者一眼就能识别链接的类型和来源。

你可以在文章中使用 Badge 组件来：

标注引用的来源
展示相关的 GitHub 项目
链接到社交媒体
美化外部链接

让博客内容更加丰富多彩！🎉

BlogHeader 博客头部组件演示

Sun, 22 Mar 2026 00:00:00 GMT

import Alert from '../../components/post/Alert.astro'; import Badge from '../../components/post/Badge.astro'; import BlogHeader from '../../components/post/BlogHeader.astro';

BlogHeader 博客头部组件演示 🏠

本文展示 BlogHeader 博客头部组件的各种功能和用法。这个组件可以：

显示博客标题和副标题
自定义 Logo 图标
鼠标悬浮时显示 Emoji 动画效果
标题文字动态粗细变化效果
支持自定义配置

基本用法

默认样式

自定义标题和副标题

自定义 Emoji 动画

隐藏标题

不同风格的 Logo

使用 Iconify 图标

使用自定义图片

在不同的场景中使用

在文章开头

在页面顶部

组件使用方式

在 MDX 文件中导入并使用：

import BlogHeader from '../../components/post/BlogHeader.astro';

<!-- 基本用法 -->
<BlogHeader />

<!-- 自定义配置 -->
<BlogHeader 
  title="我的博客" 
  subtitle="记录生活，分享技术"
  logo="https://example.com/logo.png"
  emojiTail={['📝', '💻', '🚀']}
  showTitle={true}
/>

Props 属性说明

属性	类型	默认值	说明
tag	`string`	`'div'`	标题的 HTML 标签
title	`string`	`'纸鹿摸鱼处'`	博客标题
subtitle	`string`	`'纸鹿至麓不知路，支炉制露不止漉'`	博客副标题
logo	`string`	Iconify 图标	Logo 图片 URL
emojiTail	`string[]`	`['📄', '🦌', '', '🐟', '']`	悬浮时显示的 Emoji 数组
showTitle	`boolean`	`true`	是否显示标题文字

动画效果说明

标题文字动画

字体粗细变化：使用字体变体功能，在 300-900 之间循环变化
斜角效果：字体斜角属性动态变化
延迟效果：每个字符有不同的动画延迟，形成波浪效果

Emoji 悬浮动画

悬浮效果：Emoji 会轻微浮动和缩放
模糊效果：悬浮时带有模糊效果，增加层次感
透明度变化：鼠标悬浮时透明度从 0.2 增加到 0.5
延迟效果：每个 Emoji 有不同的动画延迟

字体配置

BlogHeader 组件使用了 阿里妈妈方圆体 字体，该字体支持字体变体功能，可以实现动态的粗细和斜角效果。

字体子集生成

如果需要自定义字体子集，可以使用以下命令：

# 安装工具
pip install fonttools brotli

# 生成字体子集
pyftsubset ./AlimamaFangYuanTi.ttf --text=Header 文本 --flavor=woff2

自定义样式

你可以通过 CSS 覆盖来自定义样式：

/* 修改 Logo 大小 */
.blog-logo {
  height: 4em; /* 默认 3em */
}

/* 修改标题字体大小 */
.header-title {
  font-size: 2em; /* 默认 1.5em */
}

/* 修改副标题透明度 */
.header-subtitle {
  opacity: 0.7; /* 默认 0.5 */
}

暗色模式适配

BlogHeader 组件完全适配暗色模式：

文字颜色自动调整
Logo 阴影效果优化
Emoji 悬浮效果保持一致

性能优化

懒加载：Logo 图片使用 loading="lazy" 延迟加载
动画优化：使用 CSS 动画，GPU 加速
悬浮暂停：鼠标离开时动画暂停，节省资源

结语

BlogHeader 组件让博客的头部更加生动有趣，通过 Emoji 动画和文字动态效果，为访客留下深刻的第一印象。

你可以在以下场景使用 BlogHeader 组件：

博客首页顶部
文章页面开头
个人主页头部
任何需要展示博客标识的地方

让你的博客更加个性化！🎉

Chat 聊天消息组件演示

Sun, 22 Mar 2026 00:00:00 GMT

import Chat from '../../components/post/Chat.astro';

Chat 聊天消息组件演示 💬

本文展示 Chat 聊天消息组件的各种功能和用法。这个组件可以：

显示聊天对话样式
支持系统消息
支持自定义用户消息
显示时间戳
支持撤回消息提示

基本用法

时间戳

系统消息

<Chat system> 纸鹿撤回了一条消息 </Chat>

普通消息

<Chat> 有趣我学到了。 </Chat>

用户消息

右侧消息（自己）

<Chat user="纸鹿" myself> 我们可以聊聊天 </Chat>

带名字的消息

<Chat user="纸鹿" myself> 我还可以有名字 </Chat>

左侧消息（他人）

<Chat user="用户 1"> 有趣我学到了。 </Chat>

完整对话示例

<Chat user="纸鹿" myself> 我们可以聊聊天 </Chat>

<Chat user="纸鹿" myself> 我还可以有名字 </Chat>

<Chat system> 纸鹿撤回了一条消息 </Chat>

<Chat user="用户 1"> 有趣我学到了。 </Chat>

组件使用方式

在 MDX 文件中导入并使用：

import Chat from '../../components/post/Chat.astro';

<!-- 时间戳 -->
<Chat timestamp="2024-11-09 23:39:30" />

<!-- 系统消息 -->
<Chat system>
  系统通知内容
</Chat>

<!-- 自己的消息（右侧） -->
<Chat user="用户名" myself>
  消息内容
</Chat>

<!-- 他人的消息（左侧） -->
<Chat user="用户名">
  消息内容
</Chat>

Props 属性说明

属性	类型	默认值	说明
user	`string`	-	发送消息的用户名
myself	`boolean`	`false`	是否为自己的消息，设置为 `true` 时显示在右侧
system	`boolean`	`false`	是否为系统消息，居中显示
timestamp	`string`	-	时间戳，显示在消息上方

样式说明

消息类型

系统消息
- 居中显示
- 半透明效果
- 用于显示撤回、加入等系统通知
用户消息（右侧）
- 显示在右侧
- 使用主题色背景
- 显示用户名
- 圆角在右上角
普通消息（左侧）
- 显示在左侧
- 使用普通背景色
- 可选显示用户名
- 圆角在左上角

视觉效果

消息气泡采用圆角设计
用户名半透明显示
时间戳使用等宽字体
最大宽度限制为 90%

暗色模式适配

Chat 组件完全适配暗色模式：

消息气泡颜色自动调整
用户名和时间戳透明度保持一致
主题色背景在暗色模式下更柔和

使用场景

你可以在以下场景使用 Chat 组件：

教程文章：模拟对话形式讲解知识点
案例分析：展示真实的聊天记录
产品演示：展示聊天功能效果
故事叙述：用对话形式讲述故事
FAQ：以问答形式呈现常见问题

结语

Chat 组件让博客中的对话内容更加生动直观，通过模拟真实的聊天界面，让读者更容易理解和代入。

你可以在文章中使用 Chat 组件来：

展示对话内容
模拟客服聊天
呈现用户反馈
演示产品功能
讲述故事情节

让博客内容更加丰富多彩！🎉

ProseA 链接组件演示

Sat, 14 Mar 2026 00:00:00 GMT

import ProseA from '../../components/post/ProseA.astro';

ProseA 链接组件演示 🔗

本文展示 ProseA 增强链接组件的各种功能。这个组件可以：

自动识别外部链接并在新标签页打开
根据域名自动匹配对应图标
支持自定义图标
鼠标悬停显示域名提示

内部链接

这是<ProseA href="/blog/welcome-to-my-blog/">内部链接示例</ProseA>，点击后会在当前页面跳转。

外部链接与自动图标

开发者平台

<ProseA href="https://github.com/L33Z22L11/blog-v3">GitHub 仓库</ProseA> - 自动显示 GitHub 图标
<ProseA href="https://gitlab.com">GitLab</ProseA> - 自动显示 GitLab 图标
<ProseA href="https://stackoverflow.com">Stack Overflow</ProseA> - 开发者问答社区
<ProseA href="https://www.npmjs.com">npm 包管理</ProseA> - Node.js 包管理器
<ProseA href="https://vercel.com">Vercel 部署平台</ProseA> - 前端部署服务
<ProseA href="https://www.cloudflare.com">Cloudflare</ProseA> - CDN 和云服务

社交媒体

<ProseA href="https://www.bilibili.com">哔哩哔哩</ProseA> - 自动显示 B站图标
<ProseA href="https://www.zhihu.com">知乎</ProseA> - 中文问答社区
<ProseA href="https://weibo.com">微博</ProseA> - 社交媒体平台
<ProseA href="https://twitter.com">Twitter/X</ProseA> - 国际社交平台
<ProseA href="https://www.youtube.com">YouTube</ProseA> - 视频分享平台

文档与学习

<ProseA href="https://developer.mozilla.org">MDN Web Docs</ProseA> - Web 开发文档
<ProseA href="https://docs.microsoft.com">微软文档</ProseA> - Microsoft 官方文档
<ProseA href="https://www.w3schools.com">W3Schools</ProseA> - Web 技术教程

国内服务

<ProseA href="https://www.baidu.com">百度</ProseA> - 搜索引擎
<ProseA href="https://www.taobao.com">淘宝</ProseA> - 电商平台
<ProseA href="https://www.jd.com">京东</ProseA> - 电商平台
<ProseA href="https://cloud.tencent.com">腾讯云</ProseA> - 云服务商
<ProseA href="https://www.aliyun.com">阿里云</ProseA> - 云服务商

自定义图标

你可以通过 icon 属性指定自定义的 Iconify 图标：

<ProseA href="https://astro.build" icon="simple-icons:astro">Astro 官网</ProseA> - 使用 Astro 图标
<ProseA href="https://vuejs.org" icon="uim:vuejs">Vue.js 官网</ProseA> - 使用 Vue 图标
<ProseA href="https://react.dev" icon="simple-icons:react">React 官网</ProseA> - 使用 React 图标
<ProseA href="https://svelte.dev" icon="simple-icons:svelte">Svelte 官网</ProseA> - 使用 Svelte 图标

图标可以在 Iconify 或 Yesicon 搜索获取。

组件使用方式

在 MDX 文件中导入并使用：

import ProseA from '../../components/post/ProseA.astro';

<ProseA href="https://github.com">GitHub</ProseA>
<ProseA href="https://example.com" icon="ri:link">自定义图标</ProseA>

支持的域名图标

目前支持自动匹配图标的域名包括：

类别	域名
社交媒体	bilibili.com, qq.com, weibo.com, zhihu.com, twitter.com, x.com, facebook.com, instagram.com, youtube.com
开发者平台	github.com, gitlab.com, stackoverflow.com, npmjs.com, vercel.com, netlify.com, cloudflare.com
云服务	aws.amazon.com, azure.com, google.com, firebase.google.com
文档	microsoft.com, mozilla.org, developer.mozilla.org, w3schools.com
国内服务	baidu.com, aliyun.com, tencent.com, taobao.com, tmall.com, jd.com
设计	figma.com, dribbble.com, behance.net
通讯	slack.com, discord.com, telegram.org

为更多站点匹配图标

你可以在 src/utils/icon.ts 中分别为主域名或专门域名（优先级高）添加匹配规则：

// 主域名图标映射
const mainDomainIcons: Record<string, string> = {
  'example.com': 'ri:example-fill',
  // ...
};

// 专门域名图标映射（优先级更高）
export const domainIcons: Record<string, string> = {
  'docs.example.com': 'ri:example-docs-fill',
  // ...
};

结语

ProseA 组件让博客中的链接更加美观和实用，读者可以一眼看出链接指向的平台类型，外部链接也会安全地在新标签页打开。

如果你有想要添加的域名图标，欢迎修改 src/utils/icon.ts 文件来扩展支持！

博客新文章通知与历史修订功能实现

Fri, 13 Mar 2026 00:00:00 GMT

前言

在维护博客的过程中，经常需要更新已发布的文章。如何让读者知道文章有更新？如何展示具体变更内容？本文将介绍我基于 Astro 框架实现的新文章通知与历史修订功能。

功能概述

实现的功能包括：

新文章通知 - 右下角通知面板，显示新发布的文章和更新的文章
文章内差异高亮 - 在文章页面显示具体变更（新增/删除）
跳转到更新处 - 一键跳转到文章变更位置
文章时效性提示 - 显示文章发布/更新时间

技术栈

Astro - 静态站点生成器
IndexedDB - 浏览器本地数据库存储 RSS 数据
diff - JavaScript 差异比较库
RSS - 文章数据源

架构设计

数据流向

RSS 数据
    ↓
NewPostNotification 获取并存储到 IndexedDB
    ↓
比较新旧 RSS 差异（diff）
    ↓
存储差异数据到 localStorage
    ↓
PostDiffInArticle 读取并渲染高亮

组件分工

组件	职责
`NewPostNotification`	全局通知组件，RSS 获取、差异计算、IndexedDB 存储
`PostDiffInArticle`	文章内差异展示，DOM 操作渲染高亮
`PostContentHighlighter`	更新提示 Toast，跳转功能
`PostUpdateNotice`	文章时效性提示

核心实现

1. RSS 存储与差异比较

使用 IndexedDB 存储 RSS 数据，避免重复获取：

const DB_NAME = 'blog-rss-store-v2';
const STORE_OLD = 'posts';
const STORE_NEW = 'posts_new';

function openDB() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(DB_NAME, 1);
        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore(STORE_OLD, { keyPath: 'id' });
            db.createObjectStore(STORE_NEW, { keyPath: 'id' });
        };
        // ...
    });
}

使用 diff 库比较文章内容：

import * as Diff from 'diff';

function computeDiff(oldText, newText) {
    const diffs = Diff.diffLines(oldText, newText);
    return diffs.filter(part => part.added || part.removed);
}

2. 文章内差异高亮

差异数据格式：

{
    title: "文章标题",
    isUpdated: true,
    diff: {
        content: [
            { value: "旧内容", removed: true },
            { value: "新内容", added: true }
        ]
    }
}

渲染逻辑：

// 找到匹配的 DOM 元素并添加样式
const target = findBlockByText(container, addRow.text);
if (target) {
    target.classList.add("post-inline-diff-add-target");
    target.style.textDecorationLine = "underline";
    target.style.textDecorationColor = "#4ade80";
} else {
    // 创建新元素显示新增内容
    const node = createAdditionNode(text);
    container.appendChild(node);
}

3. 样式设计

/* 新增内容 - 绿色下划线 */
.post-inline-diff-add-target {
    text-decoration-line: underline !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #4ade80 !important;
}

/* 删除内容 - 红色删除线 */
.post-inline-diff-del-target {
    color: #f87171 !important;
    text-decoration-line: line-through !important;
    text-decoration-color: #f87171 !important;
}

4. 触发条件

Diff 样式在以下情况自动显示：

从网站内部页面点击文章（通过 document.referrer 检测）
URL 带 ?diff=1 参数
URL 带 #post-diff 锚点
localStorage 中有通知状态（从通知面板点击）
调试模式 ?__diff_debug=1

const isFromInternal = document.referrer?.startsWith(window.location.origin);
const hasNotificationState = !!localStorage.getItem(NOTIFICATION_STATE_KEY);
const shouldAutoShow = matched && (isFromInternal || hasNotificationState);
const shouldApply = isDebug || diffParam || hasDiffHash || shouldAutoShow;

使用方式

对于读者

查看通知 - 访问博客时，右下角通知面板自动显示新文章和更新文章
查看差异 - 点击更新文章，自动显示变更高亮（红色删除/绿色新增）
跳转定位 - 点击"跳转到更新处"按钮，快速定位到变更位置

对于开发者

调试模式：

http://localhost:4321/blog/article-slug?__diff_debug=1

强制显示差异：

http://localhost:4321/blog/article-slug?diff=1#post-diff

清除 IndexedDB（调试用途）：

http://localhost:4321/?__diff_debug_cleanup=1

实现细节

IndexedDB 版本管理

当数据库结构变化时，需要升级版本。为避免版本冲突，生产环境使用了新的数据库名称：

const DB_NAME = 'blog-rss-store-v2'; // 使用 v2 避免与旧版本冲突
const DB_VERSION = 1;

路径匹配

处理不同部署路径的情况：

function stripBasePath(pathname) {
    const base = normalizePathname(BASE_URL);
    const p = normalizePathname(pathname);
    if (p.startsWith(`${base}/`)) return p.slice(base.length) || '/';
    return p;
}

RSS 路径适配

生产环境可能使用不同的 basePath，需要尝试多个 RSS 路径：

const possiblePaths = [
    basePath ? `${basePath}/rss.xml` : '/rss.xml',
    '/rss.xml',
    './rss.xml',
    'rss.xml'
];

图片变更处理

图片变更通过 outline 样式标记：

.post-inline-diff-add-target-img {
    outline: 2px solid #4ade80;
    outline-offset: 2px;
}

.post-inline-diff-del-target-img {
    outline: 2px solid #f87171;
    opacity: 0.7;
}

遇到的问题与解决方案

1. 子模块部署问题

问题：Cloudflare Pages 部署时无法克隆 git 子模块

解决：移除 .gitmodules 文件，将 Blogs_worker 和 fuwari 作为普通目录保留在本地

2. IndexedDB 版本冲突

问题：生产环境数据库版本与本地不一致，导致 VersionError

解决：修改数据库名称为 blog-rss-store-v2，重新开始

3. 变量重复定义

问题：NOTIFICATION_STATE_KEY 在组件顶部和函数内重复定义，导致构建后变量提升问题

解决：移除函数内的重复定义

4. 日期字段不匹配

问题：友链朋友圈 API 返回的日期字段是 created 而不是 date

解决：统一使用 created 字段

5. Referrer 不可靠

问题：生产环境 document.referrer 可能为空

解决：同时检查 localStorage 中是否有通知状态

总结

通过 RSS + IndexedDB + diff 的组合，实现了完整的新文章通知和历史修订功能。读者可以：

及时了解博客更新
直观查看文章变更
快速定位更新位置

这套方案不依赖后端，完全在浏览器端实现，适合静态博客部署。

参考

如何为 Astro 博客添加 AI 摘要功能

Fri, 13 Mar 2026 00:00:00 GMT

如何为 Astro 博客添加 AI 摘要功能

在这篇文章中，我将详细介绍如何为 Astro 静态博客添加 AI 摘要功能，让读者在打开文章时能够快速了解文章的核心内容。

功能效果

添加 AI 摘要后，文章页面会显示一个精美的摘要卡片：

🤖 机器人图标 + "AI 摘要" 标题
✨ 打字机动画效果展示摘要
🏷️ "AI Generated" 标签
⚠️ 免责声明

实现原理

整个方案分为三个部分：

摘要生成脚本 - 调用 AI API 为文章生成摘要
摘要展示组件 - 在文章页面渲染摘要卡片
样式设计 - 美观的卡片样式和动画效果

第一步：创建摘要生成脚本

创建 scripts/generateSummary.ts 文件：

import fs from 'node:fs'
import path from 'node:path'
import dotenv from 'dotenv'

dotenv.config()

const ROOT = process.cwd()
const BLOG_DIR = path.join(ROOT, 'src', 'content', 'blog')
const SUMMARY_MAX_LEN = 150

// 扫描所有文章
function findMarkdownEntries(dir: string): string[] {
  const results: string[] = []
  const items = fs.readdirSync(dir, { withFileTypes: true })
  for (const item of items) {
    const fp = path.join(dir, item.name)
    if (item.isDirectory()) {
      results.push(...findMarkdownEntries(fp))
    } else if (item.isFile() && /\.mdx?$/.test(item.name)) {
      results.push(fp)
    }
  }
  return results
}

// 提取 frontmatter 和正文
function splitFrontmatterAndBody(content: string) {
  content = content.replace(/^\uFEFF?/, '').trimStart()
  const re = /^---\r?\n[\s\S]*?\r?\n---(?=\r?\n|$)/
  const match = re.exec(content)
  if (!match) return { frontmatter: '', body: content }
  const fm = match[0]
  const body = content.slice(match.index + fm.length).replace(/^\r?\n*/, '')
  return { frontmatter: fm, body }
}

// 清洗正文内容
function sanitizeBodyForAPI(body: string): string {
  return body
    .replace(/```[\s\S]*?```/g, '')
    .replace(/`[^`]*`/g, '')
    .replace(/!\[[^\]]*\]\([^\)]+\)/g, '')
    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
    .replace(/^[ \t]*#{1,6}[^\n]*\n/gm, '')
    .replace(/\r?\n+/g, ' ')
    .replace(/\s{2,}/g, ' ')
    .trim()
}

// 调用 AI API 生成摘要
async function callSummaryAPI(title: string, body: string): Promise<string | null> {
  const api = process.env.AI_SUMMARY_API
  const key = process.env.AI_SUMMARY_KEY
  const model = process.env.AI_SUMMARY_MODEL || 'lite'

  if (!api) return null

  const prompt = `你是一个文章摘要生成助手。请用一句话（不超过120字）简洁总结给定文章的核心内容，使用陈述句，结尾必须用句号。只返回摘要内容，不要有任何前缀或解释。

标题：${title}

正文：${body.slice(0, 3000)}`

  try {
    const res = await fetch(api, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': key ? `Bearer ${key}` : ''
      },
      body: JSON.stringify({ model, content: prompt })
    })
    if (!res.ok) throw new Error('HTTP ' + res.status)
    const data = await res.json()
    let summary = data.choices?.[0]?.message?.content || data.summary || data.content
    if (typeof summary !== 'string') return null
    summary = summary.trim()
    // 清理可能的 markdown 代码块
    summary = summary.replace(/^```[\s\S]*?\n/, '').replace(/```$/, '').trim()
    // 确保以句号结尾
    if (!summary.endsWith('。') && !summary.endsWith('.')) {
      summary = summary + '。'
    }
    // 限制长度
    if (summary.length > SUMMARY_MAX_LEN) {
      const lastPeriod = summary.lastIndexOf('。', SUMMARY_MAX_LEN)
      if (lastPeriod > 50) {
        summary = summary.slice(0, lastPeriod + 1)
      } else {
        summary = summary.slice(0, SUMMARY_MAX_LEN - 1) + '。'
      }
    }
    return summary
  } catch (err) {
    console.error('API 调用失败:', err)
    return null
  }
}

// 在 frontmatter 中写入 summary
function upsertSummaryInFrontmatter(frontmatter: string, summary: string): string {
  if (!frontmatter) {
    return `---\nsummary: "${summary.replace(/"/g, '\\"')}"\n---\n`
  }
  const lines = frontmatter.split('\n')
  let endIdx = lines.findIndex((l, i) => i > 0 && l.trim() === '---')
  if (endIdx === -1) endIdx = lines.length
  const bodyLines = lines
    .slice(1, endIdx)
    .filter(l => !/^\s*summary\s*:/i.test(l))
  const rebuilt = ['---', ...bodyLines, `summary: "${summary.replace(/"/g, '\\"')}"`, '---']
  return rebuilt.join('\n') + '\n'
}

// 主函数
async function run() {
  const files = findMarkdownEntries(BLOG_DIR)
  console.log(`找到 ${files.length} 篇文章`)

  for (const file of files) {
    const content = fs.readFileSync(file, 'utf8')
    const { frontmatter, body } = splitFrontmatterAndBody(content)
    
    // 检查是否已有摘要
    if (/summary\s*:/i.test(frontmatter)) {
      console.log(`跳过已有摘要: ${path.basename(file)}`)
      continue
    }

    const title = frontmatter.match(/title:\s*['"]?([^'"\n]+)['"]?/)?.[1] || ''
    const cleanBody = sanitizeBodyForAPI(body)
    
    console.log(`生成摘要: ${path.basename(file)}`)
    const summary = await callSummaryAPI(title, cleanBody)
    
    if (summary) {
      const newFrontmatter = upsertSummaryInFrontmatter(frontmatter, summary)
      const newContent = newFrontmatter + body
      fs.writeFileSync(file, newContent, 'utf8')
      console.log(`✓ 已写入摘要: ${summary.slice(0, 50)}...`)
    } else {
      console.log(`✗ 生成失败: ${path.basename(file)}`)
    }
  }
}

run().catch(console.error)

第二步：配置环境变量

创建或修改 .env 文件：

# AI 摘要生成配置
AI_SUMMARY_API=https://your-api-endpoint.com/v1/chat/completions
AI_SUMMARY_KEY=your-api-key
AI_SUMMARY_MODEL=gpt-3.5-turbo
AISUMMARY_CONCURRENCY=2
AISUMMARY_COVER_ALL=false

第三步：创建摘要展示组件

创建 src/components/AISummary.astro：

---
interface Props {
  summary: string;
}

const { summary } = Astro.props;
---

<div class="aisummary-container">
  <div class="aisummary-title">
    <div class="aisummary-title-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
        <path d="M34.7..." fill="currentColor"/>
      </svg>
    </div>
    <div class="aisummary-title-text">AI 摘要</div>
    <div class="aisummary-tag">AI Generated</div>
  </div>
  <div class="aisummary-explanation" data-ai-summary={summary}>{summary}</div>
  <div class="aisummary-disclaimer">本摘要由 AI 生成，仅供参考，内容准确性请以原文为准。</div>
</div>

<script>
  // 打字机动画
  let isRunning = false;
  
  function typeWriter(element: HTMLElement, text: string) {
    if (isRunning) return;
    isRunning = true;
    
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) {
      element.textContent = text;
      return;
    }
    
    element.innerHTML = '<span class="text-zinc-400">生成中...</span><span class="blinking-cursor"></span>';
    
    let i = 0;
    const type = () => {
      if (i < text.length) {
        element.innerHTML = text.slice(0, i + 1) + '<span class="blinking-cursor"></span>';
        i++;
        setTimeout(type, 20);
      } else {
        element.textContent = text;
        isRunning = false;
      }
    };
    
    // 使用 IntersectionObserver 在可见时开始动画
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setTimeout(type, 300);
        observer.disconnect();
      }
    }, { threshold: 0.1 });
    
    observer.observe(element.closest('.aisummary-container')!);
  }
  
  function init() {
    const el = document.querySelector('.aisummary-explanation');
    if (!el) return;
    const summary = el.getAttribute('data-ai-summary');
    if (summary) typeWriter(el as HTMLElement, summary);
  }
  
  document.addEventListener('DOMContentLoaded', init);
  document.addEventListener('astro:page-load', init);
</script>

第四步：添加样式

在 src/styles/global.css 中添加：

.aisummary-container {
  @apply rounded-xl border border-zinc-200/80 bg-zinc-50/80 p-4 my-5;
  @apply dark:border-zinc-700/80 dark:bg-zinc-900/60;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.aisummary-title {
  @apply flex items-center gap-2 text-zinc-600 dark:text-zinc-400;
}

.aisummary-title-text {
  @apply font-semibold text-sm;
}

.aisummary-tag {
  @apply text-xs font-semibold px-2 py-1 rounded ml-auto bg-blue-500 text-white;
}

.aisummary-explanation {
  @apply mt-3 px-4 py-3 rounded-lg border border-zinc-200/60 bg-white/90;
  @apply dark:border-zinc-700/60 dark:bg-zinc-800/60;
  @apply text-sm leading-relaxed text-zinc-700 dark:text-zinc-300;
  position: relative;
}

.aisummary-explanation::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  @apply bg-blue-500 rounded-l-lg;
}

.aisummary-disclaimer {
  @apply text-xs text-zinc-400 dark:text-zinc-500 mt-2 px-1;
}

.blinking-cursor {
  @apply inline-block w-2 h-4 align-middle ml-1 rounded-sm bg-blue-500;
  animation: blinking-cursor 0.6s infinite;
}

@keyframes blinking-cursor {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

第五步：修改文章布局

在 src/content/layouts/BlogPost.astro 中添加：

---
import AISummary from '../../components/AISummary.astro';
// ... 其他导入

type Props = {
  // ... 其他属性
  summary?: string;
};

const { summary, /* ... */ } = Astro.props;
---

<!-- 在文章正文前显示摘要 -->
{summary && <AISummary summary={summary} />}

第六步：更新内容配置

在 src/content.config.ts 中添加 summary 字段：

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  schema: ({ image }) =>
    z.object({
      // ... 其他字段
      summary: z.string().optional(),
    }),
});

第七步：生成摘要

运行脚本为所有文章生成摘要：

npx tsx scripts/generateSummary.ts

强制重新生成所有摘要：

# PowerShell
$env:AISUMMARY_COVER_ALL="true"; npx tsx scripts/generateSummary.ts

# Bash
AISUMMARY_COVER_ALL=true npx tsx scripts/generateSummary.ts

配置说明

环境变量	说明	默认值
`AI_SUMMARY_API`	AI API 端点	-
`AI_SUMMARY_KEY`	API 密钥	-
`AI_SUMMARY_MODEL`	模型名称	lite
`AISUMMARY_CONCURRENCY`	并发数	2
`AISUMMARY_COVER_ALL`	是否覆盖已有摘要	false

注意事项

API 兼容性：脚本使用 content 字段发送请求，如果你的 API 使用 messages 格式，需要修改 callSummaryAPI 函数
字数控制：摘要限制在 150 字以内，确保简洁明了
本地兜底：当 API 不可用时，脚本会使用本地规则生成简单摘要
无障碍支持：打字机动画会检测 prefers-reduced-motion 设置，尊重用户的动画偏好

总结

通过以上步骤，你就可以为 Astro 博客添加一个美观实用的 AI 摘要功能。读者打开文章时，会看到一个带有打字机动画的摘要卡片，快速了解文章核心内容。

参考

如何实现博客评论邮件通知功能

Wed, 11 Mar 2026 00:00:00 GMT

如何实现博客评论邮件通知功能

在这篇文章中，我将详细介绍如何为 Astro + Cloudflare Workers 博客添加评论邮件通知功能，让你在新评论到来时第一时间收到邮件提醒。

技术栈

前端: Astro + React
后端: Cloudflare Workers
邮件服务: QQ 邮箱 SMTP
数据库: Cloudflare D1

整体架构

用户发表评论
    ↓
前端调用 API → Cloudflare Worker
    ↓
保存到 D1 数据库
    ↓
异步发送邮件通知 (ctx.waitUntil)
    ↓
QQ 邮箱 SMTP 发送邮件

核心实现步骤

1. 后端邮件服务

在 Cloudflare Worker 中创建 SMTP 客户端：

// src/email/smtp.ts
import { connect } from 'cloudflare:sockets';

export interface SMTPConfig {
  host: string;
  port: number;
  secure: boolean;
  auth: {
    user: string;
    pass: string;
  };
}

export class SMTPClient {
  private socket: ReturnType<typeof connect> | null = null;
  private reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
  private writer: WritableStreamDefaultWriter<Uint8Array> | null = null;
  private encoder = new TextEncoder();
  private decoder = new TextDecoder();

  constructor(private config: SMTPConfig) {}

  async send(message: SMTPMessage): Promise<void> {
    try {
      await this.connect();
      await this.ehlo();
      await this.auth();
      await this.mailFrom(message.from);
      
      for (const to of message.to) {
        await this.rcptTo(to);
      }
      
      await this.data(message);
      await this.quit();
    } finally {
      await this.close();
    }
  }
  
  // ... 其他方法
}

2. QQ 邮箱配置

QQ 邮箱需要使用 端口 465 + 直接 TLS，而不是 587 + STARTTLS：

export function createQQMailConfig(auth: { user: string; pass: string }): SMTPConfig {
  return {
    host: 'smtp.qq.com',
    port: 465,        // 使用直接 TLS
    secure: true,     // 启用 TLS
    auth,
  };
}

⚠️ 注意: QQ 邮箱的密码不是登录密码，而是需要在邮箱设置中生成的 授权码。

3. 邮件模板

创建美观的 HTML 邮件模板：

private buildEmailTemplate(data: CommentNotificationData): string {
  return `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { 
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      max-width: 600px; 
      margin: 0 auto; 
      padding: 20px;
      background: #f5f5f5;
    }
    .container { 
      background: white; 
      border-radius: 8px; 
      padding: 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .button { 
      display: inline-block; 
      background: #2563eb; 
      color: white; 
      padding: 12px 24px; 
      text-decoration: none; 
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📝 新评论通知</h1>
    <p>你的博客收到了一条新评论</p>
    <a href="${postUrl}#comment-${data.commentId}" class="button">
      查看评论
    </a>
  </div>
</body>
</html>`;
}

4. 异步发送邮件

使用 ctx.waitUntil() 确保邮件发送不会阻塞 HTTP 响应：

async function handleCommentsPost(request: Request, env: Env, ctx: ExecutionContext) {
  // 1. 保存评论到数据库
  const comment = await saveComment(data, env);
  
  // 2. 异步发送邮件通知
  ctx.waitUntil(
    emailService.sendCommentNotification({
      postSlug: data.post_id,
      commentId: comment.id,
      commentContent: data.content,
      authorName: user.name,
      authorUsername: user.username,
      createdAt: Date.now(),
    }).catch((err) => {
      console.error('Failed to send comment notification:', err);
    })
  );
  
  return new Response(JSON.stringify(comment), { status: 201 });
}

5. 环境变量配置

在 wrangler.toml 中配置 SMTP：

[vars]
SMTP_PROVIDER = "qq"
SMTP_USER = "your-email@qq.com"
EMAIL_TO = "your-email@foxmail.com"
EMAIL_FROM_NAME = "博客评论通知"
NOTIFY_ON_COMMENT = "true"

# 敏感信息使用 secrets
# wrangler secret put SMTP_PASS

踩坑记录

1. STARTTLS 问题

最初使用端口 587 + STARTTLS 时遇到 WritableStream has been closed 错误。解决方案是改用端口 465 + 直接 TLS。

2. 异步任务执行

Worker 会在 HTTP 响应返回后终止，需要使用 ctx.waitUntil() 来确保邮件发送任务完成。

3. 邮件链接路径

确保邮件中的文章链接路径正确（如 /blog/ 而不是 /posts/）。

最终效果

当有新评论时，你会收到如下邮件：

标题: 📝 新评论：{作者名} 评论了「{文章标题}」
内容: 包含评论者信息、评论内容和查看链接
回复通知: 如果评论是回复，会通知被回复者

总结

通过 Cloudflare Workers 的 TCP Sockets API，我们可以直接连接 SMTP 服务器发送邮件，无需部署额外的邮件服务。这种方式：

✅ 无需额外部署
✅ 免费使用
✅ 响应快速
✅ 支持主流邮箱

希望这篇教程对你有帮助！如有问题欢迎在评论区留言。

欢迎来到异飨客的博客

Wed, 11 Mar 2026 00:00:00 GMT

欢迎来到异飨客的博客 👋

这是一篇展示博客 Markdown 渲染效果 的示例文章。让我们一起探索各种 Markdown 语法在这个博客中的呈现效果吧！

文本格式

Markdown 支持多种文本格式：

粗体文字 - 使用双星号包裹
斜体文字 - 使用单星号包裹
~~删除线~~ - 使用波浪线包裹
行内代码 - 使用反引号包裹
链接文本 - 使用方括号和圆括号

列表

无序列表

第一项
第二项
- 嵌套项 1
- 嵌套项 2
第三项

有序列表

第一步
第二步
第三步
1. 子步骤 A
2. 子步骤 B

任务列表

[x] 已完成的项目
[x] 另一个已完成的项目
[ ] 待完成的项目
[ ] 另一个待完成的项目

代码块

行内代码

使用 console.log('Hello World') 可以快速展示代码片段。

代码块

// JavaScript 示例
function greet(name) {
  return `Hello, ${name}! Welcome to my blog.`;
}

console.log(greet('访客'));

# Python 示例
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(f"斐波那契数列第 10 项: {fibonacci(10)}")

/* CSS 示例 */
.blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.8;
}

表格

功能	描述	支持情况
标题	六级标题支持	✅ 完整支持
列表	有序/无序/任务列表	✅ 完整支持
代码	语法高亮	✅ 完整支持
表格	对齐和格式化	✅ 完整支持
数学公式	LaTeX 支持	✅ 完整支持

引用

"知识就是力量。" —— 弗朗西斯·培根

💡 提示这是一个提示块，可以用来强调重要信息。

分隔线

使用三个或更多的星号、减号或下划线可以创建分隔线：

图片

数学公式

行内公式：$E = mc^2$

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

折叠内容

<details> <summary>点击展开更多内容</summary>

这是折叠起来的内容。可以用来隐藏一些补充信息，保持文章整洁。

隐藏的细节 1
隐藏的细节 2
隐藏的细节 3

</details>

结语

感谢你阅读这篇示例文章！这个博客支持丰富的 Markdown 语法，让你可以专注于内容创作。

如果你有任何问题或建议，欢迎在评论区留言交流！🎉

组件展示

Mon, 01 Jan 2024 00:00:00 GMT

import EmojiClock from '../../components/post/EmojiClock.astro'; import Key from '../../components/post/Key.astro'; import LinkBanner from '../../components/post/LinkBanner.astro'; import Pic from '../../components/post/Pic.astro'; import Poetry from '../../components/post/Poetry.astro'; import Quote from '../../components/post/Quote.astro'; import Tab from '../../components/post/Tab.astro'; import Timeline from '../../components/post/Timeline.astro'; import Tip from '../../components/post/Tip.astro'; import VideoEmbed from '../../components/post/VideoEmbed.astro';

EmojiClock

现在几点了？

静态模式（每半小时）

<EmojiClock datetime="2024-01-01T12:00:00" /> (12:00) <EmojiClock datetime="2024-01-01T12:30:00" /> (12:30) <EmojiClock datetime="2024-01-01T13:00:00" /> (13:00)

旋转模式（每分钟）

<EmojiClock rotate datetime="2024-01-01T12:00:00" /> (12:00) <EmojiClock rotate datetime="2024-01-01T12:05:00" /> (12:05) <EmojiClock rotate datetime="2024-01-01T12:30:00" /> (12:30)

当前时间

<EmojiClock /> (当前时间) <EmojiClock rotate /> (旋转模式)

Key

按下键时会亮，可以通过 @press 配置触发事件，鼠标点击也会触发事件，博客全站搜索框的按键提示使用了这个组件。

纯 Code

指定修饰符、图标、文本（macOS 自动使用图标）

组合键

热血组合技

上上下下左右左右BA <Key icon code="ArrowUp" /> <Key icon code="ArrowUp" /> <Key icon code="ArrowDown" /> <Key icon code="ArrowDown" /> <Key icon code="ArrowLeft" /> <Key icon code="ArrowRight" /> <Key icon code="ArrowLeft" /> <Key icon code="ArrowRight" /> <Key code="B" /> <Key code="A" />

LinkBanner

带背景图的链接卡片，无描述时自动显示域名。

完整配置

自动提取域名

无背景图

Pic

用于展示图片，支持说明文字、点击后打开灯箱缩放。

基础用法

指定尺寸

禁用缩放

仅使用 alt

Poetry

用于展示诗歌内容，支持标题、作者、落款，内容居中显示并保留换行格式。

完整配置

<Poetry title="诗有诗的标题" author="一名作者" footer="可选的落款"

如你所见，我，是一首—— 诗。 </Poetry>

仅标题和内容

<Poetry title="静夜思"> 床前明月光，疑是地上霜。举头望明月，低头思故乡。 </Poetry>

无标题

<Poetry> 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 </Poetry>

Quote

用于展示引用内容，支持自定义图标（使用 Iconify 图标库），也支持通过 iconHtml 使用 Emoji 或颜文字作为图标。

默认图标

自定义 Iconify 图标

<Quote icon="ph:files-duotone"> 令图标有所指，引用亦有中心。 </Quote>

使用 Emoji/颜文字作为图标

<Quote iconHtml="ヾ(•ω•`)o"> 图标也可以是 Emoji 或颜文字，或者英文装饰。 </Quote>

<Quote iconHtml="💡"> 灵感就像闪电，稍纵即逝，需要及时记录。 </Quote>

<Quote iconHtml="❝"> To be or not to be, that is the question. </Quote>

Tab

标签页组件，支持切换不同内容。将内容按顺序放入组件内，第一个子元素对应第一个标签，以此类推。

基础用法

<Tab tabs={['组件', '语法']}> <div> 这是组件标签页的内容。 </div> <div> 这是语法标签页的内容。 </div> </Tab>

自定义默认展示标签

通过 active 属性设置默认展示的标签页（从1开始计数）。

<Tab tabs={['当当当', '高级交互！', '就是藏得有点深']} active={3}> <div> 第一个标签页的内容。 </div> <div> 第二个标签页的内容。 </div> <div> 你找到我了吗？（默认展示第三个标签页） </div> </Tab>

居中显示

<Tab tabs={['居中', '标签页']} center> <div> 标签页整体居中显示。 </div> <div> 内容也会跟随居中。 </div> </Tab>

Timeline

时间线组件，用于展示时间顺序的内容。

基础用法

Tip

提示组件，显示带下划线的文本，支持鼠标悬停显示提示框和点击复制功能。

基础用法（带提示框）

我是一条小提示，<Tip text="我没有图标" tip="提示的内容是提示" />，鼠标悬停查看提示。

带图标和提示

复制功能

<Tip copy>+v 点击就能复制，太方便了！</Tip>

VideoEmbed

视频嵌入组件，支持多种视频平台（原始视频、Bilibili 等），自动适配不同平台的宽高比。

原始视频

支持自定义海报图，适合展示本地或直链视频。

Bilibili 视频

自定义宽高比

更多组件示例...

YXK's Blog

Alert 提示框组件演示

Alert 提示框组件演示 📢

基本用法

提醒（Tip）

信息（Info）

问题（Question）

警告（Warning）

错误（Error）

自定义标题

卡片风格

扁平风格

自定义图标

自定义颜色

组合使用

仅标题，自定义图标和颜色

组件使用方式

支持的类型

Props 属性说明

图标资源

结语

Badge 徽章组件演示

Badge 徽章组件演示 ️

基本用法

普通带链接

纯文本指定圆形

纯文本指定方形

带个图

外部域名自动获取站点图标

GitHub 链接自动识别头像

在其他组件中使用

更多示例

社交媒体

开发者平台

文档资源

自定义图标

组件使用方式

Props 属性说明

样式说明

自动样式规则

视觉效果

图标获取规则

暗色模式适配

结语

BlogHeader 博客头部组件演示

BlogHeader 博客头部组件演示 🏠

基本用法

默认样式

自定义标题和副标题

自定义 Emoji 动画

隐藏标题

不同风格的 Logo

使用 Iconify 图标

使用自定义图片

在不同的场景中使用

在文章开头

在页面顶部

组件使用方式

Props 属性说明

动画效果说明

标题文字动画

Emoji 悬浮动画

字体配置

字体子集生成

自定义样式

暗色模式适配

性能优化

结语

Chat 聊天消息组件演示

Chat 聊天消息组件演示 💬

基本用法

时间戳

系统消息

普通消息

用户消息

右侧消息（自己）

带名字的消息

左侧消息（他人）

完整对话示例

更多场景