DE{CODE}：Atlas 的新功能

WP Engine 的 Atlas 無頭開發工具的更新將幫助您滿足客戶最苛刻的要求。 使用免費的 Sandbox 帳戶，此演示將向您展示如何將這些新功能添加到您的無頭站點。 觀看下面的視頻，開始構建您迄今為止性能最高、最安全的網站！

會議幻燈片

全文抄本

凱倫·梅斯：嗨。 我是 WP Engine 開發者關係團隊的 Kellen。 在本次演講中，我們將探討 Atlas 生態系統中一些令人興奮的新功能。 我們將看到如何在 WP Engine 用戶門戶中創建一個新的 Atlas 應用程序並選擇此組合藍圖。 通過這樣做，我們可以在幾分鐘內在互聯網上獲得一個成熟的無頭 WordPress 網站。

然後我們將了解如何將該項目克隆到我們的​​本地機器並為本地開發進行設置，以便我們可以對我們的新站點進行自定義。 然後我們將注意力轉向 Atlas Content Modeler，看看我們如何使用它來創建一個名為 Photos 的新自定義內容模型。

這個照片內容模型將有一些自己的自定義字段，包括一個可重複的字段，這是 Atlas Content Modeler 最近推出的一項新功能。 最後，我們將了解如何在我們的前端 JavaScript 應用程序中進行一些自定義開發並查詢該自定義照片數據，然後將其呈現到頁面。

創建 WP Engine 帳戶並登錄到用戶門戶的 Atlas 頁面後，我可以繼續並單擊按鈕創建新應用程序。 從這裡開始，我們可以從一個藍圖開始，這是一個預建站點，或者從現有的 repo 中提取。 讓我們從藍圖開始。 現在我們可以選擇我們喜歡使用的藍圖。 因此，我們將選擇 Portfolio 藍圖，然後單擊 Continue。

下一步是將此應用程序連接到 GitHub。 因此，我們將單擊此按鈕，然後登錄 GitHub。 之後，我們將看到此屏幕，表明我們的應用程序已獲得授權。 所以接下來，我們需要實際克隆這個 repo。 因此，我們將單擊克隆藍圖，然後為我們的新存儲庫命名。 然後單擊按鈕使用此藍圖模板創建一個新的存儲庫。

所以在這裡你可以看到這個新的應用程序倉庫已經在我的 GitHub 帳戶上創建了。 現在我們需要將這個 repo 鏈接到我們的 Atlas 應用程序。 所以回到用戶門戶，我們將向下滾動到“選定存儲庫”部分。 如果您允許訪問所有存儲庫，您可能會在列表中看到它。 如果沒有，您可以單擊“管理存儲庫”。

在此頁面上，您將能夠選擇 Atlas 應該能夠訪問的存儲庫。 因此，我們將在列表中選擇我們的回購協議。 單擊保存，現在當我們返回到用戶面板時，我們會看到我們添加的存儲庫彈出在列表中。 所以繼續選擇它。 對於我們應用程序的區域，我們將堅持使用美國中部。 最後，單擊按鈕創建此 Atlas 應用程序。

在這裡，我們將看到一條通知，表明我們的應用程序正在構建中。 因此，我們將稍等片刻。 現在我們的 Atlas 應用程序已經完成構建，我們可以繼續並單擊此 Atlas URL 鏈接以查看我們在 Internet 上實時運行的新 Atlas 應用程序。 所以在主頁上，我們會看到我們的最新帖子列表。 我們會看到我們的推薦。

我們可以前往投資組合頁面並在此處查看我們的投資組合項目列表。 我將點擊進入一個單獨的項目。 接下來，我們將查看博客。 因此，請轉到博客頁面並在此處查看我們的帖子網格。 我們也可以點擊查看單個博客文章頁面。 然後準備好，設置，點擊，返回到我們的主頁。

所以您可能會注意到這些頁面轉換非常快。 我們立即從一頁切換到另一頁。 這是使用無頭 WordPress 架構的好處之一。 接下來，讓我們看看幕後支持這種體驗的 WordPress 網站。 因此，讓我們回到 WP Engine 用戶門戶，從這裡我們可以單擊此鏈接到鏈接的 WordPress 環境。

