Как разбить HTML-файлы на более управляемые куски — A-frame на Glitch
я использую a-frame в Сбой и я хотел бы разбить мои документы HTML на более управляемые куски. В качестве одного примера, когда у меня много активов в <a-assets> тег было бы хорошо иметь это в отдельном файле, это всего лишь один пример, и я ищу общее решение для разделения, что может быть довольно большие файлы.
Обычно (т.е. за пределами Glitch) я бы достиг этого, изменив имя файла с .html в .php а затем использовать PHP include для ссылки на фрагмент HTML, который я сохраняю в другом файле. Например, у меня будет HTML-файл с такими же активами;
<a-assets>
<!-- all my images and mixins -->
...
</a-assets>
Сохраните это в папке, называемой, например, компоненты, а затем сослаться на это в моем основном файле, так
<?php
include 'components/assets.html';
?>
Однако я не могу добиться этого в Glitch. Когда я меняю index.html в index.php и затем просмотрите приложение. Мне показывают каталог файлов, а не приложение. Здесь я должен сказать, что я совсем не знаком с PHP и обнаружил это решение онлайн несколько лет назад, я не использую его каким-либо другим способом.
Таким образом, может быть, что это не возможно на Glitch (я спрашивал на их форуме поддержки) или, может быть, и я делаю что-то не так?
Если это невозможно, существуют ли другие способы (возможно, с использованием 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>
Ссылка на эти 2 файла в качестве теста;
компоненты / 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-frame загружает страницу / холст, поэтому я не ожидал, что это сработает вообще. Это не так чисто, надежно или просто, как решение PHP, которое я использую где-то еще.
Другие люди сталкивались с этой проблемой? Было бы хорошо понять, как люди справляются с этим.
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.
Решение
На глюк, вы можете использовать аналогичную функциональность для 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>
Другие решения
Других решений пока нет …