Anzeige

HTML Template + JSON Files + Proxies


kosovafan

Erfahrenes Mitglied
#1
Hallo,

ich muss die Projekte online stellen und frage mich gerade ob ein Szenario wie bei Middleman Dynamic Sites möglich ist.

Ich hatte gedacht Gulp + Numjucks + Json wäre perfekt, abe irgendwie klappt das Json File Reading nicht wirklich. Also frage ich bei Euch Experten:

Grundlage:
- Projektliste als CSV vorliegend, mit entsprechenden Angaben um ein Template füllen zu können. Bilder, Fortschritt und so weiter.

Ziel:
Das beste wäre wenn die entsprechenden Json Files in ein Template geparst werden und danach als HTML File im entsprechenden Ordner abgelegt werden.

In Middleman funktioniert das wie folgt:
Ruby:
data.projects.projects.each do |project_data|
  proxy "/projects/own/#{project_data['no']}/index.html",
        "/projects/template.html",
        locals: { title: project_data['title'], intro: project_data['intro'], description: project_data['description'] }
end
Lese das json File > parse es in das entsprechende Template und verschiebe zu den Ort der im File genannt wird.

Die Locals sind unwichtig, aber vielleicht gibt es eine ähnliche Möglichkeit mit Gulp? Ich hoffe ich habe es eínigermaßen verständlich ausgedrückt.

Silvio
 

Jan-Frederik Stieler

Monsterator
Moderator
#4
Okay, dann mit Javascript:
Läuft im Grunde genauso ab. Als erstes das JSON reinladen, dann teile des JSON in variablen schreiben und diese dann ins HTML schreiben. Das HTML musste dann speichern.

Javascript st für sowas halt nicht wirklich die richtige Sprache. Und für PHP gibts inzwischen auch Taskrunner.

Dateien mit einfachem JS zuschreiben ist nicht unmöglich, z.B. Filesystem API oder File API an, aber nicht wirklich standarisiert und macht nur Ärger.

Aber wenn Du eh schon mit Ruby rum machst nimm doch nen Ruby taskrunner: https://rubygems.org/gems/rake
 

ComFreek

Mod | @comfreek
Moderator
#5
Javascript st für sowas halt nicht wirklich die richtige Sprache. Und für PHP gibts inzwischen auch Taskrunner.
Da würde ich gerne widersprechen. JS kann im Rahmen von Node.js sehr wohl als Taskrunner in einem Buildsystem eingesetzt werden, siehe z. B. Gulp oder die ganzen JS Buildsysteme.

Dateien mit einfachem JS zuschreiben ist nicht unmöglich, z.B. Filesystem API oder File API an, aber nicht wirklich standarisiert und macht nur Ärger.
Hier guckst du dir die falsche API an. Für JS im Browserkontext wirst du wahrscheinlich niemals eine API mit Komplettzugriff auf das Dateisystem finden. Für Node.js gibt es jedoch das standardisierte "fs"-Modul.

Ich hatte gedacht Gulp + Numjucks + Json wäre perfekt, aber irgendwie klappt das Json File Reading nicht wirklich. Also frage ich bei Euch Experten:
Das könnte durchaus so funktionieren. Aber ohne genaue Fehlermeldung und ohne genauen Code können wir dir nicht weiterhelfen.
 

kosovafan

Erfahrenes Mitglied
#6
Hallo,

ich habe das mal mit PHP ausprobiert, man denkt ja immer automatisch oh der Server braucht PHP und das will ich nicht, aber es funkioniert auch auf der Konsole. Mit gulp-file-include wäre das dann auch eine Möglichkeit.

Ja das stimmt mit Javascript ist das immer so eine Sache und mit Gulp habe ich nichts gefunden weswegen ich ja hier fragte. Gibt ja viele die Gulp nutzen und Json scheint ja doch ein beliebtes Format zu sein.

Ich versuche das mal mit PHP und Bash um die 180 Json Files ohne viel Handarbeit zu konvertieren.

Ich arbeite nicht mit Ruby, ich nutze nur oft Middleman und Hugo. Sind beide sehr gut dokumentiert und bieten guten Support sollte man es nötig haben. :)

Silvio
 

kosovafan

Erfahrenes Mitglied
#7
Morgen

Das könnte durchaus so funktionieren. Aber ohne genaue Fehlermeldung und ohne genauen Code können wir dir nicht weiterhelfen.
ich habe das nach den Tutorial nur oberflächig ausprobiert und es hat nicht funktioniert. Das Json File wurde nie gefunden, selbst mit direkten Pfad. Aber wie gesagt oberflächig probiert, ich hatte noch eine andere Lösung mit gulp-minisite, gulp-data und gulp-hbs. Gulp-hbs sah vielversprechend aus, aber nachdem ich mit den Entwickler gesprochen hatte war klar das hier tiefes JavaScript Coding notwendig ist.

Mfg
Silvio
 

kosovafan

Erfahrenes Mitglied
#8
Hallo,

ich habe jetzt mal ein PHP Script gebastelt

PHP:
<?php
$input = $argv[1];
$url = $input;
$data =  file_get_contents($url);
$characters = json_decode($data, true);

print "
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">
<link rel=\"stylesheet\" href=\"/assets/css/layout.css\">
<title>SiSi</title>
</head>
<body>

<header class=\"main\">
<figure>
<a href=\"/\" title=\"Welcome ...\">
<img src=\"/assets/images/layout/logo.svg\" alt=\"Logo\" width=\"115\" height=\"110\">
</a>
</figure>
</header>

<table>
<thead>
<tr>
<th>No</th>
<th>Client</th>
<th>Country</th>
<th>CM</th>
<th>Value</th>
<th>Service</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>";
    echo "<td>" . $characters['No'] . "</td>\n";
    echo "<td>" . $characters['Client'] . "</td>\n";
    echo "<td>" . $characters['Country'] . "</td>\n";
    echo "<td>" . $characters['CM'] . "</td>\n";
    echo "<td>" . $characters['Value'] . "</td>\n";
    echo "<td>" . $characters['Service'] . "</td>\n";
    echo "<td>" . $characters['Start'] . "</td>\n";
    echo "<td>" . $characters['End'] . "</td>\n";
    echo "</tr>\n";
print "
</tbody>
</table>
</body>
</html>";
?>
Jetzt ist die Frage wie kann ich das in einen bash loop einbauen?

Bash:
for file in $(ls json/*.json); do php json.php $file > html/$file.html; done
bash: html/json/10.json.html: Datei oder Verzeichnis nicht gefunden
bash: html/json/11.json.html: Datei oder Verzeichnis nicht gefunden
bash: html/json/12.json.html: Datei oder Verzeichnis nicht gefunden
Hat jemand eine Idee wie ich das kombinieren kann?

Danke
Silvio
 
Anzeige
Anzeige