Silnik szablonów oparty o tagi HTML

0

Spotkał się ktoś z Was z system szablonów który wykorzystuje samą składnie html?

Załóżmy że mamy dane

$data["somevariable"]="List of people";
$data["usersarray"]=array(
    array("name"=>"Adam","age"=>30),
    array("name"=>"John","age"=>40)
);

Natomiast szablon chciałbym aby wyglądał jak zwykły html i co najważniejsze zawierał w sobie przykładowe dane które później zostaną zastąpione

<body>
<text name="somevariable">Sample text</text>
<table>
    <loop name="usersarray">
      <tr><td><item name="name">Mike</item></td><td><item name="age">50</item></td></tr>
    </loop>
</table>
<loop>
</body>

Ostatecznie tag text znika i zostaje tylko wartość zmiennej somevariable,
a tag loop swoją zawartość powiela usuwając tag item i pozostawia w jego miejsce wartości z usersarray.

Chodzi mi to, aby szablon można było wyświetlić w przeglądarce i aby wyglądał jak gotowa strona. Pewnie ktoś już coś takiego potrzebował, ale nie mogę nic podobnego znaleźć. Będę wdzięczny za każde sugestie.

1

To o czym mówisz to jest abstrakcja na HTMl'a.

I to jest banalne do napisania przecież. Czemu sam tego nie zrobisz?

2

Bez sensu. HTML to słaby język do jakiejkowiek zaawansowanej logiki z uwagi na upierdliwość składni więc po prostu lepiej jest użyć czegoś normalnego w formie wstawek. Przykładowo taki JSX używa składni htmla ale jakakolwiek logika nie związana z samym HTMLem jest napisana w JSie więc masz best of both worlds: widok opisany w języku wynikowym a całe mięsko w czymś bardziej ludzkim

Jak chcesz czegoś co jest napisane w XMLu i potrafi przemapować XMLa (z danymi) na HTMLa z widokiem to popatrz na XSLT. Nikt tego już nie używa, bo XML/HTML to po prostu słaby język do pisania logiki.

1
slsy napisał(a):

Bez sensu. HTML to słaby język do jakiejkowiek zaawansowanej logiki z uwagi na upierdliwość składni więc po prostu lepiej jest użyć czegoś normalnego w formie wstawek. Przykładowo taki JSX używa składni htmla ale jakakolwiek logika nie związana z samym HTMLem jest napisana w JSie więc masz best of both worlds: widok opisany w języku wynikowym a całe mięsko w czymś bardziej ludzkim

Jak chcesz czegoś co jest napisane w XMLu i potrafi przemapować XMLa (z danymi) na HTMLa z widokiem to popatrz na XSLT. Nikt tego już nie używa, bo XML/HTML to po prostu słaby język do pisania logiki.

O czym Ty gadasz? :| Przecież autor chce zrobić widok w HTML.

1
Riddle napisał(a):

O czym Ty gadasz? :| Przecież autor chce zrobić widok w HTML.

Jeśli chodzi o XSLT to w dawnych czas tak robiono strony, więc się da

Jeśli chodzi o pierwszy wywód: OP chce mieć pętlę w HTML i zamienić ten kod

<body>
<text name="somevariable">Sample text</text>
<table>
    <loop name="usersarray">
      <tr><td><item name="name">Mike</item></td><td><item name="age">50</item></td></tr>
    </loop>
</table>
<loop>
</body>

na

<body>
<text>List of people</text>
<table>
      <tr><td><item name="name">Adam</item></td><td><item name="age">30</item></td></tr>
      <tr><td><item name="name">John</item></td><td><item name="age">40</item></td></tr>
</table>
<loop>
</body>

według mnie implementowanie takich instrukcji jak pętla w HTML jest bez sensu i w takim wypadku lepiej jest użyć jakieś systemu do komponentów (via chat gpt):

// Assuming you have the following data from PHP
const data = {
  somevariable: "List of people",
  usersarray: [
    { name: "Adam", age: 30 },
    { name: "John", age: 40 },
  ],
};

// React component to render the data
const App = () => (
  <body>
    <text name="somevariable">{data.somevariable}</text>
    <table>
      {data.usersarray.map((user, index) => (
        <tr key={index}>
          <td>
            <item name="name">{user.name}</item>
          </td>
          <td>
            <item name="age">{user.age}</item>
          </td>
        </tr>
      ))}
    </table>
  </body>
);
1

Aaaa, faktycznie. Autor chce zamienić HTML na HTML. Nie pomyślałem o tym.

No to faktycznie to jest słaby pomysł.

1

<datalist> jakoś dołącza.

0

Dziękuję za tak szybki i liczny odzew. Tak zamiana html na html to jest właśnie to. Jednak skoro nikt czegoś takiego nie używał w przeszłości muszę założyć że to sensu jednak nie ma.

Z punktu widzenia programisty podejście że za interfejs w przeglądarce odpowiada javascript (reactowe komponenty) jest jak najbardziej ok, ale to ma być rozwiązanie dla grafika który html ogarnie. Zrobi stronę wypełni przykładową treścią, a dane magicznie się pojawią i mu tą treść podmienią :)