在這裡，我們可以單擊 WP Admin 以發送到我們網站的 WordPress 管理員。 所以這是我們支持這種體驗的後端。 讓我們轉到帖子，我們可以在這裡看到它已經預先填充了許多虛擬博客帖子。 所以這就是我們新站點的所有數據的來源。 我們也來看看插件。 在這裡您可以看到已經安裝並激活了幾個插件以啟用無頭 WordPress 開發。

讓我們特別注意 Atlas Content Modeler。 因此，在邊欄中，我們單擊 Content Modeler。 您可以在這裡看到已經為我們創建了兩個自定義內容，項目和推薦。 我們可以在側邊欄中看到這些。 所以我們有項目，這些項目的列表，以及推薦書和這些項目的列表。 所以這就是我們在前端站點中看到的項目和推薦數據的來源。

所以我們取得了一些很大的進步。 我們已經了解瞭如何從用戶門戶創建新的 Atlas 應用程序。 當我們這樣做時，它不僅會創建一個前端 JavaScript 應用程序來為您的網站頁面提供服務，還會創建 WordPress 後端來增強這種體驗並為您省去將兩者鏈接起來的麻煩。 它將這兩者連接起來，以便前端應用程序能夠從 WordPress 後端獲取數據。

從那裡我們能夠查看前端應用程序並看到它在線實時運行，以及在 WordPress 管理員中四處瀏覽並查看一些自定義數據類型或數據模型以及一些虛擬數據是為我們創造的。 所以在很短的時間內，您可以看到我們現在有一個功能完備的 headless WordPress 應用程序正在運行。

但是，如果此時我們想要進行更改怎麼辦？ 如果您正在構建一個實際的投資組合網站，並且您自己認為這真的很酷，該怎麼辦？ 這是一個很好的開端。 但現在我想做一些改變。 我想做一些代碼更改，可能會換掉一些顏色或向我的站點添加其他頁面。 我怎麼做？ 我如何開始本地開發？ 接下來我們一探究竟。

首先，我們將復制鏈接到我們的 GitHub 存儲庫，然後繼續在命令行上運行 git clone 來克隆我們的項目。 從這裡，我們可以 CD 進入該項目目錄，然後運行 NPM install 來安裝我們項目的依賴項。 完成後，我們將繼續在代碼編輯器中打開項目。

接下來，我們需要設置一些環境變量。 所以你會看到這裡已經為我們創建了一個示例文件。 現在我們只需要確保它具有正確的值。 所以回到用戶門戶，我們將單擊“管理變量”，然後查看生產應用程序使用的環境變量。 繼續將它們複製並粘貼到我們的應用程序中，以便我們的本地應用程序將使用與生產相同的環境變量。

這裡的最後一步是重命名這個文件，從它的末尾刪除 .sample 以便它生效。 現在，我們在這裡使用的前端應用程序構建在 Faust.js 之上。 而 Faust，為了完成它所做的數據獲取魔法，需要能夠運行所謂的 GraphQL 自省查詢。

所以這基本上是 Faust 詢問 WordPress 後端，嘿，GraphQL 模式中有哪些數據可供我查詢？ 因此，我們需要啟用內省才能使其正常工作。 我們將在這裡回到 WordPress 管理員並轉到 GraphQL，然後在側邊欄中進行設置。

在“設置”頁面上，我們將向下滾動到我們看到“啟用公共內省”的位置，然後繼續並單擊該框。 當我們在這裡時，我建議還啟用圖形調試模式。 這將為您提供更具描述性的調試消息。 完成後，我們可以繼續並單擊按鈕以保存我們的更改。 現在終於可以打開終端並運行 NPM run generate 了。 一旦完成，最後，NPM run dev 使我們的應用程序在本地啟動並運行。

現在，我將單擊這個 localhost 3,000 鏈接，我們可以看到我們的網站確實在本地運行。 所以我們說我們想在其中添加一些內容來定制我們的網站。 現在我們已經為本地開發做好了準備，我們可以做到這一點。 因此，假設對於這個項目，我們不僅希望擁有博客文章，還希望擁有我們擁有的一些自定義內容，例如我們看到的投資組合項目以及這些推薦。

