跳转到内容
astro-smart-linksastro-smart-links

基本演示

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

内部链接

Section titled “内部链接”

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

断开链接

Section titled “断开链接”

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

外部链接

Section titled “外部链接”

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

配置示例

Section titled “配置示例”

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

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


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

下一步

Section titled “下一步”

浏览更多示例：