我需要在我们的网站上安装聊天机器人小部件。该小部件需要调用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)
请告知。谢谢
为了使用该小部件，必须在head中包含javascript，并且必须在body中使用component元素。
要将脚本添加到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
[在另一个示例中，因为该文件正在扩展另一个文件，所以在文件的基本缩进级别上，您只能使用extends和block（或append或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