在您的 Webflow 网站上集成 Soundcloud 曲目

重要的： 本指南利用 Webflow 的嵌入功能来包含自定义代码。任何付费网站计划以及核心、增长、代理和 Freelancer Workspace 计划均可使用嵌入功能。 

通过采用动态嵌入，您可以利用 CMS Collection 字段来动态刷新嵌入的代码。在本指南中，我们将设计一个音乐网站，利用动态嵌入来展示网站上每首歌曲评论的 Soundcloud 曲目。 

您可以访问我们的 现场音乐网站 或者 在设计器中预览网站. 

本教程涵盖以下内容： 

1. 为您的歌曲评论制作 Webflow 合集的指南
2. 将您的 Soundcloud 曲目整合到 Webflow CMS 中 
3. 构建动态嵌入

创建 Webflow 歌曲评论合集

首先，建立一个 CMS 集合，用于存储您的歌曲评论及其各自的 Soundcloud 曲目 ID（即，您的 Soundcloud 曲目的唯一标识符）。 

要设置具有所需字段的集合： 

1. 访问 CMS 面板
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 网站的标签，请重新访问 CMS 面板 并从前面的步骤中选择您的歌曲评论收藏。

使用 Soundcloud 曲目 ID 制定歌曲评论 

要获取您的 Soundcloud 曲目 ID 的值： 

1. 复制“/tracks/”中的一系列字符 代码 部分
2. 返回 Webflow 中的歌曲评论收藏
3. 发起新的收藏项目以进行歌曲评论
4. （可选）填充任何其他收藏字段（例如艺术家、专辑封面、评论、评分等） 
5. 将从 Soundcloud 复制的角色系列粘贴到 Soundcloud 曲目 ID 场地 
6. 点击 创造

最佳建议： 您可以将 Soundcloud 代码插入到代码编辑器中，例如 Sublime Text 或者 Visual Studio 代码 以便更轻松地识别曲目 ID。 

对于您希望包含在 Webflow 中的每首歌曲评论，重复生成嵌入代码和使用 Soundcloud 曲目 ID 形成歌曲评论的过程（即，为了在将来添加更多歌曲评论，您需要形成一个新的收藏集项目，从 Soundcloud 嵌入代码中检索 Soundcloud 曲目 ID，然后将其插入到相应的收藏集字段中）。 

构建动态嵌入

动态嵌入仅用于动态内容，表明它们适用于收藏页面或静态页面上的收藏列表。鉴于您指的是歌曲评论收藏，您应该将嵌入插入到与您的歌曲评论收藏链接的收藏页面中，或将收藏列表附加到您的歌曲评论收藏中。 

重要的： 如果您关闭了包含 Soundcloud 嵌入代码的选项卡，请导航至 Soundcloud 并复制前面步骤中制作的嵌入代码。

要生成动态嵌入，请将 Soundcloud 嵌入代码插入您的 Webflow 网站，并用相应的 Collection 字段替换嵌入中的 Soundcloud 曲目 ID： 

1. 导航 添加面板 > 先进的
2. 包括一个 嵌入 元素到您希望显示 Soundcloud 曲目的区域
3. 将 Soundcloud 嵌入代码粘贴到 Webflow 代码编辑器中 
4. 突出显示字符和字母系列帖子“/tracks/” 
5. 点击 添加字段
6. 选择 Soundcloud 曲目 ID 场地 
7. 按 保存并关闭 

这个过程保证嵌入展示与每首歌曲评论相对应的歌曲。

准备好后，发布您的网站以查看您新集成的 Soundcloud 曲目！ 

最佳建议： 扩展收藏页面和收藏列表内条件可见性的使用，以隐藏缺少 Soundtrack 曲目 ID 的歌曲评论项目的嵌入式 Soundcloud 播放器。

重要的： Soundcloud 播放器不会显示在 Designer 画布上 — Designer 中嵌入播放器的预览无法访问，将用占位符替代。发布或网站导出后，播放器将在其指定位置可见（即显示）。如果您希望在自定义域上部署网站之前预览嵌入播放器，您可以将网站发布到 webflow.io 暂存子域。