如何将 Asyntai AI 聊天机器人添加到 Statamic

Statamic CMS 网站的分步指南

获取嵌入代码

平台：

步骤1：获取您的嵌入代码

首先，前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码，格式如下：

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

注意： 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码，因为其中包含您的个人小部件 ID。

步骤2：选择安装方法

Statamic 同时支持 Antlers 和 Blade 模板引擎。请根据您使用的模板引擎选择方法：

方法 1：Antlers 布局（推荐）

添加聊天机器人最简单的方法是将其包含在主布局文件中。Statamic 使用 Antlers 作为默认模板引擎。

导航到 Statamic 项目的 resources/views 目录
打开布局文件（通常是 layout.antlers.html）
找到</body>闭合标签
将您的Asyntai嵌入代码粘贴到</body>标签之前
保存文件

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

提示： The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

方法 2：Blade 布局

如果您使用 Blade 模板而非 Antlers，请按照以下步骤操作：

导航到 Statamic 项目的 resources/views 目录
打开 Blade 布局文件（例如 layout.blade.php）
找到</body>闭合标签
将您的Asyntai嵌入代码粘贴到</body>标签之前
保存文件

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

注意： In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

方法 3：使用 Partial

为了更好地组织代码，您可以为聊天机器人创建可复用的 partial：

第 1 步：创建 Partial

在 resources/views/partials/_chatbot.antlers.html 创建新文件
将您的 Asyntai 嵌入代码添加到此文件：
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

第 2 步：在布局中引入

打开布局文件（layout.antlers.html）
在 </body> 之前添加 partial 标签：
{{ partial:chatbot }} </body>

为什么使用 partial？ Partial 使得在一个地方管理外部脚本变得简单。如果您需要更新聊天机器人代码，只需编辑一个文件。

使用多个布局

如果您的 Statamic 站点使用多个布局（例如博客文章、着陆页等使用不同布局），请确保将聊天机器人脚本添加到每个希望小部件出现的布局文件中。

您可以通过多种方式设置页面使用的布局：

在条目中：将 layout: your_layout 添加到 front matter
在集合中：在集合的配置 YAML 文件中设置默认布局
在蓝图中：添加一个布局字段供编辑者选择

对于 Statamic 入门套件

如果您使用 Statamic 入门套件，布局文件的位置可能有所不同。常见位置包括：

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html，partial 位于 resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

步骤3：清除缓存并验证

添加代码后，清除 Statamic 缓存以确保更改生效：

php artisan cache:clear
php please stache:refresh

然后在新的浏览器标签页或无痕窗口中访问您的网站。您应该会在右下角看到聊天小部件按钮。点击它以确保其正常打开和运行。

看不到小部件？ 请确保您已清除 Laravel 缓存和 Statamic 的 Stache。如果您使用了静态缓存，还需运行 php please static:clear。检查浏览器控制台（F12）是否有 JavaScript 错误。

重要提示： 如果您使用 Statamic 的静态站点生成器（ssg），请在添加聊天机器人脚本后运行 php please ssg:generate 重新生成静态文件。

文档