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

Grav CMS 的分步指南

获取嵌入代码

平台：

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

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

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

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

步骤 2：添加到 Grav 主题模板（推荐）

将聊天机器人添加到 Grav 站点所有页面的最佳方式是编辑主题的基础 Twig 模板：

导航到 Grav 项目的 user/themes/yourtheme/templates/ 目录，并打开 default.html.twig（或主题使用的基础模板）
在 </body> 闭合标签之前添加您的 Asyntai 嵌入代码：

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

保存文件

提示： Grav 使用 Twig 作为模板引擎。基础模板通常是 default.html.twig 或 partials/base.html.twig，具体取决于您的主题。检查主题结构以找到包含 </body> 闭合标签的正确文件。

替代方法 1：使用 Grav 资源管理器

Grav 内置的资源管理器提供了一种通过 Twig 添加 JavaScript 资源的简洁方式：

打开主题的基础 Twig 模板（例如 user/themes/yourtheme/templates/partials/base.html.twig）
使用资源管理器添加 JavaScript：

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

或者在基础模板中添加内联 JavaScript 以动态创建脚本元素：

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

注意： 资源管理器方法是 Grav 推荐的 JavaScript 资源管理方式。它提供内置的资源管道、排序和分组支持。

替代方法 2：使用 Custom JS 插件

如果您更喜欢基于插件的方式，无需编辑主题文件：

从 Grav 管理面板或通过命令行安装"Custom JS"插件：

bin/gpm install custom-js

转到 Admin > Plugins > Custom JS
添加嵌入脚本代码：

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

保存插件配置

提示： 使用插件注入脚本意味着您无需修改任何主题文件。这使得切换或更新主题时不会丢失聊天机器人集成。

替代方法 3：在子模板中使用块覆盖

如果您的 Grav 主题使用 Twig 块继承，您可以在子模板中覆盖底部块：

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

创建或打开一个继承主题基础模板的子模板
添加上面所示的块覆盖
parent() 调用确保块中所有现有内容都被保留

注意： 此方法使用 Twig 的模板继承系统。确保块名称（例如 bottom）与主题基础模板中定义的块名称匹配。常见的块名称包括 bottom、javascripts 或 footer。

替代方法 4：使用 Grav Custom Head 插件

另一个基于插件的选项是 Custom Head 插件：

通过 CLI 或管理面板安装 custom-head 插件：

bin/gpm install custom-head

转到 Admin > Plugins > Custom Head
在插件配置中添加您的 Asyntai 嵌入脚本代码：

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

保存配置

提示： Custom Head 插件允许您在不修改主题文件的情况下将代码注入站点的 head 或 body 部分。请查看插件文档以获取正确的放置选项，将脚本插入到 </body> 闭合标签之前。

步骤3：清除缓存并验证

添加代码后，清除 Grav 缓存并验证安装：

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

在新的浏览器标签页中打开您的 Grav 站点。您应该能在右下角看到聊天小部件按钮。点击它确保它能正常打开和运行。

看不到小部件？ 确保您已使用 bin/grav clearcache 或从管理面板清除了 Grav 缓存。检查是否已将 YOUR_WIDGET_ID 替换为仪表板中的实际小部件 ID。清除浏览器缓存或在无痕模式下查看。打开浏览器控制台（F12）检查是否有 JavaScript 错误。右键点击并选择"查看页面源代码"以验证脚本是否存在于页面源代码中。