update 🖼 从糖果机展示NFTs

docs/Solana-Co-Learn/module2/displayings-nfts-in-a-ui/displaying-nfts-from-a-candy-machine/README.md

@@ -6,40 +6,39 @@ sidebar_class_name: green
 
 # 🖼 从糖果机展示NFTs
 
-现在我们已经铸造了一个NFT，我们将学习如何铸造一系列的NFT。我们将使用Candy Machine来完成这个任务——这是一个Solana程序，允许创作者将他们的资产上链。这不是创建系列的唯一方式，但在Solana上它是标准的，因为它具有许多有用的功能，如机器人保护和安全随机化。你知道看到闪亮的新iPhone有多令人兴奋吗？稀有的NFT有点像那样。对于优秀的艺术家来说，即使只是看着它们也很有趣。毕竟，艺术就是用来欣赏的！让我们弄清楚如果我们只有Candy Machine的地址，我们如何展示NFTs。
+现在我们已经铸造了一个NFT，接下来我们将学习如何铸造一系列的NFT。为此，我们将利用Candy Machine来实现——这是Solana的一个程序，使创作者能够将他们的资产上链。虽然这并非创建系列的唯一方式，但在Solana上它却成了标准，因为它具备了许多有用的功能，例如机器人保护和安全随机化。你是否感受到过看到闪亮的新iPhone时的那股兴奋感？稀有的NFT有点儿类似于此。对于优秀的艺术家而言，仅仅是观看这些NFT也极富乐趣。毕竟，艺术的本质就是用来欣赏的！接下来，我们将探讨如果我们只有Candy Machine的地址，应该如何展示NFTs。
 
-你能猜到这里发生了什么不同吗？是的，我们只是在SDK上使用了一种不同的方法！
+你能猜到这里有何不同之处吗？没错，我们仅在SDK上采用了一种不同的方法！
 
 ![](./img/candy-machine-nft.png)
 
-既然这里没有钱包，我们就不需要使用 `walletAdapterIdentity` ，只需要使用`metaplex`对象即可。
+由于这里并没有钱包，我们不需要使用 `walletAdapterIdentity`，只需使用`metaplex`对象即可。
 
 ![](./img/find-nf.png)
 
-我们这里只有几个选择 - `findByAddress` 是我们想要的一个。
+我们在此有几个选择 - `findByAddress` 就是我们所需的。
 
 ![](./img/find-by-address.png)
 
-与我们为单个NFT所获得的类似，我们将获得整个糖果机实例的元数据。 `items` 字段是糖果机中所有NFT的数组。每个项目都不会包含我们想要的内容，而是会指向一个我们可以从中获取资产的URI。
+与我们为单个NFT所获取的相似，我们将会得到整个糖果机实例的元数据。`items` 字段是糖果机内所有NFT的数组。每个项目都不会直接包含我们想要的内容，而是会引向一个我们可以从中提取资产的URI。
 
 ![](./img/find-by-address-result.png)
 
-由于收藏品可能非常庞大，我们不会一次性获取所有的NFT。相反，我们将根据分页系统仅获取我们想要展示的NFT。
+鉴于收藏品可能会相当庞大，我们不会一次性获取所有的NFT。相反，我们将基于分页系统，只获取我们想要展示的NFT。
 
-让我们来绘制一些像素吧！
+那么，让我们一起来绘制一些像素吧！
 
-## 🥁 请拿来一个糖果机
+## 🥁 请准备一个糖果机
 
+你可以从上一节的进度继续，或者使用我们上次使用的相同模板（从起始分支开始即可）。
 
-您可以继续上一节的进度，或者使用上次我们使用的相同模板（起始分支即可）。
+赶紧跳入 `FetchCandyMachine.tsx` 文件吧。你会发现一些设置已经为你准备好了。我们将使用 `getPage` 函数从糖果机上获取某“页面”上的物品。在此之前，我们需要获取糖果机的元数据账户。
 
-快进入 `FetchCandyMachine.tsx` 。你会看到一些设置已经为你准备好了。我们将使用 `getPage` 函数从糖果机上获取“页面”上的物品。在此之前，我们需要获取糖果机的元数据账户。
-
-在空的 `fetchCandyMachine` 函数上方设置 `metaplex` 对象的连接
+在空的 `fetchCandyMachine` 函数上方设置 `metaplex` 对象的连接。
 
 ```js
 export const FetchCandyMachine: FC = () => {
-	// placeholder CMv2 address
+  // 占位符 CMv2 地址
   const [candyMachineAddress, setCandyMachineAddress] = useState("")
   const [candyMachineData, setCandyMachineData] = useState(null)
   const [pageItems, setPageItems] = useState(null)
@@ -49,81 +48,80 @@ export const FetchCandyMachine: FC = () => {
   const metaplex = Metaplex.make(connection)
   ```
 
-在创建有状态变量时，请确保添加您的Candy Machine地址
+在创建有状态变量时，请确保添加你的Candy Machine地址。
 
 ```js
 export const FetchCandyMachine: FC = () => {
   const [candyMachineAddress, setCandyMachineAddress] = useState("CM_ADDRESS_HERE")
   ...
 ```
 