除了自定義內容之外，假設我們還想添加更多內容。 除了創建博客文章和創建投資組合項目的人之外，假設該網站的客戶也是一名攝影師，他們想要展示他們拍攝的照片。 我們如何向我們的站點添加自定義內容類型或自定義內容模型以支持這張照片的數據、查詢該數據，然後在我們的前端應用程序中顯示照片？ 讓我們接下來這樣做。

因此，我將返回這裡的 WordPress 管理員，然後我們將轉到 Content Modeler。 所以我們以前去過屏幕一次。 我們瀏覽了項目和推薦書。 我們可以看到，這些是作為此藍圖的一部分為我們創建的自定義內容模型。 我可以點擊其中的每一個，看到每個模型都有自己的一組單獨的字段。

因此，例如，項目將具有這些單獨的字段。 項目和推薦都反映在側邊欄中。 然後是每個字段的字段。 如果我單擊一個項目，然後單擊一個現有項目或轉到添加新項目，無論哪種方式，我們都會看到所有這些字段都反映在這裡。 因此，我們的內容創建者將看到他們輸入此數據所需的所有字段。 好的。

但是，對於我們的自定義內容，我們需要一個新模型。 因此，我將繼續並通過單擊此處的此按鈕創建一個新模型。 所以我會稱這張照片為。 對於復數名稱，我們只在末尾加上一個 S 並將其稱為照片。 這個自動生成的 API 標識符——在這裡，這個 ID——我沒問題。 照片對我來說很好看。 對於 API 可見性，我們希望確保單擊 public，因為我們希望能夠通過 GraphQL 查詢此數據。 對於我們的模型圖標，也許相機之類的東西適合用於照片。 現在我將單擊“創建”。

就這樣，我們的照片內容模型就創建好了。 所以在這一點上，它說為內容模型選擇你的第一個字段。 截至本次錄製，這些是 Atlas Content Modeler 支持的字段類型。 對於我們想要在此網站上展示的照片，讓我們使用其中的一些。

假設我們要給每張照片一個標題。 所以我會說標題，然後將其稱為照片標題作為 API 標識符。 這就是它在 GraphQL 模式中可用的方式。 這就是它的目的。 我們會說我們想用它作為條目標題。 單行文本很好。 因此，繼續並單擊“創建”。

對於我們的下一個字段，假設我們要為照片捕獲該圖像本身。 所以我會加號。 在這裡，我們將創建一個新字段。 我們將稱之為一個圖像。 實際上，對於類型，我們需要選擇媒體，因為它將是一張照片。 所以我將其命名為圖像。 然後在這裡，我將繼續將其設置為每個帖子的特色圖片。 所以我將單擊它，我們也會將其設為必填項。 所以我們總是知道它會在那裡。 然後點擊創建。

給你。 這是我們的第二個領域。 對於第三個，讓我們來描述一下。 所以我會加號。 對於這一個，這將是一個富文本字段。 所以我們會說描述，這將針對該字段進行描述。 然後我們想要的最後一個是主題。 所以我們將使用這個字段來捕捉照片中顯示的內容。 因此，如果它是日落時的山脈照片，例如，就像我們的一張照片一樣，照片中的某些主題可能是山脈、星星、天空等。 只是照片中出現的事物的列表。

將有不同的方式來存儲這些數據。 例如，您可以創建自定義分類法，然後為其中的每一個分配術語。 所以這些照片中的每一張都可以有一個或多個術語。 那將是一種方法。 不過，就我們的目的而言，我們對能夠根據類似標籤或分類法將照片分組在一起不感興趣。

相反，此列表實際上僅用於網站上的顯示目的。 麻煩的是，如果我們在這裡點擊加號，我們把它變成一個文本字段，好吧，那麼我們只會得到其中一個，對吧？ 如果還有更多呢？ 我們無法提前知道一張給定的照片可能有多少這樣的主題，對吧？ 這就是 ACM 的可重複字段功能真正派上用場的地方。 那麼讓我們看看它是什麼樣的。

我將在此處將其設為文本字段，並將其命名為 subjects。 然後使該字段可重複。 所以這是關鍵。 我們將繼續並單擊它。 我們將把它保留為單行文本字段，然後點擊創建。 就這樣，我們的照片內容模型現在已經創建了。 我們可以在側邊欄中看到它。

