Fatal编程技术网
  • javascript/
  • Javascript 在.pug文件中安装聊天小部件

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

javascript

Javascript 在.pug文件中安装聊天小部件,javascript,widget,pug,chatbot,web-frontend,Javascript,Widget,Pug,Chatbot,Web Frontend,我需要在我们的网站上安装聊天机器人小部件。这个小部件需要调用javascript和HTML标记。在HTML环境中安装对我来说没有问题 但是我在我的一个系统上安装它时遇到了一个问题，该系统使用.pug作为前端 奇怪的是它在其中一页上的成功。但当我在另一页上尝试时，它失败了 这是html中的示例安装： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>

我需要在我们的网站上安装聊天机器人小部件。这个小部件需要调用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>
因此，我尝试在另一页（第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)
请告知。谢谢

为了使用该小部件，javascript必须包含在
头部
中，并且组件元素必须使用在
主体
中

要将脚本添加到
头部
，将组件添加到
主体
，可以修改示例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
）语句。不能将脚本元素放在基本级别

您应该在
布局
文件中包含
脚本
标记，然后修改另一个文件以将组件放入
主体
，如下所示：

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
正如您在示例中所看到的，
plus chatbot组件
元素需要进入
主体
标记内部，而不是
头部
tag@Sean谢谢你的评论。是的。必须把身体放进去。但在哈巴狗档案里，我必须在脑袋里。正如您在我的第二个示例中所看到的，我已成功地将其安装在pug文件中，并且该组件位于head中。错误在另一个pug文件中，即使我应用了与第一个pug文件相同的方法。那是在我的登陆页面，它也必须在帕格的
身体中。还有它的错误。但是你能在我的登陆页上解释一下为什么吗。我把脚本和组件放在一起，但它成功了！即使我没有将组件放入主体中也没有错误？它生成有效的标记，这就是为什么没有错误。但该组件不打算放置在
头部
。

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