1
abe napisał(a):

Z punktu widzenia programisty podejście że za interfejs w przeglądarce odpowiada javascript (reactowe komponenty) jest jak najbardziej ok, ale to ma być rozwiązanie dla grafika który html ogarnie. Zrobi stronę wypełni przykładową treścią, a dane magicznie się pojawią i mu tą treść podmienią :)

No to mógłbyś użyć czegoś takiego jak:

  • Twig
  • Blade

Wygląda to mniej więcej tak:

<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>

  <a href="{{ contactUrl }}" class="btn btn-primary">Kontakt z nami</a>

  {{ blogSideBar }}
</aside>
0 
<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>

  <a name="contactUrl" class="btn btn-primary">Kontakt z nami</a>
  <text name="blogSideBar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </text>
</aside>

Coś takiego mi się marzy

0
abe napisał(a):

Coś takiego mi się marzy

I jakby tego się miało używać konkretnie?

Dobrze rozumiem że chciałbyś żeby Twój grafik napisał coś takiego?

<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>

  <a name="contactUrl" class="btn btn-primary"></a>
  <text name="blogSideBar">
  </text>
</aside>

I potem w to <text> automatycznie miałoby się wsadzić ta treść?

<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>

  <a class="btn btn-primary">Kontakt z nami</a>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</aside>

Dobrze rozumiem?

0

Tak dokładnie to coś takiego

Grafik:

<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>
  <a xid="contactUrl" class="btn btn-primary">Contact</a>
  <text xid="blogSideBar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </text>
</aside>

Pseudo kod:

$data['contactUrl']=tag(
  'href'=>'#contact',
  'content'=>'Contact Us');
$data['blogSideBar']='Nothing to see here;

Output:

<aside id="blog-sidebar" class="col-sm-3">
  <h4>Blog 4programmers.net</h4>
  <a href="#contact" class="btn btn-primary">Contact Us</a>
  Nothing to see here
</aside>

Jak powyższe napisałem i przeczytałem do doszedłem do wniosku, że chyba mi się za bardzo nudzi :)

1

@abc To po co grafik miałby wpisaywać treść do szablonu, skoro ona i tak będzie zastąpiona? Czemu miałby nie wpisać tylko placeholdera?

0

Grafik i tak tworzy taki gotowy wypełniony projekt (graficzny, ale często tez wykona i wersję w HTMLu). Wszystko ładnie się prezentuje bez znaczników wykorzystywanych przez szablon, a tekst w paragrafach zajmuje docelową wielkość, więc widać całą stronę/interfejs. Coś takiego chętnie bym wykorzystał bezpośrednio, bez przerabiania dodatkowo na szablon.

0
abe napisał(a):

Grafik i tak tworzy taki gotowy wypełniony projekt (graficzny, ale często tez wykona i wersję w HTMLu). Wszystko ładnie się prezentuje bez znaczników wykorzystywanych przez szablon, a tekst w paragrafach zajmuje docelową wielkość, więc widać całą stronę/interfejs. Coś takiego chętnie bym wykorzystał bezpośrednio, bez przerabiania dodatkowo na szablon.

No to narzędzia pod Twoją potrzebę czyli: "chcę mieć grafika który mi zrobi szablon w HTML'u, a nie w innym systemie plików, tak żebym ja nie musiał nic przerabiać tylko po prostu wsadzić treść w HTML'a" chyba nie ma.

0

Wygląda jak robota dla IDE, bo przykładowo taki WebStorm ma "code snippets" które sam możesz sobie tworzyć i pomagają w generowaniu kodu. Tutaj link do tego o co mi chodzi: https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets/

Do generowania tekstu możesz użyć tego: https://www.jetbrains.com/guide/javascript/tips/add-lorem-ipsum/
Czyli wpisujesz text>lorem + tab i gotowe :)

Edit: albo coś takiego: https://docs.emmet.io/

0

Zależy co chcesz zrobić, coś takiego to banał w golang templates, ale do tego potrzeba działającego serwera. Jeśli natomiast chcesz mieć statyczny html który generujesz u siebie na komputerze a potem wrzucasz na serwer to na pewno da się to zrobić w python i są do tego biblioteki.

0

Kompenent Angulara z szablonem wyciągniętym do oddzielnego pliku rożni się od twojego wymarzonego rozwiązania tylko tym, że

  • kontrola sterowania używa interpunkcji zamiast znaczników i atrybutów <li *ngFor="i in userarray">...</li> a <loop name="usersarray"><li>...<li></loop>
  • przykładowy tekst zawiera interpunkcję, np. <p>{{blogSideBar ?? 'Na straganie, w dzień targowy…'}}</p> a <text xid="blogSideBar">Na straganie, w dzień targowy…</text>

Zauważ, że w obu grafik musi pilnować identyfikatorów podstawianych wartości i definiować pętle.

PHP nie znam, ale mogę podrzucić inne silniki opisujące logikę atrybytami i znacznikami: Prolog Well-formed Pages, Genshi. Może trafisz na coś pehapowego po tych hasłach. Możesz też zainspirować się i napisać coś własnego.

1 użytkowników online, w tym zalogowanych: 0, gości: 1