因此，如果我單擊此處的照片，我們將看到我在這裡提前創建了一個虛擬照片。 但是如果我們創建 Add New，您會看到這反映了——這裡的字段反映了我們在內容模型中添加的內容。 所以我們得到一個標題。 我們有機會附上一張圖片。 我們有一個用於照片描述的富文本字段，以及一個可重複的字段，用於添加一個或多個主題。

那麼讓我們看看我們可以在這裡做什麼。 我將單擊“添加精選圖片”。 我將從我的機器中選擇一個。 讓我們來看看。 上傳完成後，我們會給它一些替代文本。 我們會說，一朵白花，就像那樣，完成了。 這就是我們的形象。 不過，現在讓我們回過頭來給它起一個標題。 我們會說帶有散景的白花。 就這樣。 對於描述，我們會說這是一些漂亮的白色花朵的精彩照片。 就這樣。

現在對於我們的主題，我們可以問問自己，這裡的照片中有什麼？ 也許我們可以——花可以是其中之一。 單擊添加項目。 背景虛化的散景效果也存在。 再舉一個例子，我猜，樹乾或樹枝會出現在鏡頭中。 因此，我們將在此處添加其中一些。 如果我們認為我們已經捕獲了所有內容，您可以繼續並點擊發布。 所以我們開始了。

然後回到照片中，我之前創建了這個。 山上涼爽。 應該這樣設置。 所以你得到一張山脈照片。 然後這是一張很棒的山脈照片，上面有山脈、星星和陰影。 它有幾個主題。 這樣我們至少可以在前端應用程序中使用一些帖子。

所以在這一點上，我們已經在 WordPress 後端創建了我們的內容模型來存儲我們需要的這些照片的數據，並且我們已經創建了兩個新的照片帖子供我們用來嘗試在我們的前端應用程序上消費。 接下來，您可能想知道，我們如何將這些數據從 WordPress 中提取出來，以便我們可以在我們的前端應用程序中使用它？

Atlas Content Modeler 展示了一項非常酷的功能，可以讓這一切變得非常簡單。 因此，我將返回此處的 Content Modeler 並找到我們的照片模型，然後單擊此處的小省略號點圖標。 我將轉到以圖形方式打開。 所以只要我點擊它，它就會為我編寫一個查詢，其中包括我們創建的這個內容模型，照片。

它獲取其中的前 10 個，然後在下麵包含這個 GraphQL 片段，其中包含我們創建的所有字段，包括自定義字段。 因此，如果您注意到的話，我們添加了照片標題、圖像、描述，然後是主題。 所以這對於查看這些數據在 GraphQL 模式中的樣子非常方便。 所以繼續點擊這個按鈕來執行這個查詢。

如果執行同樣的 GraphQL 查詢，您可以看到我們的前端 JavaScript 應用程序會返回什麼。 它會取回照片。 然後在其中將是一個稱為數組的對象，稱為節點。 在該數組內部將是看起來像這樣的對象。 這些照片中的每一張都有一個標題、一張圖片，然後再往下是描述和主題。

所以這正是我們所需要的。 所以我們現在要使用其中的幾個字段。 因此，就我們的 WordPress 後端以及存儲和公開這些照片數據的能力而言，我們已經準備就緒了。 那麼現在讓我們看看如何在我們的前端 JavaScript 應用程序中使用它。

所以我們會回到那裡。 我認為一個很好的起點是查看 Portfolio 頁面，這是一個項目列表，對吧？ 由於這是自定義內容模型帖子的列表，照片也是如此，所以這兩個頁面有很多共同點。 所以我們可以以此為起點。

所以我會在這裡點擊投資組合，只是為了提醒自己它是什麼樣子的。 就像這樣，我們在這裡獲得了投資組合項目列表。 因此，讓我們現在破解代碼並動手操作一下。 我們將追踪這個頁面，也就是那個 slash 項目，看看它是如何構建的。

所以在 Source 中，我將轉到 Pages。 然後我會找到項目。 就在那裡。 然後打開其中的 index.js 文件。 所以向下滾動一點，我們會看到正在使用這個使用節點分頁掛鉤。 這是一個 React 鉤子，來自這裡的這個位置，在 Hooks 文件夾中。 在其中，我們調用 query.projects。

