跳转到正文
教程

如何将 NFT 作品集添加到您的网站或应用程序 (2026)

了解如何使用 Gizmolab UI 将 NFT 作品集添加到您的网站或应用程序。本指南涵盖两个支持的选项：使用代码安装 NFT Portfolio 组件或将其嵌入为不带自定义代码的小部件。

Gizmolab 团队

·10 分钟阅读
分享:

NFT 投资组合允许用户直接在您的产品内查看钱包地址所拥有的 NFTs。这通常用于用户配置文件、仪表板、门控访问和社区页面。

在本指南中，我们介绍 两种支持的方法来添加 NFT 投资组合 Gizmolab 用户界面:

  1. 使用 Gizmolab UI 组件添加带有代码的 NFT 投资组合
  2. 将 NFT 投资组合嵌入为小部件，无需自定义代码

两个选项都使用 相同的 Gizmolab UI NFT 产品组合，因此您可以根据需要的控制程度进行选择。

需要定制 NFT 投资组合？

获得 Gizmolab 团队的专家指导,为您的产品构建定制的 NFT 体验。

查看组件联系我们

NFT 产品组合包括哪些内容

的 Gizmolab UI NFT 组合 component 默认情况下提供以下功能:

  • 查看 NFTs 由 钱包 地址拥有
  • 支持连接的 钱包 和手动地址输入
  • 页面化 NFT 网格,固定页面大小为 12
  • 装载骨骼、空状态和错误处理
  • 缺失元数据的 NFTs 图像倒影

此行为相同,无论您是否与代码安装组件,还是将其嵌入为小组件。

选项 1：添加带有代码的 NFT 投资组合

此选项适用于团队使用 React 或 Next.js 构建自定义 Web3 应用程序。

何时使用此选项

  • 您正在构建一个完整的 Web3 产品或仪表板
  • 你想要完全控制布局和风格
  • 您计划通过自定义逻辑扩展 NFT 组合

使用的技术堆栈

Gizmolab UI NFT 产品组合使用:

  • Dynamic 钱包 连接
  • 用戶帳戶( ) 钱包 国家
  • 阿尔基米亚SDK 为了收集NFTs由业主
  • TanStack React 查询 用于缓存和页面化
  • 维姆 地址验证和支票金额格式化
  • / UI 构建块的组件

所有这些逻辑都已经在 Gizmolab UI 组件内部有线。

第 1 步：安装依赖项

安装 EVM 版本所需的依赖性。

终端
npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

第 2 步：添加所需的 UI 组件

安装该组合使用的 shadcn UI 组件。

终端
npx shadcn@latest 添加卡入口骨骼按钮

第三步：添加环境变量

创建 a .env 添加你的 Alchemy API 键。

. ENV 的
ALCHEMY_API_KEY=your_mainnet_key

步骤 4：渲染 NFT 投资组合组件

导入和渲染 NFT 组合从 Gizmolab 用户界面.

一旦渲染,该组件将自动支持:

  • 连接 钱包 模式
  • 公共地址搜索
  • NFT 使用 Alchemy 的页面化 pageKey
  • 加载、空、错误状态

无需额外的数据采集逻辑。

默认情况下包含的用户体验行为

该组件已经处理生产边缘案例:

  • 不有效的 钱包 地址在收集前被拒绝
  • NFTs 没有图像使用位置持有器
  • 页面限制为每页 12 NFTs
  • 用户可以切换 钱包 和地址模式
准备好使用
Gizmolab UI NFT 组合组件已准备好生产。

选项 2：添加 NFT 作品集作为嵌入小部件

此选项适用于希望添加 NFT 组合的团队 没有编写应用程序代码.

何时使用此选项

  • 您正在使用 CMS、Webflow、Framer 或静态网站
  • 你想快速发射
  • 您不需要深度UI定制

嵌入小部件的工作原理

Gizmolab UI 提供了托管的 NFT 组合小工具,可以使用 iframe 嵌入。

嵌入式widget包括:

  • 钱包 连接
  • 手动地址输入
  • NFT 页面
  • 与基于代码的组件相同的UI和逻辑
同一生产组件
这不是一个简化版本。 这是同一个生产组件,由Gizmolab主持。

嵌入片段示例

HTML
<iframe
  src="https://ui.gizmolab.io/embed/nft-portfolio"
  width="100%"
  height="720"
  loading="lazy"
></iframe>

您可以插入此 widget 中:

  • 营销页面
  • 个人资料页
  • 社区门户
  • 管理员 dashboard
  • 文档网站

小部件配置选项

根据您的设置,嵌入式可以支持:

  • 默认 钱包 地址
  • 只读时尚
  • 高度和布局限制
  • 主题 对齐

这使得非技术团队能够在没有工程参与的情况下发送NFT组合。

代码与嵌入：您应该选择哪一个？

要求推荐选项
Web3 完整应用程序代码
营销或CMS页面包装
定制 UI 或逻辑代码
最快的发射包装
SEO专注页面代码

您可以从嵌入式视图开始,并在以后迁移到基于代码的组件,而不会改变用户体验。

搜索引擎优化笔记

如果搜索可见性很重要:

  • 使用的 基于代码的选择 对于索引的页面,如 /portfolio/[address]
  • 添加描述性内容在组合上方
  • 包含 FAQ 内容在组件下方
  • 主要用于营销或认证视图使用嵌入式

常见问题解答

用户可以在不连接钱包的情况下查看 NFT 投资组合吗？
是的。两个选项都支持手动钱包地址输入，允许用户在不连接自己钱包的情况下查看任何钱包的NFT集合。
嵌入小部件是否使用相同的数据源？
是的。基于代码的组件和嵌入小部件都使用 Alchemy 获取 NFT 所有权数据。
我可以自定义 NFT 投资组合 UI 吗？
完全定制仅在基于代码的选项中可用。 嵌入式视图为主题和布局提供了有限的配置选项。
NFT投资组合可以支持多个EVM链吗？
是的。该组件可以扩展为支持 Polygon、Base、Arbitrum 和其他 EVM 兼容链。

结论

有有有 支持的两种方式 使用 Gizmolab UI 添加 NFT 组合:

  • 安装 NFT 组合组件与代码,以实现完全控制
  • 嵌入 NFT 投资组合小组件,立即部署

两种选项都使用相同的生产级别实现。

如果您需要自定义设置、多链支持或完全集成 Web3 产品,请 Gizmolab可以为你建造它.

总结

  • 您可以通过 React 组件(安装和自定义)或嵌入式小组件(复制粘贴)添加 NFT 组件。
  • 两种选项都使用相同的生产级 Gizmolab UI 实现。
  • Gizmolab提供该组件,并可扩展为多链或定制产品需求。

相关资源

→ Gizmolab UI NFT 组合组件Gizmolab UI 图书馆Web3 开发服务DApp 开发服务DApp 开发指南
标签：NFT 投资组合Web3钱包整合NFTEthereumGizmolab 用户界面反应Next.jstutorialguide

觉得这篇文章有帮助吗？与其他人分享！

分享:

需要定制的 NFT 投资组合解决方案？

无论您需要多链支持、自定义风格或完全集成的 Web3 仪表板,我们的团队都可以帮助您构建它。

查看 NFT 组合组件联系我们
Gizmolab UI 图书馆Web3 开发服务