如何将投资组合组件添加到您的 Atlas 网站

您想将投资组合组件添加到您的众筹网站吗？本教程将介绍一种通过 3 个简单步骤向您的 Atlas 网站添加可自定义投资组合功能的简单方法。

我们将使用Thrinacia 的合作伙伴Skhemata提供的组件 。Skhemata 使向任何网站添加组件变得容易，并提供可通过 HTML 属性、CSS 等自定义的广泛功能。让我们开始吧。

步骤 1. Thrinacia 订阅

由于 Thrinacia 与 Skhemata 合作，您可以通过订阅此处常见问题解答中概述的正确计划来访问这些组件 。

Step 2. 修改widget代码

Skhemata 组件可以以不同的方式使用。对于本教程，我们将通过小部件代码使用组件。实际源代码托管在Skhemata CDN上，因此您可以轻松复制和粘贴一小段小部件代码来引用它。

要查看此组件的外观，这里是 portfolio 组件的示例。您可以看到这是组件的 Skhemata 文档，您还可以看到小部件代码有一个选项卡。 这与需要粘贴到 Atlas 平台中的小部件代码不同。请使用下面提供的代码，因为它需要粘贴到 WYSIWYG 编辑器中。这样的编辑器可能有限制，因此需要为此定制小部件代码。

这是小部件代码的示例：

<div class="ui page grid">
	<div class="column">
		<skhemata-portfolio config-src="your-url-here"></skhemata-portfolio>
		<script>
			async function check()
			{
				const script = await
				import ('https://cdn.jsdelivr.net/npm/@skhemata/skhemata-portfolio@latest/build/index.js');
			}

			check();

		</script>
	</div>
</div>

您可以将上述代码复制并粘贴到您平台上的页面中。如果这样做，您会注意到页面上没有任何内容。这是因为您需要将内容添加到投资组合中。为此，请将以下代码复制/粘贴到空白页，主机在某个地方，例如 github：

[
    {
        "title": "Project One",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "siteName": "my new site"
    },
    {
        "title": "Project Two",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
    },
    {
        "title": "Project Three",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
    },
    {
        "title": "Project Four",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
    },
    {
        "title": "Project Five",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "siteName": "my new site"
    },
    {
        "title": "Project Six",
        "imageUrl": "https://picsum.photos/600/800",
        "siteLink": "https://www.devradius.com",
        "projectDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
    }
]

您会注意到某些特定内容被分成几个部分。每个部分都将是一个项目，当您将鼠标悬停在特定项目上时，将显示这些区域中的内容。

添加自定义内容后，您需要将其保存为JSON 文件并将其托管在某处，以便在小部件代码中引用它。

您可以在小部件代码中看到有一个区域显示your-url-here。您需要将其替换为您的 JSON 文件的 URL。它将获取该数据并将其添加到投资组合组件中。

步骤 3. 粘贴小部件代码

替换 URL 并使用小部件代码保存页面后，您应该能够看到如下内容：

查看Skhemata 文档以获取有关使用 HTML 属性和 CSS 属性进行自定义的更多信息。

要进行进一步的操作和定制，您需要通过定制代码来完成。请记住，小部件的源代码托管在 Skhemata CDN 上，因此您无权对其进行特别操作，但您可以添加自己的自定义 CSS、javascript 并使用提供的属性。

有关组件或自定义的任何问题， 请联系 Thrinacia 或 加入 Thrinacia 的 Discord 聊天室。