query.projects 將允許我們訪問有關項目自定義帖子類型的數據，也就是我們創建的項目內容模型。 所以我們要調用 query.projects 然後傳入一些我們想要提前處理的字段，以便它們在頁面加載後立即處理。 這就是這個數組在這裡的內容。 所以這些字段在頁面的第一次加載時就在那裡。

然後，一旦我們真正準備好呈現此頁面的內容，我們就會這樣做。 我們有一個 SEO 組件、一個頁眉，然後是底部的頁腳。 然後這裡頁面的主要部分位於這個主要標記的內部，我們有標題，這是被拉入的藍色部分。然後是一個包裝 div，其中包含我們的項目列表。 然後還有這個 Load More 組件，它會在底部產生這個 Load More 按鈕，我可以點擊它。 然後獲取更多項目並將它們彈出到 UI 中。

這就是該頁面的構建方式。 就像我說的，我喜歡以此作為我們的起點。 所以讓我們繼續複製整個文件，我們將在這裡模仿這個文件結構。 所以在頁面內部，我們將創建照片。 然後在該文件夾內，我們將創建一個 index.js 文件。 好的。 在這個新文件中，我將粘貼內容。 但是我們會改變一些東西，因為我們對項目數據不感興趣，我們想要我們的照片數據。 那麼讓我們看看我們如何做到這一點。

所以這個常量的名稱是引用項目。 因此，讓我們繼續並將其重命名為第一步。 我們可以說照片節點預先通過字段。 這樣就好了。 我們必須提供我們自己的字段列表。 也許我們現在只保留數據庫 ID，稍後我們會添加一些。

再往下看。 照片預通過。 哦，名字搞砸了。 我們開始了。 所以現在他們再次匹配。 好的。 記住，我們需要 query.photos 作為我們的自定義內容類型，而不是 query.projects。 因此，繼續將其更新為照片，就在那裡。 向下滾動一點。

所以這個項目組件，這將不再適用，因為我們沒有使用它。 所以我現在將刪除它，這個怎麼樣？ 我們只會 - 我們只會 H1。 它說你好，只是為了在此處的頁面上呈現一些東西。 也許我們也會註釋掉 load more。

因此，我將搜索項目以查看是否有任何我忘記的內容。 是的，只是一些代碼註釋，然後這裡的這個組件被拉進來了，我們不再使用了。 所以我會刪除那個組件。 我認為我們應該很好。 所以我們現在沒有使用其中的一些東西，但沒關係。 我們會暫時的。

所以我會給它一個保存，我們會看看我們是否可以獲得該渲染。 所以現在在我們的前端應用程序上，我應該能夠導航到照片，就像這樣。 我們開始了。 這是我們的新頁面。 它打招呼，其中大部分看起來與我們的投資組合項目頁面相同，例如頂部的頁眉和頁腳。

我注意到它仍然說投資組合，我們可能想換掉它。 所以我們可以簡單地做一下。 所以這是投資組合。 我們會說照片。 然後也在這個地方，我們將把它改為照片。 保存。 我們開始了。 這樣就更新了標題。

現在讓我們深入探討如何實際使用該數據，獲取我們的照片數據並在此處顯示一個列表。 那麼我們從哪裡開始呢？ 正如我們在 GraphQL 或此處的 WordPress 管理員中看到的那樣，這就是我們的查詢大致的樣子。 它將具有這些字段。 所以讓我們這樣做吧。 所以照片標題是自定義字段。 但實際上，由於我們將此字段設置為帖子的標題，我們可以只使用標題，因為這將是——帖子的標題將與具有此名稱的自定義字段相同。 所以我們可以使用它。

所以在這個數組中，我們不僅要獲取數據庫 ID，還要獲取照片、圖像、描述和主題的標題。 因此，讓我們也添加這些。 圖片、描述，然後是主題。 好的。 最後你需要逗號。 我們開始了。 所以我認為這是我們希望在頁面結束時立即可用的所有字段。 所以這對我來說很好。

讓我們測試一下我們是否真的可以在這裡得到一些數據渲染。 因此，在我們擁有的 Hello H1 下，讓我們這樣做。 我們將執行 JSON.stringify，然後我們將傳遞給它一些東西。 所以我們將在這裡做數據，看看我們是否可以將數據渲染到我們的頁面。

