DaisyUI组件

本页面展示如何把 daisyUI↗ 组件类作为 astro-smart-links 的类名，让链接直接复用组件库的样式。每个预览区都是该配置的真实输出（不显示图标的示例通过 content: null 关闭了默认的 ↗ 图标）。

徽章样式链接

把链接渲染成 daisyUI 徽章：

徽章样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

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

smartLinks({
  internalLinkClass: 'badge badge-primary',
  externalLinkClass: 'badge badge-secondary',
  brokenLinkClass: 'badge badge-error',
  content: null,
}),

按钮样式链接

把链接渲染成 daisyUI 按钮：

按钮样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

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

smartLinks({
  internalLinkClass: 'btn btn-primary btn-sm',
  externalLinkClass: 'btn btn-secondary btn-sm',
  brokenLinkClass: 'btn btn-error btn-sm',
  content: null,
}),

链接样式

使用 daisyUI 的 link 组件类：

链接样式

内部链接

关于页面

外部链接

GitHub

断开链接

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

smartLinks({
  internalLinkClass: 'link link-primary',
  externalLinkClass: 'link link-secondary',
  brokenLinkClass: 'link link-error',
  content: null,
}),

卡片样式链接

把链接本身渲染成卡片：

卡片样式链接

内部链接

关于页面

外部链接

GitHub

断开链接

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

smartLinks({
  internalLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl hover:shadow-2xl transition-shadow duration-300 text-primary font-semibold',
  externalLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl hover:shadow-2xl transition-shadow duration-300 text-secondary font-semibold',
  brokenLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl text-error font-semibold line-through opacity-75 cursor-not-allowed',
  content: null,
}),

提示框链接

配合 wrapperTemplate 把链接包进 daisyUI 提示框，并用 meta.className 应用链接类：

提示框链接

内部链接

外部链接

断开链接

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

smartLinks({
  internalLinkClass: 'link link-hover link-primary',
  externalLinkClass: 'link link-hover link-secondary',
  brokenLinkClass: 'link link-hover link-error',
  wrapperTemplate: (node, type, meta) => {
    const variants = {
      internal: { className: 'tooltip tooltip-primary', tip: '跳转到关于页面' },
      external: { className: 'tooltip tooltip-secondary', tip: '在新标签页打开' },
      broken: { className: 'tooltip tooltip-error', tip: '此链接已失效' },
    };
    const { className, tip } = variants[type];

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

    return {
      type: 'element',
      tagName: 'div',
      properties: { className: [className], 'data-tip': tip },
      children: [node],
    };
  },
}),

主题自适应链接

daisyUI 的颜色来自主题变量，链接会随主题自动切换：

主题自适应链接

内部链接

关于页面

外部链接

GitHub

断开链接

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

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

smartLinks({
  internalLinkClass: 'link link-primary',
  externalLinkClass: 'link link-accent',
  brokenLinkClass: 'link link-error',
  content: null,
}),

组合多个组件

在按钮中追加徽章，组合多种组件类：

组合多个组件

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

smartLinks({
  internalLinkClass: 'btn btn-primary btn-sm gap-2',
  externalLinkClass: 'btn btn-secondary btn-sm gap-2',
  brokenLinkClass: 'btn btn-error btn-sm gap-2',
  wrapperTemplate: (node, type, meta) => {
    const labels = { internal: '内部', external: '外部', broken: '失效' };

    node.children.push(h('span', { className: 'badge badge-sm' }, labels[type]));
    node.properties.className = [...(node.properties.className || []), meta.className];

    return node;
  },
}),

下一步

继续浏览：

Tailwind 样式 - 使用 Tailwind 工具类定义链接样式
高级功能 - 学习 wrapperTemplate 与自定义转换