Logo Cloud

一个响应式 Logo 展示组件，用于展示技术栈或合作伙伴，并支持深色模式

预览

Logo 云组件

功能特点

🎨 简洁、响应式布局设计
🖼️ 自动深色模式支持（反色效果）
🌐 多语言支持
🛠️ 易于自定义的 Logo
📱 移动端友好排列

使用方法

在页面中导入并使用 LogoCloud 组件：

page.tsx

import LogoCloud from '@/components/logo-cloud';
 
export default function Page() {
  return (
    <main>
      <LogoCloud />
      {/* 其他内容 */}
    </main>
  );
}

自定义区块内容

您可以通过在 messages/zh.json 文件中设置相应的值来自定义区块标题、副标题和描述。

messages/zh.json

{
  "logos": {
    "title": "我们的技术栈",
    "heading": "由最佳技术驱动",
    "description": "我们利用前沿技术提供最佳体验。"
  }
}

自定义 Logo

可以通过修改 logo-cloud 组件中的 LOGOS 数组来自定义显示的 Logo：

const LOGOS = [
  {
    src: nextjs,
    alt: 'Next.js',
    height: 28
  },
  {
    src: stripe,
    alt: 'Stripe',
    height: 40
  },
  // 添加更多 Logo
];

添加新 Logo

要添加新 Logo：

将 Logo 图片文件添加到 public/images/logos/ 目录
在组件中导入 Logo
将其添加到 LOGOS 数组中，并设置适当的替代文本和高度

import newLogo from '@/public/images/logos/new-logo.svg';
 
const LOGOS = [
  // 现有 Logo...
  {
    src: newLogo,
    alt: '新 Logo',
    height: 40
  }
];

自定义样式

您可以通过修改组件中的 className 来自定义 Logo 的外观：

<Image 
  key={logo.alt} 
  src={logo.src} 
  alt={logo.alt} 
  height={logo.height} 
  style={{ height: logo.height }}
  className="dark:invert dark:grayscale hover:grayscale-0" // 修改此行以获得不同效果
/>