所以我將保存它，然後我們將返回到我們的前端。 確實如此。 這就是數據的樣子。 你可以看到我們成功地從我們的 WordPress 後端獲取它。 我們有這個節點數組，然後在該對象內部代表我們的每張照片以及我們要求返回的數據，包括此處可重複主題字段的每個單獨值。

所以這很棒。 這正是我們所需要的。 讓我們把事情弄得更乾淨一點——好吧，我想，比像這樣在頁面上吐出數據要乾淨得多。 讓我們映射我們的每條數據並為此在頁面上呈現一張卡片，而不僅僅是這裡的 pre 標記。

所以我喜歡做的一件事是，在我們假設我們有帖子要呈現之前，我們必須考慮可能沒有帖子的情況，對吧？ 所以我喜歡做的一件事是在我的組件的頂部，我確實有照片，類似的東西。 然後我像那樣做 data.nodes.length 。 我們將為可選鏈接做一個問號，因為我們不知道數據是否會存在。

然後我們將其轉換為這樣的布爾值。 所以這意味著如果我們在這一點上失敗並且數據未定義，這將被轉換為 false。 我們會說，我們沒有要渲染的照片。 否則，如果我們能夠一直向下鑽取到該數組的長度，則它要么為零（如果沒有帖子），要么為一個或多個。 因此，如果我們將該整數轉換為布爾值，它會告訴我們是否有照片。 所以如果它是零，這將是錯誤的。 如果是一個或多個，則 havePhotos 為真。

因此，有了這些知識，我們就可以在我們的組件內部做一些決策。 因此，讓我們弄清楚我們如何做到這一點。 所以我會說，如果我們有照片，那麼我們想要渲染一件事。 我們會說——讓我們看看。 我們想要做 data.photos 然後我們將映射這些。 所以對於每張照片，我們都會渲染一些東西。

所以讓我們首先返回一些簡單的東西。 我們將返回 - 讓我們看看。 我們會做一個 H2，怎麼樣，因為這就像我們的一張卡片。 然後我們會這樣說 photo.title 。 好的。 所以我們將映射我們的每張照片。 對於其中的每一個，我們將返回一個帶有該照片標題的 H2。 好的。

所以如果我們真的有照片要渲染的話，所有這些都是我們想要的。 但是，如果我們不這樣做，那麼替代方案呢？ 所以我們將在這裡有我們的 else 子句，讓我們渲染其他東西。 段落呢。 我們會說，沒有照片可以顯示。 所以現在如果我們保存它，我們就可以了。 所以現在我們要在這裡呈現我們的帖子標題。

因此，讓我們在這裡完成更多功能。 我們會說我們想要返回其他東西。 好的。 對於其中的每一個，我將只複製一些樣式，一些我提前在這裡編寫的內聯樣式，只是為了節省我們輸入這些樣式的時間。 所以我將擁有那個包裝 div。 然後在其中，我們可以恢復我們擁有的 H2。 因此，我將粘貼帶有標題的 H2。

在標題之後，讓我們展示一下描述。 我們可以做下一個。 所以這將是 photo.description，就像那樣。 但是我們不能只渲染它本身，比如在容器內部，就像這樣。 如果我們嘗試這樣做，這對我們來說不太有效，因為 HTML 不會被轉義。 所以如果我保存它，你現在可以看到我們在頁面上顯示了轉義的 HTML，這不是我們想要的。

所以 React 有一個用於處理 HTML 的實用程序，它是安全的，不需要像這樣轉義。 那就是使用 div，然後像那樣危險地使用 SetInnerHTML。 您可以向它傳遞一個對象，其中一個屬性是雙下劃線 HTML。

然後你傳遞給它的值就是你想要在不轉義的情況下呈現的東西。 所以對我們來說，就是 photo.description，就像那樣。 然後這個div就可以自己穿衣服了。 好的。 所以現在我給它一個保存。 我們會看到我們得到了什麼。 涼爽的。 所以現在我們的 HTML 不再被轉義了。 所以我覺得不錯。

