如何更好地将 html 响应内容附加到 Node.JS pug 模板？

Question

我的 Node.JS 应用程序进行外部 API 调用，该调用返回 markdown 响应。然后，我使用 https://github.com/showdownjs/showdown 将其转换为 HTML 并将其附加到以下哈巴狗模板中的可滚动列表中。

extends layout
block layout-content
  h1.title Welcome to #{title}
  section.section.chat-container
    .container
      .columns
        .box.column.is-full
          .chat-messages.has-text-left
            p#messages
          form#chatForm(action='/api', method='post', enctype="multipart/form-data")
            .field.has-addons
              p.control.is-expanded
                input(class='input', id='query', type='text', placeholder='How can I help?', onkeyup="stoppedTyping()")
              p.control
                input(class='button is-success', id="submit", type='submit', value='Submit', disabled)
      script.
        document.querySelector("#chatForm").addEventListener("submit", async (e) => {
          e.preventDefault();
          const query = document.querySelector("#query").value;
          if (query.trim()) {
            const response = await fetch('/api', {
              method: 'POST',
              body: form
            });
            const data = await response.json();
            document.querySelector("#messages").innerHTML += `<p><strong>Query:</strong> ${query}</p>`;
            document.querySelector("#messages").innerHTML += `<p><strong>Response:</strong></p>${data.message}<br>`;
          }
        } else 
            console.error(`Invalid query!`);
        });

效果不太好。我所看到的只是带有粗体和普通字体的段落。例如，HTML 响应中返回的项目符号列表或编号列表位于容器框之外。

Answer 1

为了更好地将 HTML 响应内容附加到 Node.js 中的 Pug 模板，您可以避免直接在 JavaScript 中使用

<p>

标签，而是将内容包装在

div

容器中。这种方法允许 Markdown 生成的 HTML 内容（如列表和标题）在不破坏布局的情况下正确呈现。

解决方案

1. 将 API 响应包装在 Div 中：使用

   div

   包装转换后的 Markdown HTML 内容，保留其结构（对于列表和标题特别有用）。
2. 直接将内容附加到

   #messages

   ：在容器 div 上使用

   innerHTML

   ，这将有助于保留从 Markdown 转换返回的 HTML 的格式。
3. 错误处理：包括适当的错误处理以捕获 API 调用的任何问题。

以下是更新后的 Pug 模板和 JavaScript 的外观：

extends layout
block layout-content
  h1.title Welcome to #{title}
  section.section.chat-container
    .container
      .columns
        .box.column.is-full
          .chat-messages.has-text-left
            #messages
          form#chatForm(action='/api', method='post', enctype="multipart/form-data")
            .field.has-addons
              p.control.is-expanded
                input(class='input', id='query', type='text', placeholder='How can I help?', onkeyup="stoppedTyping()")
              p.control
                input(class='button is-success', id="submit", type='submit', value='Submit', disabled)
      script.
        document.querySelector("#chatForm").addEventListener("submit", async (e) => {
          e.preventDefault();
          
          const query = document.querySelector("#query").value;
          const form = new FormData(document.querySelector("#chatForm")); // Form data
          
          if (query.trim()) {
            try {
              const response = await fetch('/api', {
                method: 'POST',
                body: form
              });

              if (!response.ok) throw new Error('Network response was not ok');
              
              const data = await response.json();
              
              // Append user query to #messages
              document.querySelector("#messages").innerHTML += `<div><strong>Query:</strong> ${query}</div>`;
              
              // Append API response to #messages
              const responseContainer = document.createElement('div');
              responseContainer.innerHTML = `<strong>Response:</strong><div>${data.message}</div>`;
              document.querySelector("#messages").appendChild(responseContainer);
              
              // Clear input field
              document.querySelector("#query").value = "";
              document.querySelector("#submit").disabled = true;
            } catch (error) {
              console.error('Error fetching API response:', error);
            }
          } else {
            console.error(`Invalid query!`);
          }
        });

变更说明

1. 容器调整：

   • 通过使用

     div

     容器而不是

     <p>

     ，可以正确显示 Markdown 中的 HTML 结构（如项目符号点或编号列表）。

2. 错误处理：

   • try-catch

     块和网络检查

     if (!response.ok)

     有助于确保稳健的错误处理，如果API调用失败则显示错误。

3. 清除输入并禁用提交按钮:

   • 每次成功查询后，输入字段都会被清除，提交按钮将被禁用，直到输入新文本。

这应该在

#messages

容器内为您提供格式良好的输出，特别是对于 Markdown 中的复杂 HTML 结构。让我知道这是否有帮助！