-接下来，我们将完成 `fetchCandyMachine` 。我们将使用之前看到的 `findByAddress` 方法。
+接下来，我们将完善 `fetchCandyMachine` 函数。我们将使用之前看到的 `findByAddress` 方法。
 
 ```js
 export const FetchCandyMachine: FC = () => {
-	...
+  ...
 
-  // fetch candymachine by address
+  // 通过地址获取糖果机
   const fetchCandyMachine = async () => {
 
-    // Set page to 1 - we wanna be at the first page whenever we fetch a new Candy Machine
+    // 设置页面为1 - 我们想要在获取新糖果机时始终位于第一页
     setPage(1)
 
-    // fetch candymachine data
+    // 获取糖果机数据
     try {
       const candyMachine = await metaplex
         .candyMachinesV2()
         .findByAddress({ address: new PublicKey(candyMachineAddress) })
 
       setCandyMachineData(candyMachine)
     } catch (e) {
-      alert("Please submit a valid CMv2 address.")
+      alert("请输入有效的CMv2地址。")
     }
   }
-	...
+  ...
 }
 ```
 
+注意：Metaplex CLI的最新版本在函数调用的末尾不需要 `run()`。
 
-注意：Metaplex CLI的最新版本在函数调用的末尾不需要 `run()` 。
-
-现在是重要的部分 - 浏览我们将获得的CM数据。以下是 `getPage` 函数的样子：
+现在来到重要的部分 - 浏览我们将获取的CM数据。以下是 `getPage` 函数的样子：
 
 ```js
 export const FetchCandyMachine: FC = () => {
-	...
+  ...
 
-	// paging
+  // 分页
   const getPage = async (page, perPage) => {
     const pageItems = candyMachineData.items.slice(
       (page - 1) * perPage,
       page * perPage
     )
 
-    // fetch metadata of NFTs for page
+    // 获取页面中NFT的元数据
     let nftData = []
     for (let i = 0; i < pageItems.length; i++) {
       let fetchResult = await fetch(pageItems[i].uri)
       let json = await fetchResult.json()
       nftData.push(json)
     }
 
-    // set state
+    // 设置状态
     setPageItems(nftData)
   }
-	...
+  ...
 }
 
 ```
 
-我们在这里做的是将 `items` 数组切割成大小为10的块。然后我们获取页面中每个NFT的元数据，并将其存储在 `nftData` 中。最后，我们将 `pageItems` 状态变量设置为刚刚获取的 `nftData` 。
+我们在这里做的是将 `items` 数组切割成大小为10的部分。然后我们获取页面上每个NFT的元数据，并将其存储在 `nftData` 中。最后，我们将 `pageItems` 状态变量设置为刚刚获取的 `nftData`。
 
-这意味着我们的应用程序在任何时候只会渲染当前页面的NFT。不错！
+这意味着我们的应用程序在任何时候只会渲染当前页面的NFT。相当棒！
 
 让我们填写 `prev` 和 `next` 函数：
 
 ```js
-// previous page
+// 上一页
 const prev = async () => {
   if (page - 1 < 1) {
     setPage(1)
@@ -132,32 +130,32 @@ const prev = async () => {
   }
 }
 
-// next page
+// 下一页
 const next = async () => {
   setPage(page + 1)
 }
 ```
 
-当用户点击“上一个”和“下一个”按钮时，这些将会运行，这些按钮只会在 `pageItems` 不为空时显示（即当我们获取了一个CM的NFT时）。
+当用户点击“上一页”和“下一页”按钮时，这些功能将运行。这些按钮只会在 `pageItems` 不为空时显示（即当我们获取了CM的NFT时）。
 
-现在我们需要一些 `useEffects` 来开始。整个过程一开始可能会有点困惑，所以让我们一步一步来解析。
+现在我们需要一些 `useEffects` 来开始。整个过程一开始可能有点复杂，所以让我们一步一步解释。
 
-- 1. 在页面加载时运行 `fetchCandyMachine` 函数（如果 `candyMachineAddress` 不为空）
-- 2. 每当使用 `fetchCandyMachine` 获取糖果机时，将 `page` 设置为1，这样你就可以得到第一页。
-- 3. 每当 `candyMachineData` 或 `page` 发生变化（即输入新的CM地址或点击下一个/上一个按钮），加载页面。
+- 1. 在页面加载时运行 `fetchCandyMachine` 函数（如果 `candyMachineAddress` 不为空）。
+- 2. 每当使用 `fetchCandyMachine` 获取糖果机时，将 `page` 设置为1，这样你就可以从第一页开始。
+- 3. 每当 `candyMachineData` 或 `page` 发生变化时（即输入新的CM地址或点击下一个/上一个按钮），重新加载页面。
 
-这是代码中的样子：
+以下是代码示例：
 
 ```js
 export const FetchCandyMachine: FC = () => {
-	...
+  ...
 
-  // fetch placeholder candy machine on load
+  // 页面加载时获取占位符糖果机
   useEffect(() => {
     fetchCandyMachine()
   }, [])
 
-  // fetch metadata for NFTs when page or candy machine changes
+  // 当页面或糖果机发生变化时获取NFT的元数据
   useEffect(() => {
     if (!candyMachineData) {
       return
@@ -168,4 +166,4 @@ export const FetchCandyMachine: FC = () => {
 }
 ```
 
-快去 `localhost:3000` 试试吧！你应该能看到你的糖果机上的NFT的第一页。
+快到 `localhost:3000` 上试试吧！你应该能够看到你的糖果机上NFT的第一页。