所以這很棒。 那張特色圖片怎麼樣？ 我們能做的就是從頭開始寫這個。 我們可以抓取特色圖像 URL 和圖像標籤並將其作為 URL 傳遞。 然後瀏覽器將呈現圖像並將其指向該源。

然而，這個項目，如果你深入研究這個藍圖代碼庫，實際上有一個預構建的組件正是為了這個目的，稱為特色圖像。 所以對我們來說，這將是我們使用的完美選擇。 因此，我將向上滾動一點到我們從組件目錄中導入一堆不同組件的位置。 我將在此處的末尾標記一張名為特色圖片，就像那樣。 所以現在我們可以在任何我們想要的地方渲染我們的特色圖像。

在這個 div 與我們的照片描述的正下方，我們將渲染我們的特色圖片。 這需要一個圖像道具。 而我們這裡需要傳入的是這張圖片的整個節點。 所以對我們來說，就是 photo.feauredimage.node，就像那樣。 我認為這應該對我們的形像有所幫助。 所以我會保存它，果然，我們開始了。 因此，一旦我們的頁面在這裡重新加載，現在我們就有了我們的標題、我們的描述，然後是照片本身。 同樣，對於我們的下一張照片，該圖像也會顯示在列表中。

所以這很酷。 我們正在取得很大進展。 最後一件事是處理照片中出現的主題的可重複字段。 所以我要做的是在這裡創建一個段落並將其關閉。 然後在這個段落標籤內，我們可以彈出一些捲曲並做我們相同的 photo.subjects。 但現在我們將加入它的末尾。 我們會告訴 [聽不清] 我們想用逗號、空格來加入它，就像這樣。 我會給它一個保存。

當我們的熱重載發生時，我應該能夠向下滾動。 果然，我們開始了。 所以他們被顯示在列表中。 用戶可能不確定那些是什麼。 所以也許在我們的應用程序中，我們可以彈出並添加某種標籤，在前面加一個小東西，上面寫著主題，就像那樣。 主題花，散景，分支。 然後我們這裡的另一張照片有主題山、星星、陰影，僅作為示例。

所以我們會在這裡暫停，但您可以看到我將此頁面放在一起的速度有多快。 我想我們應該擺脫我們的 hello, world on top 那裡。 我們不太需要那個。 或者你好詞。 所以我會刪除它。 我們到了。 所以你可以看到，正如我所說，我們能夠多快地把它放在一起。

只是將我們的代碼基於投資組合列表頁面，我們能夠在這裡創建我們的照片列表頁面，然後映射每張照片並訪問它的 Atlas Content Modeler 自定義字段——標題、描述、圖像、然後是這裡主題的可重複字段。 所以我希望你能在自己的項目中感受到這種力量。

如果您想將我們的藍圖之一作為一個巨大的開端，可以為您完成大部分項目，那麼就可以完成大量的跑腿工作。 然後從那裡，你可以做一些類似於我們在這次演講中所做的事情。 您可以進一步定制它並添加您自己的定制和其他內容模型等等。

非常感謝收看。 我希望這次演講真的很有用，讓您對 Atlas 生態系統中已經出現並將繼續出現的所有重要功能有一個很好的了解。

主持人：這就是 DE{CODE} 2022 的總結。我希望你覺得它鼓舞人心，並帶著更多的 WordPress 專業知識和新的社區聯繫離開。 從周五開始留意網站上的錄製內容，以了解您可能錯過的任何內容或再次觀看視頻。

最後，我想對我們的讚助合作夥伴表示感謝：Amsive Digital、Box UK、Candyspace、Drewl、Elementary Digital、Illustrate Digital、Kanopi Studios、Springbox、Studio Malt、StrategiQ、WebDevStudios 和 10Up。 非常感謝您為我們的 DE{CODE} 籌款活動捐款。 我們非常感謝您的慷慨。

現在，對於在我們的與會者中心和我們的會議中與我們互動的每個人，我們將選出前三名獲獎者，並讓您知道如何在 DE{CODE} 結束時領取獎品。 我們期待在未來的活動中再次見到您，無論是面對面還是虛擬。 我們迫不及待地想為您帶來更多有關 WordPress 最新發展趨勢的信息，以及您如何實施這些趨勢以更快地構建 WordPress 網站。

這都是我的。 非常感謝您加入我們，保重。