时间戳

首页 > 解决方案 > 在 .pug 文件中安装聊天小部件

javascript - 在 .pug 文件中安装聊天小部件

问题描述

我需要在我们的网站上安装一个聊天机器人小部件。该小部件需要调用 javascript 和 HTML 标记。我在 HTML 环境中安装没有问题。

但是我在我的一个使用 .pug 作为前端的系统上安装它时遇到了问题。

奇怪的是它在其中一页上的成功。但是当我在另一个页面上尝试它时它失败了。

这是 html 中的示例安装：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chatbot</title>
     <script src="https://unchatpkg.com/vue"></script>
     <script src="https://chatbot-prod.firebaseapp.com/plus-chatbotcomponent.min.js"></script> 
</head>
<body>
    <plus-chatbot-component></plus-chatbot-component> 
</body>
</html>

但在 .pug 中有点不同，javascript 和组件必须在 HEAD 中，无需将其放在 BODY 中

这是在第 1 页成功的示例安装（在将其从 html 更改为遵循 .pub 格式之后）：

doctype html
head
  title= title
  meta(name='viewport', content='width=device-width, initial-scale=1.0')
  script(src='https://opnge.com/vue')
  script(src='https://my-chatbot-prod.firebaseapp.com/my-chatbot-component.min.js')
  plus-chatbot-component

body

所以我尝试在另一个页面（第2页）上使用相同的方法。但是这次是错误的。在此页面上的代码有点不同。我找不到头部区域。我刚刚找到了身体部位。所以我将相同的方法粘贴在正文上方，但出现错误。代码如下：

extends ../layout
append styles
  //-link(rel='stylesheet' type='text/css' href='/stylesheets/customer/customer.css')
  link(rel='stylesheet' type='text/css' href='/stylesheets/customer/login.css')
  style.

script(src='https://opnge.com/vue')
  script(src='https://my-chatbot-prod.firebaseapp.com/my-chatbot-component.min.js')
  my-chatbot-component

block body
  .bg-login.segment(style='background-image: url('+background_url+')')
    include ../header_customer

错误是这样出来的：

Error: /home/crmroot/app-roro-jonggrang-v/views/customer/login.pug:7:1

Only named blocks and mixins can appear at the top level of an extending template
    at makeError (/home/crmroot/app-roro-jonggrang-v/node_modules/pug-error/index.js:32:13)
    at error (/home/crmroot/app-roro-jonggrang-v/node_modules/pug-linker/index.js:7:30)
    at addNode (/home/crmroot/app-roro-jonggrang-v/node_modules/pug-linker/index.js:34:9)

请指教。谢谢

标签： javascriptwidgetpugchatbotweb-frontend

解决方案

为了使用该小部件，javascript 必须包含在 中head，并且组件元素必须在body.

要将脚本添加到head并将组件添加到body，您可以修改示例 Pug 文件，如下所示：

doctype html
head
  title= title
  meta(name='viewport', content='width=device-width, initial-scale=1.0')
  script(src='https://opnge.com/vue')
  script(src='https://my-chatbot-prod.firebaseapp.com/my-chatbot-component.min.js')

body
  my-chatbot-component

在您的另一个示例中，由于该文件正在扩展另一个文件，因此您可以在文件的基本缩进级别拥有的唯一语句是extendsand block(or appendor prepend) 语句。您不能将脚本元素放在基本级别。

您应该script在文件中包含标签layout，然后修改这个其他文件以将组件放入 中body，如下所示：

extends ../layout

append styles
  //-link(rel='stylesheet' type='text/css' href='/stylesheets/customer/customer.css')
  link(rel='stylesheet' type='text/css' href='/stylesheets/customer/login.css')

block body
  my-chatbot-component
  .bg-login.segment(style='background-image: url('+background_url+')')
    include ../header_customer

推荐阅读