Atlas中如何添加推荐组件
您想为您的众筹平台添加推荐信吗?下面介绍如何使用 HTML 小部件代码通过 Skhemata 组件添加它们。您可能会注意到 Thrinacia 定价页面上有不同的计划。规模计划中包括使用 Skhemata 组件的能力。可以在此处找到有关 Skhemata 组件的更多信息。
您可以特别使用的一个是推荐组件。可以在此处找到此特定组件的更多信息和源代码。
推荐组件是一个带有文本和图像的基本滑块,可以根据您的场景进行定制。您可以通过上图看到证明组件的示例。
它需要修改一些简单的 JSON 数据和 HTML 才能在页面上工作。您还需要通过页面编辑器中的代码视图粘贴代码。Atlas 上有提供代码视图的区域,这些区域将是站点上唯一可以使用这些组件的区域。
让我们开始吧!
第 1 步订阅正确的计划
首先,您需要订阅适当的订阅计划。如定价页面所示,Scale 计划附带对 Skhemata 组件的完全访问权限。如果您已经订阅了一个计划,您可以随时升级/降级。如果您想进行更改,请联系upport@thrinacia.com 。
如果该计划不适合您的需要,您可以随时在 Skhemata 网站上购买计划。
步骤 2 添加组件
现在您有了适当的计划,您可以开始将推荐组件添加到平台上的页面或区域。为此,您需要将以下 HTML 代码复制到页面上的 HTML 编辑器中。
您会注意到,当您将小部件代码粘贴到您的项目中时,它会显示默认数据。您将希望使用您自己的推荐来更新此数据。为此,您需要复制 config-src 文件。我有一个示例,您可以 在此处复制。复制代码后,将其另存为 JSON 文件。下面是代码的示例。
配置源 JSON 文件
这是显示在组件上的数据。您可以更新 name、 comment和 avatar (带有链接)以使此功能更加适合您的实例。如果要添加头像图像,则需要将图像托管在某个地方。然而,这并不是您可以对组件进行的所有自定义设置,您还可以通过其他方式更新它,这将在下面提到。
您需要做的是在某处托管上述 JSON 文件(我使用 GitHub)并在小部件代码中引用此链接,其中显示 config-src。您将需要替换当前添加的链接。
有很多方法可以托管 JSON 文件,但为了便于使用,这里介绍了如何在 codepen 上托管文件。创建一个新帐户和一个新存储库。一旦您拥有一个帐户并创建了一个新的存储库,您就可以上传一个新文件。
托管 JSON 文件后,您需要获取 URL 以在小部件中引用它。
为此,请单击存储库中的文件。正如您将看到的,我已将我的文件命名为 config-src.json,因此我将单击该文件。
这是您托管文件的位置。要获得正确的链接,您需要在 URL 末尾附加以下内容: ?raw=true
将以上内容添加到您的网址后, 将其复制并粘贴到您的浏览器中 ,然后转到这个新网址。这会将您带到 GitHub 为您托管的原始 JSON 文件。然后你可以 复制 它。我的 URL 以 raw 开头,你可以在这里看到:https://raw.githubusercontent.com/kyle-tummonds-skhemata/test/main/config-src.json
现在,您可以将 config-src 的 URL 替换为您的 JSON 文件。
您现在应该看到您在 JSON 文件中添加的内容将显示在小部件上。
您可以对组件进行的一些额外定制如下:
- 您可以添加自定义 CSS 以定位小部件的特定元素,使其看起来与众不同。
- 您可以使用 HTML 属性来更改组件运行的方式。例如,您可以在小部件代码中看到有一个名为“ interval ”的属性,旁边有一个数字。如果您希望组件以比当前速度更快或更慢的速度滚动不同的推荐,您可以更改该数字。
仅当您将整个组件导入项目而不是使用小部件方法时,才可能进行进一步的自定义,以便您可以直接访问和修改源代码。
版权声明:
作者:admin
链接:https://blog.givcoop.org/atlas%e4%b8%ad%e5%a6%82%e4%bd%95%e6%b7%bb%e5%8a%a0%e6%8e%a8%e8%8d%90%e7%bb%84%e4%bb%b6/
来源:GIV Blog
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论