如何将 HTML 个文件分解成更易于管理的块 - Glitch 上的 A 帧

Question

我在 Glitch 中使用 a-frame，我想将我的 HTML 文档分解成更易于管理的块。举个例子，当我在 <a-assets> 标签中有很多资产时，最好将其放在一个单独的文件中，但这只是一个例子，我正在寻找一种通用的解决方案来分离可能非常重要的内容大文件。

通常（即在 Glitch 之外）我会通过将文件名从 .html 更改为 .php 然后使用 PHP 包含来引用一大块 HTML 我保存在不同的文件中。例如，我会有一个 HTML 文件，其中只有这样的资产；

<a-assets>
<!-- all my images and mixins -->
...
</a-assets>

将其保存在名为 example components 的文件夹中，然后像这样在我的主文件中引用它

<?php
include 'components/assets.html';
?>

但是我无法在 Glitch 中实现这一点。当我将 index.html 更改为 index.php 然后查看应用程序时，我看到的是文件目录而不是应用程序。在这里我应该说，我根本不熟悉 PHP 并且几年前在网上发现了这个解决方案，我没有以任何其他方式使用它。

所以，这可能在 Glitch 上是不可能的（我在他们的支持论坛上问过）或者可能是我做错了什么？

如果不可能，是否有其他方法（可能使用js？）可以实现同样的原理？我试过 this w3 solution 这样的；

<!DOCTYPE html>
<html>
  <head>
    <title>Aframe - JS include test</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="js/include.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity w3-include-html="components/test.html"><a-entity>
      <a-entity w3-include-html="components/test2.html"></a-entity>
    </a-scene>
    <script>
    includeHTML();
    </script>
  </body>
</html>

引用这 2 个文件作为测试；

components/test.html

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>

components/test2.html

<a-sphere position="-3 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

然后js/include.js文件如下

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}

但这并不可靠，它似乎只加载了一个文件，而且似乎还有错误。我知道这与 a-frame 加载 page/canvas 的方式有关，所以我根本没想到它会起作用。它不如我在其他地方使用的 PHP 解决方案干净、可靠或直接。

其他人遇到过这个问题吗？了解人们如何处理这件事会很好。

如果您需要更多信息，请告诉我。

Answer 1

在出现故障时，您可以使用与 php 模板类似的功能，使用带把手的服务器端模板。这是一个简单的例子：

https://glitch.com/edit/#!/a-frame-ss-handlebars-templates

主文件是 views/index.hbs，它包含 'head' 和 'assets' 等模板，可让您分解代码。

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a-scene>
      {{> assets }}

      <a-entity id="poly" poly-api-obj="obj: #cycle-obj; mtl: #cycle-mtl" position="0 0 -5" scale="0.3 0.3 0.3"></a-entity>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

如何将 HTML 个文件分解成更易于管理的块 - Glitch 上的 A 帧

How to break up HTML files into more manageable chunks - A-frame on Glitch

php

aframe

glitch-framework