Установите виджет чата в файле .pug - PullRequest
Новая
       26

Установите виджет чата в файле .pug

1 голос
/ 08 апреля 2020

Мне нужно установить виджет чатбота на нашем сайте. этот виджет должен вызывать теги 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)

Пожалуйста, сообщите. Спасибо

1 Ответ

1 голос
/ 12 апреля 2020

Чтобы использовать этот виджет, 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

В другом примере, поскольку этот файл расширяет другой файл, единственные операторы, которые вы можете иметь на Базовый уровень отступа файла - операторы 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
...