Как разбить HTML-файлы на более управляемые куски - A-frame на Glitch - PullRequest
Новая
       23

Как разбить HTML-файлы на более управляемые куски - A-frame на Glitch

0 голосов
/ 25 апреля 2018

Я использую a-frame в Glitch , и я хотел бы разбить мои документы 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, которое я использую в других местах.

Другие люди сталкивались с этой проблемой? Было бы хорошо понять, как люди справляются с этим.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 26 апреля 2018

На глюк, вы можете использовать аналогичную функциональность для шаблонов 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>
...