我正在使用Glitch中的a-frame
,我想将我的HTML文档分解为更易于管理的块。作为一个例子,当我在<a-assets>
标签中有很多资产时,将其放在单独的文件中是一个很好的选择,但这只是一个示例,我正在寻找一个通用解决方案来分开可以是很大的文件。<<<<
通常(即在小故障外(我将通过将文件名从.html
更改为.php
来实现这一目标,然后使用PHP包括参考我保存在其他文件中的HTML的一块HTML。例如,我将拥有一个HTML文件,其中只有类似的资产;
<a-assets>
<!-- all my images and mixins -->
...
</a-assets>
将其保存在称为组件的文件夹中,然后将其引用在我的主文件中,例如so
<?php
include 'components/assets.html';
?>
但是,我无法在故障中实现这一目标。当我将index.html
更改为index.php
然后查看应用程序时,我将显示文件目录而不是应用程序。我应该在这里说我根本不熟悉PHP,几年前在网上发现了该解决方案,我不以其他方式使用它。
所以,这可能是在小故障上不可能的(我在他们的支持论坛上问(,或者也许是,我做错了什么?
如果不可能,是否有其他方法(可能使用JS?(可以实现相同的原则?我尝试了这样的W3解决方案;
<!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>
将这两个文件引用为测试;
组件/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>
组件/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型框架加载页面/画布的方式有关,因此我真的不希望它能起作用。它不像我在其他地方使用的PHP解决方案那样干净,可靠或直接。
其他人遇到了这个问题?了解人们如何处理这将是一件好事。
如果您需要更多信息,请告诉我。
在小故障上,您可以使用类似的功能来使用与车把的Serverside模板进行模板。这是一个快速示例:
https://glitch.com/edit/# !/a-frame-shermshandlebars-templates
主文件是views/index.hbs,它包括诸如'head'和'资产'之类的模板,可以使您分解代码。
<!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>