Zaimplementuj proces, który łączy dane wejściowe z szablonem HTML i zapisuje gotowe pliki HTML w wybranym katalogu. W praktyce użyjesz systemu templatingu oraz prostego pipeline’u budowania, aby automatycznie wygenerować wiele stron.
Planowanie projektu i architektura skryptu
- Określ wymagania: ile stron, jakie metatagi, jakie style.
- Wybierz technologię i szablon: Node.js z template literals lub EJS, Python z Jinja2, Go z html/template.
- Zdefiniuj strukturę danych wejściowych: lista stron, tytuły, treść, meta dane.
- Zaprojektuj szablony HTML: podstawowy layout, miejsce na dynamiczne dane.
- Stwórz mechanizm generowania: pętle po danych, renderowanie szablonów, zapis do pliku.
- Dodaj walidację i testy: poprawność kodowania, obecność plików, jednostkowe testy szablonów.
Wybór technologii i szablonów
- Node.js z template literals, EJS lub Handlebars — szybki start dla prostych generatorów.
- Python z Jinja2 — czytelne szablony i łatwy dostęp do danych w formatach YAML/JSON.
- Go z html/template — wydajny i bezpieczny generatywnego HTML.
Struktura danych wejściowych
- Array obiektów, gdzie każdy obiekt reprezentuje stronę: slug, title, content, metadata.
- Możliwość rozszerzenia o sekcje dodatkowe: keywords, badges, datum date.
- Przykładowy model danych w JSON: pages [{ slug: "index", title: "Strona Główna", content: "Witaj!", ... }]
Szablony HTML i style
- Szablon bazowy z nagłówkiem, stopką i kontenerem treści.
- Wstawianie dynamicznych pól: title, content, metadane.
- Możliwość tematycznych wariantów: różne style i układy dla różnych slugów.
Mechanizm generowania i zapis plików
- Załaduj dane wejściowe.
- Renderuj szablon dla każdej strony z użyciem wybranego templatingu.
- Zapisz wygenerowaną treść do pliku HTML w katalogu docelowym (np. dist/).
- Użyj bezpiecznych ścieżek i obsługi błędów podczas zapisu.
Walidacja i testy
- Sprawdź, czy wygenerowane pliki mają rozszerzenie .html i poprawne nagłówki.
- Zweryfikuj kodowanie UTF-8 i poprawność linków.
- Uruchom testy jednostkowe szablonów i integracyjne generowania.
Przykładowa implementacja: Node.js
- Przygotuj minimalny generator z użyciem template literals lub prostego silnika templatingu.
- Wykorzystaj prostą strukturę danych i zapisz wyniki do katalogu wyjściowego.
// minimalny generator stron HTML w Node.js
const fs = require('fs');
const path = require('path');
const pages = [
{ slug: 'index', title: 'Strona Główna', content: 'Witaj na naszej stronie.' },
{ slug: 'kontakt', title: 'Kontakt', content: 'Napisz do nas.' }
];
const tmpl = (d) => `</p>
${d.title}
${d.content}
`;
const outDir = path.join(__dirname, 'dist');
if (!fs.existsSync(outDir)) fs.mkdirSync(outDir);
for (const p of pages) {
const html = tmpl(p);
fs.writeFileSync(path.join(outDir, p.slug + '.html'), html, 'utf8');
}
Rzuty powyżej ilustrują podstawy. Możesz rozszerzyć szablon o moduły EJS/Handlebars i dodać data-driven layouty. W pliku generatora dodaj obsługę danych z plików JSON/YAML, a także możliwość generowania stron na podstawie różnych motywów CSS.
Walidacja procesu i automatyzacja
- Dodaj skrypt uruchamiający generator (np. npm run build:html).
- W razie potrzeby dodaj tryb watch, by automatycznie regenerować pliki po zmianach danych.
- W CI/CD uruchamiaj generator na push i weryfikuj obecność wygenerowanych plików.
Przykłady scenariuszy użycia
- Generowanie stron produktu z danymi w JSON na serwisach static-site.
- Tworzenie zestawu stron z różnymi tematami (ciemny/świeży motyw) bez duplikowania kodu.
- Masowe tworzenie stron z treściami z CMS, eksportowanych do HTML.
Najczęstsze pułapki i porady
- Uważaj na encoding: zawsze używaj UTF-8 w nagłówkach i zapisach plików.
- Dbaj o spójność ścieżek i katalogów wyjściowych, unikaj nadpisywania istotnych plików.
- Escape'uj dane wejściowe w odpowiednich miejscach, aby uniknąć błędów renderowania.
- Testuj generowanie na małej próbce danych przed uruchomieniem na całej stronie.