基本功能演示

本页面展示了 rehype-smart-links 的基本功能。您可以看到不同类型的链接是如何被处理和样式化的。

内部链接

内部链接会被自动识别并应用特定的样式。例如：

首页 - 链接到网站首页
关于页面 - 链接到关于页面
不存在的页面 - 链接到不存在的页面（会被标记为断开链接）

断开链接

插件会自动检测并标记指向不存在页面的链接：

断开的链接示例 - 这个页面不存在
另一个断开的链接 - 这个页面也不存在

外部链接

外部链接会自动添加适当的属性，包括 target="_blank" 和 rel="noopener noreferrer"：

GitHub↗ - 链接到 GitHub
MDN Web 文档↗ - 链接到 MDN
Astro 文档↗ - 链接到 Astro 文档

配置示例

要启用这些功能，只需在您的配置文件中添加以下代码：

// Astro 配置示例 (astro.config.mjs)
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';

export default defineConfig({
  markdown: {
    rehypePlugins: [[rehypeSmartLinks, {
      // 基本配置选项
      internalLinkClass: 'internal-link',
      brokenLinkClass: 'broken-link',
      externalLinkClass: 'external-link'
    }]]
  }
});

下一步

浏览更多示例：

高级功能 - 查看高级功能和自定义选项
CSS 自定义样式 - 了解如何使用 CSS 自定义链接样式
自定义图标 - 学习如何向链接添加自定义图标

目录