103 lines
6.6 KiB
Markdown
103 lines
6.6 KiB
Markdown
# Embedding media and third-party content on your website — 图文教程
|
||
|
||
> 基于 6 个章节自动生成，含字幕摘要与关键帧截图。
|
||
|
||
## 1. 嵌入内容简介与示例
|
||
*intro* | `00:00 → 01:03`
|
||
|
||
**摘要**: 介绍嵌入的概念、优势以及多种内容类型的嵌入示例（如播客、文章、视频、问卷、音乐）。
|
||
|
||
在本教程中，我们将了解如何快速在您的网站 上嵌入媒体和第三方内容。 嵌入是一种在您的网站上显示外部媒体或内容 的方式，无需直接上传或托管。 嵌入允许您无缝整合各种类型的内容，例如视 频、社交媒体文章、地图、音频片段等。 例如，您可以在网站上显示来自 Spotify 的播客。 或来自您 Tumblr 账户的文章——我 使用了分栏区块并更改了背景颜色来展示它们。 最常见的嵌入可能是嵌入来自 YouTub e、Vimeo 或其他平台的视频。 您甚至可以使用 Crowdsignal 在站点上添加调查问卷。 或者您也可以决定在站点上添加来自 X 的文章。 最后，您甚至可以显示来自 SoundCloud 的音乐。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 2. 添加嵌入区块的基本方法
|
||
*demo* | `01:04 → 02:06`
|
||
|
||
**摘要**: 演示如何通过插入按钮找到并选择通用嵌入区块，并以嵌入X文章为例展示操作流程。
|
||
|
||
要添加嵌入区块，请点击左上角的插入按钮， 然后一直向下滚动到“嵌入”选项。 在这里您会看到所有可用的不同嵌入区块。 首先是嵌入区块本身。 当您选择嵌入区块时， 可以显示来自其他站点的内容。 现在我已选中该区块，它提示： 粘贴您想在站点上显示内容的链接。 我已经获取了我一篇 X 文章的 URL， 将其粘贴到这里，然后点击“嵌入”。 接着我们将看到这篇文章显示在我们的站点上。 您也可以使用为特定第三方服务构建的嵌入区 块，例如 X、YouTube、WordPress、Vimeo、Crowdsignal、PocketCasts 等。 正如您在左侧列表中看到的。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 3. 使用特定服务区块与快捷方式
|
||
*demo* | `02:07 → 02:56`
|
||
|
||
**摘要**: 介绍使用斜杠命令快速添加特定服务区块（如YouTube），并讲解直接粘贴URL的便捷方法。
|
||
|
||
在下一个示例中，我不会点击左上角的插入按 钮，而是输入斜杠和区块名称。 我想在站点上添加一个 YouTube 视 频，所以我会输入 /youtube，选择该区块，然后添加视频的 URL。 接着点击“嵌入”。 但 WordPress 让向站点添加第三方内容变得更加容易。 因此严格来说，您甚至不需要添加区块。 您可以直接将 URL 粘贴到您的页面或文章中。
|
||
|
||
让我们看另一个例子。 无需插入 Spotify 嵌入区块，您可 以直接将 Spotify 播客的 URL 粘贴到我的页面中。 您知道吗？您可以将嵌入区块转换为分栏或群 组区块。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 4. 嵌入区块的布局与样式调整
|
||
*demo* | `02:57 → 03:56`
|
||
|
||
**摘要**: 演示如何将嵌入区块转换为分栏区块，并调整布局、对齐方式和背景颜色等样式。
|
||
|
||
转换为其中一种类型后， 您就可以更改背景颜色和布局。
|
||
|
||
我想添加一个 TED 演讲，所以我会输入 /ted，选择该区块，然后粘贴演讲的 URL。 完成后，我将选择区块工具栏， 将此区块转换为分栏区块。 然后打开边栏设置，将其从一栏更改为两栏。 接着在右侧栏中添加另一个 TED 嵌入区 块，粘贴第二个视频的 URL，然后点击“嵌入”。 之后我会选择分栏区块（或容器区块）， 在区块工具栏中将对齐方式更改为“宽幅”。 然后您可以进入“风格”选项， 更改区块的背景颜色。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 5. 使用HTML嵌入不受支持的内容
|
||
*demo* | `04:06 → 04:55`
|
||
|
||
**摘要**: 讲解当标准嵌入失效时，如何使用自定义HTML区块来嵌入如Facebook等平台的内容。
|
||
|
||
但如果嵌入区块不起作用怎么办？
|
||
|
||
这时我们可以使用 HTML 区块。
|
||
|
||
例如，嵌入区块不适用于 Facebook 或 Instagram 文章。 那么，我们转到一篇 Facebook 文章。 点击三个垂直点。 点击“嵌入”。 复制 HTML 代码。 返回您的网站。
|
||
|
||
输入 /html， 然后选择自定义 HTML 区块。 接下来我们可以粘贴代码。 现在在区块工具栏中，我们可以点击“预览” 来查看文章的显示效果。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 6. 教程总结
|
||
*outro* | `04:57 → 05:11`
|
||
|
||
**摘要**: 总结视频内容，确认观众已掌握在网站上嵌入第三方内容的必要工具和方法。
|
||
|
||
相信您现在已掌握所有必要工具， 可以在您的站点上嵌入第三方内容了。 现在在区块工具栏中， 我们可以点击预览来查看文章的显示效果。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
