Tailwind样式

本页面展示如何把 Tailwind CSS↗ 工具类作为 astro-smart-links 的类名。每个示例都可以直接复制到 astro.config.mjs，预览区就是该配置的真实输出（不显示图标的示例通过 content: null 关闭了默认的 ↗ 图标，图标示例见自定义图标）。

基础样式

用颜色和下划线区分链接类型：

基础 Tailwind 样式

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'text-blue-600 hover:text-blue-800 underline transition-colors',
  externalLinkClass: 'text-purple-600 hover:text-purple-800 underline transition-colors',
  brokenLinkClass: 'text-red-600 hover:text-red-800 line-through transition-colors',
  content: null,
}),

带图标的链接

用 wrapperTemplate 配合内联 SVG 为每类链接添加图标：

带图标的链接

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';
import { h } from 'hastscript';

const icons = {
  internal: 'M13 7l5 5m0 0l-5 5m5-5H6',
  external: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',
  broken: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
};

smartLinks({
  internalLinkClass: 'inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 transition-colors',
  externalLinkClass: 'inline-flex items-center gap-1 text-purple-600 hover:text-purple-800 transition-colors',
  brokenLinkClass: 'inline-flex items-center gap-1 text-red-600 hover:text-red-800 transition-colors',
  wrapperTemplate: (node, type, meta) => {
    const svg = h('svg', {
      className: 'w-4 h-4',
      fill: 'none',
      stroke: 'currentColor',
      viewBox: '0 0 24 24',
      xmlns: 'http://www.w3.org/2000/svg',
    }, [
      h('path', {
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': '2',
        'd': icons[type],
      }),
    ]);

    if (type === 'broken') {
      node.children.unshift(svg);
    } else {
      node.children.push(svg);
    }

    node.properties.className = [...(node.properties.className || []), meta.className];
    return node;
  },
}),

按钮样式链接

把链接渲染成完整的按钮：

按钮样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200',
  externalLinkClass: 'inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors duration-200',
  brokenLinkClass: 'inline-block px-4 py-2 bg-red-100 text-red-700 font-medium rounded-lg line-through opacity-75 cursor-not-allowed',
  content: null,
}),

卡片样式链接

用卡片类包裹链接，适合文章列表和导航：

卡片样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'block p-4 rounded-lg border border-base-300 bg-base-100 shadow-sm hover:shadow-md transition-shadow text-blue-600 font-semibold',
  externalLinkClass: 'block p-4 rounded-lg border border-base-300 bg-base-100 shadow-sm hover:shadow-md transition-shadow text-purple-600 font-semibold',
  brokenLinkClass: 'block p-4 rounded-lg border border-base-300 bg-base-100 shadow-sm text-red-600 font-semibold line-through opacity-75 cursor-not-allowed',
  content: null,
}),

带过渡动画的链接

用 transition 和位移动画增加悬停反馈：

带过渡动画的链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium transition-transform duration-200 hover:translate-x-1',
  externalLinkClass: 'inline-flex items-center gap-1 text-purple-600 hover:text-purple-800 font-medium transition-transform duration-200 hover:-translate-y-0.5',
  brokenLinkClass: 'inline-flex items-center gap-1 text-red-600 hover:text-red-700 font-medium line-through transition-transform duration-200 hover:rotate-1',
  content: null,
}),

暗色模式适配

使用 dark: 变体同时适配明暗主题：

暗色模式适配

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline transition-colors',
  externalLinkClass: 'text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 underline transition-colors',
  brokenLinkClass: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 line-through transition-colors',
  content: null,
}),

徽章样式链接

用圆角背景把链接做成标签：

徽章样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';

smartLinks({
  internalLinkClass: 'inline-flex items-center px-3 py-1 text-sm rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200',
  externalLinkClass: 'inline-flex items-center px-3 py-1 text-sm rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 transition-colors duration-200',
  brokenLinkClass: 'inline-flex items-center px-3 py-1 text-sm rounded-full bg-red-100 text-red-700 line-through opacity-75 cursor-not-allowed',
  content: null,
}),

综合方案

组合图标、下划线与过渡效果，形成一套完整样式：

综合样式方案

内部链接

关于页面

外部链接

GitHub

断开链接

import { smartLinks } from 'astro-smart-links';
import { h } from 'hastscript';

const icons = {
  internal: 'M13 7l5 5m0 0l-5 5m5-5H6',
  external: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',
  broken: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
};

smartLinks({
  internalLinkClass: 'inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 underline decoration-2 underline-offset-2 font-medium transition-colors',
  externalLinkClass: 'inline-flex items-center gap-1 text-purple-600 hover:text-purple-800 underline decoration-2 underline-offset-2 font-medium transition-colors',
  brokenLinkClass: 'inline-flex items-center gap-1 text-red-600 hover:text-red-800 underline decoration-wavy decoration-2 underline-offset-2 font-medium transition-colors',
  wrapperTemplate: (node, type, meta) => {
    const svg = h('svg', {
      className: 'w-4 h-4',
      fill: 'none',
      stroke: 'currentColor',
      viewBox: '0 0 24 24',
      xmlns: 'http://www.w3.org/2000/svg',
    }, [
      h('path', {
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': '2',
        'd': icons[type],
      }),
    ]);

    if (type === 'broken') {
      node.children.unshift(svg);
    } else {
      node.children.push(svg);
    }

    node.properties.className = [...(node.properties.className || []), meta.className];
    return node;
  },
}),

下一步

继续浏览：

自定义图标 - 使用 wrapperTemplate 添加自定义图标
DaisyUI 组件 - 用 daisyUI 组件构建链接样式