0

在我的项目中，我们遵循微前端架构，其中 HTML 页面是通过合并多个 Web 组件来构建的。这会将多个 HTML 文件组合成一个 HTML 文件。这样一来，我们就有出现语法无效的损坏 HTML 代码的风险。

为了在运行时组合多个动态生成的 HTML 页面，我们使用 nginx 反向代理。

我想要一个可以帮助识别此类情况并提供适当帮助以减轻这种情况的工具。

让我知道是否有任何漂亮的工具或其他东西

例如：这是我的主页：

<!DOCTYPE html>
<div th:fragment="add-app(page_title, content_as_html, alert_html, menuitemid)">
  <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>my title</title>
      <link rel="shortcut icon" th:href="@{/favicon.ico}" />
      <!--#include virtual="/commons/inc/resources" --> <!-- It s separate component named as resource.html which is included here via nginx dynamically-->
    </head>

    <body>
      <div class="overlay"></div>

      <th:block th:replace="${alert_html}" />
      <div class="my-custom-class position-relative">

          <a
            class="account-page-button d-flex align-items-center"
            th:href="@{/}"
            th:classappend="${menuitemid == 'App'? 'account-page-button--current' : '' }"
          >
            Apps
          </a>
      </div>

      

<!--# include virtual="/commons/inc/footer" -->

 <!-- It s separate component named as footer.html which is included here via nginx dynamically-->
    </body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script th:src="@{/apps/js/my-account.js}"></script>
  </html>
</div>

Resource.html 页面：

<link rel="icon" type="image/ico" href="/icons/favicon.ico" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="@{/lib/bootstrap/js/bootstrap.min.js}"></script>

footer.html 页面：

<footer class="main-footer">
    <link rel="stylesheet" th:href="@{/css/footer.css}" />
    <div class="main-footer__row">
        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> &copy; 2020 myproject&reg; </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/terms/website}"> Website Terms of Use </a>
        </div>
        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/legal/privacy}"> Privacy Policy </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> All prices exclude VAT </a>
        </div>
    </div>
</footer>

请记下<!--#include virtual="/commons/inc/resources" -->和<!--# include virtual="/commons/inc/footer" -->标签。有resources.html和footer.html页面，这些标签被nginx解析，nginx会分别用resources.html和footer.html的内容替换这些标签。

我想要一个可以验证最终结果的工具，即 nginx 在解析所有<!--#include virtual....-->标签后生成的 html 页面。

4

1 回答 1

0

users.skynet.be/mgueury/mozilla/ Chrome 和 Firefox 扩展非常适合报告标记中的句法和语义问题。也可以要求 HTML Validator 提出 HTML 页面的更正版本或将其转换为 XHTML。

除了上面带有插件https://www.sonarsource.com/html/的声纳外，还可以用于在构建过程中进行 html 验证。

于 2020-08-25T11:05:05.230 回答