將 Soundcloud 曲目整合到您的 Webflow 網站上

重要的： 本指南利用 Webflow 的嵌入功能來包含定製程式碼。嵌入功能可透過任何付費站點計劃以及核心、成長、代理商和自由工作者工作空間計劃存取。 

透過採用動態嵌入，您可以利用 CMS 集合欄位動態刷新嵌入程式碼。在本指南中，我們將設計一個音樂網站，利用動態嵌入來展示網站上每首歌曲評論的 Soundcloud 曲目。 

您可以訪問我們的 現場音樂網站 或者 在設計器中預覽站點. 

本教學涵蓋以下內容： 

1. 有關為歌曲評論製作 Webflow Collection 的指南
2. 將您的 Soundcloud 曲目合併到 Webflow CMS 中 
3. 建構動態嵌入

為您的歌曲評論創建 Webflow 收藏

首先，建立一個 CMS 集合來儲存您的歌曲評論及其各自的 Soundcloud 曲目 ID（即 Soundcloud 曲目的獨特標識符）。 

若要設定具有必填欄位的集合： 

1. 訪問 內容管理系統面板
2. 點選“建立新集合"圖示
3. 分配一個 標題 到您的收藏（例如“歌曲評論”） 
4. 打 新增字段 
5. 選擇 純文字 
6. 將您的欄位標記為“Soundcloud 軌道 ID”
7. 按 保存欄位
8. （可選）附加任何額外的收藏欄位（例如，藝術家、專輯封面、評論、評級等）
9. 點選 創作收藏，並記住保持此選項卡打開以供將來參考！ 

將您的 Soundcloud 曲目合併到 Webflow CMS 中 

要將 Soundcloud 曲目插入 Webflow CMS，您必須從 Soundcloud 取得曲目 ID。這些 ID 作為您的 Soundcloud 曲目的獨特標記，並確保您收藏中每首歌曲評論的準確曲目表示。從 Soundcloud 嵌入程式碼中提取曲目 ID。 

產生您的 Soundcloud 嵌入程式碼 

要建立 Soundcloud 嵌入程式碼： 

1. 造訪任何 Soundcloud 曲目 
2. 點選 分享 圖示
3. 選擇 嵌入
4. （可選）自訂 Soundcloud 播放器的外觀、大小等。
5. 複製程式碼 程式碼 部分，並保留此選項卡以供參考！ 

重要的： 如果您關閉了 Webflow 站點的選項卡，請重新訪問 內容管理系統面板 並從前面的步驟中選擇您的歌曲評論收藏。

使用 Soundcloud 曲目 ID 制定您的歌曲評論 

要取得 Soundcloud 軌道 ID 的值： 

1. 將“/tracks/”後的一系列字元複製到 程式碼 部分
2. 返回 Webflow 中的歌曲評論收藏
3. 啟動新的收藏項目以進行歌曲評論
4. （可選）填充任何其他收藏欄位（例如，藝術家、專輯封面、評論、評級等） 
5. 將從 Soundcloud 複製的角色系列貼上到 Soundcloud 曲目 ID 場地 
6. 點選 創造

最佳建議： 您可以將 Soundcloud 程式碼插入程式碼編輯器，例如 崇高的文字 或者 視覺工作室程式碼 以便更輕鬆地識別軌道 ID。 

對於您希望包含在 Webflow 中的每首歌曲評論，重複生成嵌入代碼並使用 Soundcloud 曲目 ID 形成歌曲評論的過程（即，要在將來添加更多歌曲評論，您需要形成一個新的收藏項） ，從Soundcloud 嵌入程式碼中檢索Soundcloud 軌道ID，並將其插入到對應的Collection 欄位中）。 

建構動態嵌入

動態嵌入專門用於動態內容，指示它們應用於集合頁面或靜態頁面上的集合清單。鑑於您指的是歌曲評論集合，您應該將嵌入內容插入到與歌曲評論集合連結的集合頁面中，或將集合清單附加到您的歌曲評論集合中。 

重要的： 如果您使用 Soundcloud 嵌入程式碼關閉了選項卡，請導航至 Soundcloud 並複製在前面的步驟中製作的嵌入程式碼。

若要產生動態嵌入，請將 Soundcloud 嵌入程式碼插入您的 Webflow 站點，並將嵌入中的 Soundcloud 軌道 ID 替換為對應的 Collection 欄位： 

1. 導航 新增面板 > 先進的
2. 包括一個 嵌入 元素到您希望顯示 Soundcloud 軌道的區域
3. 將 Soundcloud 嵌入程式碼貼到 Webflow 程式碼編輯器中 
4. 突出顯示字元和字母系列帖子“/tracks/” 
5. 點選 新增字段
6. 選擇 Soundcloud 曲目 ID 場地 
7. 按 儲存並關閉 

此過程可確保嵌入內容顯示與每個歌曲評論相對應的歌曲。

準備好後，發布您的網站以查看新整合的 Soundcloud 曲目！ 

最佳建議： 擴充集合頁面和集合清單中條件可見性的使用，以隱藏嵌入式 Soundcloud 播放器，以尋找缺少 Soundtrack 曲目 ID 的歌曲評論項目。

重要的： Soundcloud 播放器不會顯示在 Designer 畫布上 - Designer 中嵌入播放器的預覽無法訪問，並且將用佔位符代替。發布或網站匯出後，播放器將在其指定位置可見（即顯示）。如果您希望在自訂網域上部署網站之前預覽嵌入式播放器，您可以將網站發佈到 webflow.io 臨時子網域。