有多种方法可以将个性化代码集成到 Webflow 项目中。我们可以选择在项目设置中在整个项目中插入个性化代码(例如,Google Analytics 代码),并且可以将嵌入添加到模板页面(例如,我们所有的博客文章)。了解有关个性化代码嵌入的更多详细信息。
然而,在我们希望将嵌入内容插入到单个博客文章中的情况下,例如嵌入的推文或我们喜欢的 Soundcloud 歌曲,该怎么办?
在本教程中:
- 参观 收藏 物品
- 使用权 富文本字段 选项
- 选择个性化代码
- 插入嵌入内容
- 保存并关闭
- 发布
此外,当我们打算为特定收藏品项目(如博客文章或产品)包含个性化代码时,此方法非常适合。
参观 收藏 物品
首先,我们将导航到使用富文本元素的集合项(例如博客文章)。
在启用了 CMS 的项目中:
- 访问编辑器
- 点击 收藏 标签
- 选择带有富文本字段的集合
- 然后,选择收藏项(例如博客文章)
![64b94a51d4b46d5b02a8cc3b_5fc99a26d69626ec92cb9605_2](https://webflow-s3.tenten.co/2024/04/64b94a51d4b46d5b02a8cc3b_5fc99a26d69626ec92cb9605_2.png)
我们将在编辑器中执行此操作以进行说明,但也可以选择在设计器中访问集合项。
![64b94a52d4b46d5b02a8cc47_5fc96683907d850d83d0d1dd_kee3fsdx3hf_9ldnvdq2vvmzvqyfgkdrsswpfcjrigsajxm69hgca8uvgpohtsaaeui1v-lnkspq4sd1f4mpr9ikq-ztlqhbooj1-abdvvrkhrfnpjlutj-j_f8evehwtfu4ny9g](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94a52d4b46d5b02a8cc47_5fc96683907d850d83d0d1dd_kee3fsdx3hf_9ldnvdq2vvmzvqyfgkdrsswpfcjrigsajxm69hgca8uvgpohtsaaeui1v-lnkspq4sd1f4mpr9ikq-ztlqhbooj1-abdvvrkhrfnpjlutj-j_f8evehwtfu4ny9g.png)
深入了解将富文本字段集成到集合。
使用权 富文本字段 选项
我们可以在富文本字段中插入多种内容。我们可以粘贴或输入文本,也可以选择富文本字段选项(例如图片、视频、编号列表)来包含内容。
![64b94a52d4b46d5b02a8cc40_5fc966841cc9f950ba7cfacc_kpprwyozpjrsbbeo-e32-vb15iyydg7yqfpm8en01ggzoxdu03fchv_3pk5nvzbgtyz2czytqqqwsaqfbhvmv2qsemejkvic-jofm3lwcxhapkirfi8g2bb3l-ol4o8crqr4xo4i](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc40_5fc966841cc9f950ba7cfacc_kpprwyozpjrsbbeo-e32-vb15iyydg7yqfpm8en01ggzoxdu03fchv_3pk5nvzbgtyz2czytqqqwsaqfbhvmv2qsemejkvic-jofm3lwcxhapkirfi8g2bb3l-ol4o8crqr4xo4i.png)
使用富文本字段时,可以通过单击空白字段或创建新行来查看可用选项。执行此操作后,将显示可用选项以供选择。
选择个性化代码
做出选择:
- 单击空白的富文本字段,或者在 Mac 上按 Return 键或在 PC 上按 Enter 键,创建新行
- 点击加号图标
- 选择个性化代码
![64b94a52d4b46d5b02a8cc43_5fca942a068121472a77b1db_8](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc43_5fca942a068121472a77b1db_8.png)
插入嵌入内容
选择个性化代码选项后, HTML 嵌入代码编辑器 将显示。在这里,我们可以粘贴我们的个性化代码(例如嵌入代码片段)。最后,单击“保存并关闭”。
![64b94a52d4b46d5b02a8cc57_5fc96684f2dbb674525c161f_1h5fejwekqgrx_neihjaq7jflquyr4jgyycjpihtwqjonrrt-djtkvapqwttgr2jwatmmi1ykzewocovmlcxetq2ueevjn0kd1_qwh4evuatslca2hrv0mvz2fp7tszbbtghddla](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc57_5fc96684f2dbb674525c161f_1h5fejwekqgrx_neihjaq7jflquyr4jgyycjpihtwqjonrrt-djtkvapqwttgr2jwatmmi1ykzewocovmlcxetq2ueevjn0kd1_qwh4evuatslca2hrv0mvz2fp7tszbbtghddla.png)
保存并关闭
随后,点击“保存并关闭”。这样,我们集成到 Collection 中的代码将被保存,并且 HTML 嵌入代码编辑器 将被关闭。
![64b94a52d4b46d5b02a8cc4d_5fca8ff8d5dd9810a7174456_7](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc4d_5fca8ff8d5dd9810a7174456_7.png)
笔记:个性化代码未经过验证。代码不正确可能会导致已发布页面出现问题。
发布
要观察您的个性化代码的实际效果:
- 点击发布按钮
- 接下来,预览实时网站(这可以通过单击编辑器中的 返回现场 按钮)
![64b94a52d4b46d5b02a8cc50_5fc966844f756a3277bcf383_73v3k9s5hbfa3toqmckwr5jvzosehnusmpusofemekdoqfpssltuekad-gll8ejux_fujfhxnppahszxlzoy0egyrjxhd-an6kq01kigs-89wwy9ysluoob81p0dwneujgrmndry](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc50_5fc966844f756a3277bcf383_73v3k9s5hbfa3toqmckwr5jvzosehnusmpusofemekdoqfpssltuekad-gll8ejux_fujfhxnppahszxlzoy0egyrjxhd-an6kq01kigs-89wwy9ysluoob81p0dwneujgrmndry.png)
就是这样!您的个性化代码现已生效。访问您的实时网站后,您将看到嵌入代码按预期运行。
![64b94a52d4b46d5b02a8cc53_5fc966849f88783d1c479ae6_fpbdxiwlbuguynffnsqgryf6xcxzzuy3dqqk4_irsik5jdztoqgxg3f5pwfzlnaptdoo0kir4tu5tcyhzpsfeb9e3p-rdn0kqk6yiirv-uzd5epgh_d2l6nltjsp-xzz61m5ylqp](https://webflow-s3.tenten.co/2024/04/64b94a52d4b46d5b02a8cc53_5fc966849f88783d1c479ae6_fpbdxiwlbuguynffnsqgryf6xcxzzuy3dqqk4_irsik5jdztoqgxg3f5pwfzlnaptdoo0kir4tu5tcyhzpsfeb9e3p-rdn0kqk6yiirv-uzd5epgh_d2l6nltjsp-xzz61m5ylqp.png)
Ewan Mak 的最新帖子 (查看全部)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日