如何将 FAQ 组件添加到您的 Atlas 网站
您想在众筹网站上使用常见问题解答功能吗?本教程将介绍一种将 FAQ 组件添加到 Atlas 平台的简单方法。
我们将使用Thrinacia 的合作伙伴Skhemata提供的组件。Skhemata 使向任何网站添加组件变得容易,并提供可通过 HTML 属性、CSS 等自定义的广泛功能。让我们开始吧。
步骤 1. Thrinacia 订阅
由于 Thrinacia 与 Skhemata 合作,您可以通过订阅此处常见问题解答中概述的正确计划来访问这些组件 。
如果您不想使用规模计划,您也可以尝试使用 Skhemata 定价页面上的计划,但是,Thrinacia 将提供 WordPress 托管作为规模计划的一部分,这对于该组件正常运行至关重要。如果您不想使用扩展计划,则需要为 WordPress 寻找一个主机。
如果您使用的是规模计划,您可以在准备好使用 FAQ 组件时联系 Thrinacia 支持,他们将为您提供对 WordPress 实例的访问权限。
步骤 2. 安装 Ultimate FAQ 插件
该组件需要使用终极 FAQ 插件。你可以在这里下载这个插件:https ://en-ca.wordpress.org/plugins/ultimate-faqs/
在您的 WordPress 实例上下载后,请务必激活它。激活后,您可以使用 FAQ 插件创建新的 FAQ。为此,将鼠标悬停在 WordPress 仪表板中的常见问题解答上,然后单击“添加新”。这将允许您添加新的常见问题解答。它很像一篇博客文章,但当您决定在一个页面上查看所有内容时,它的显示方式会有很大不同。
步骤 3. 复制并粘贴小部件代码
现在您已经有了一个 WordPress 实例并安装了正确的插件,您可以将小部件代码添加到您的站点。Skhemata 组件可以以不同的方式使用。对于本教程,我们将通过小部件代码使用组件。实际源代码托管在 Skhemata CDN 上,因此您可以轻松复制和粘贴一小段小部件代码来引用它。
在您可以将小部件代码添加到您的页面之前,最好按照上一步中的描述创建占位符常见问题解答,以便您可以在包含内容的页面上看到该组件的外观。为了进一步参考,这里有一个 FAQ 组件的例子。您可以看到这是组件的 Skhemata 文档,您还可以看到小部件代码有一个选项卡。 这与需要粘贴到 Atlas 平台中的小部件代码不同。请使用下面提供的代码,因为它需要粘贴到 WYSIWYG 编辑器中。这样的编辑器可能有限制,因此需要为此定制小部件代码。
这是小部件代码的示例:
<div class="ui page grid">
<div class="column">
<skhemata-faq faq-title="My FAQ" api-wordpress="{"url": "https://my-wordpress-site.com/wp-json/wp/v2"}" faq-page-path="demo" faq-post-path="post" posts-per-page="10"></skhemata-faq>
<script>
async function check()
{
const script = await
import ('https://cdn.jsdelivr.net/npm/@skhemata/skhemata-faq@latest/build/index.js');
}
check();
</script>
</div>
</div>
复制以上代码并将其粘贴到您平台上的页面中。确保您在源代码模式下查看页面,否则它会将原始 HTML 粘贴为段落。
您可以将上述代码复制并粘贴到您平台上的页面中。将代码“ my-wordpress-site ”中显示的 URL 替换为您的 WordPress 博客的 URL。你会注意到有一个/wp-json/wp/v2
保持路径不变, 不要删除它,如果你这样做,组件将无法工作。此路径引用 WordPress 后端。然后您可以保存页面并查看显示的组件。它应该看起来像这样:
步骤 4. 自定义组件
您可以查看Skhemata 文档中列出的属性 以及 CSS 属性。
要进行进一步的操作和定制,您需要通过定制代码来完成。请记住,小部件的源代码托管在 Skhemata CDN 上,因此您无权对其进行特别操作,但您可以添加自己的自定义 CSS、javascript 并使用提供的属性。
有关组件或自定义的任何问题, 请联系 Thrinacia 或 加入 Thrinacia 的 Discord 聊天室。
版权声明:
作者:admin
链接:https://blog.givcoop.org/%e5%a6%82%e4%bd%95%e5%b0%86-faq-%e7%bb%84%e4%bb%b6%e6%b7%bb%e5%8a%a0%e5%88%b0%e6%82%a8%e7%9a%84-atlas-%e7%bd%91%e7%ab%99/
来源:GIV Blog
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论