SponsorLink 组件

SponsorLink 组件

赞助商链接组件集合，用于显示赞助商信息和追踪点击。

导出内容

主赞助商链接组件，显示赞助商 Logo。

"成为赞助商"链接组件。

"使用技术"链接组件。

interface SponsorLinkProps {
  name: string;       // 赞助商名称
  url: string;        // 链接地址
  logo: string;       // Logo 图片路径
  darkLogo?: string;  // 深色模式 Logo（可选）
  className?: string; // 额外的 CSS 类
}
interface BecomeSponsorLinkProps {
  href: string;           // 链接地址
  children: ReactNode;    // 子元素
  className?: string;     // 额外的 CSS 类
}
interface BuiltWithLinkProps {
  href: string;       // 链接地址
  toolName: string;   // 工具名称（用于分析）
  children: ReactNode; // 子元素
}

分析追踪

所有组件都集成分析追踪：

// SponsorLink
analyticsSponsor.click(name, url);

// BecomeSponsorLink  
analyticsSponsor.becomeSponsorClick();

// BuiltWithLink
analyticsSponsor.builtWithClick(toolName);

Logo 显示逻辑

  1. 有 darkLogo：根据主题显示不同 Logo
  2. 无 darkLogo：使用 dark:invert 反转颜色

依赖

  • next/link - 链接组件
  • next/image - 图片组件
  • @/lib/analytics - 分析追踪

使用示例

import { 
  SponsorLink, 
  BecomeSponsorLink, 
  BuiltWithLink 
} from "@/components/layout/sponsor-link";

// 赞助商链接
<SponsorLink
  name="Vercel"
  url="https://vercel.com"
  logo="/sponsors/vercel.svg"
  darkLogo="/sponsors/vercel-dark.svg"
/>

// 成为赞助商
<BecomeSponsorLink href="https://github.com/sponsors/xxx">
  成为赞助商
</BecomeSponsorLink>

// 使用技术
<BuiltWithLink href="https://nextjs.org" toolName="Next.js">
  <NextJsLogo />
</BuiltWithLink>

样式说明

  • 透明度: 60% (opacity-60)
  • 悬停透明度: 100% (hover:opacity-100)
  • Logo 高度: 36px (h-9)

其他

  • 继承父级样式
  • 新标签页打开 (target="_blank")
  • 安全属性 (rel="noopener noreferrer")
← 返回目录