Skocz do zawartości

Witaj na forum webmasterów Webax.pl.

Wyświetl nową zawartość

Generator stron wizytówek

node.js grunt site builder

  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu
Comandeer
Comandeer

    Stały bywalec

  • Developer
  • 457 postów
#1

Napisano 01 sierpień 2013 - 20:40

ot, prosty, prymitywny generator stron, dzięki któremu szybko uda się nam stworzyć prostą witrynę wizytówkę. wystarczy dać mu szablony HTML (i less jak ktoś chce), określić kilka rzeczy w config.js i ładnie zgeneruje nam gotową stronkę (i nawet HTML skompresuje!). bardzo podobnego skryptu używam do generowania Comandeerowej domowej, więc jest to przetestowane w boju i jakoś działa ;)
 
co to robi?
zwykle strony wizytówki mają sztywne ramy konstrukcyjne (ten sam lay dla wszystkich podstron), zmienia się jedynie treść podstron. nie są także dynamiczne, tylko statyczne aż do bólu. i to właśnie robi ten skrypt: generuje prymitywną stronę WWW. zamiast babrać się z szablonami w edytorze, tworzysz ramy witryny raz a później skupiasz się już tylko na treści. a skrypt sobie to sam ładnie zepnie w całość. no i do tego ci skompresuje kod ;) dodatkowo wygeneruje jeszcze app.cache, sitemap, robots.txt i humans.txt. a - i zoptymalizuje dodatki
 
sposób użycia
  • klonujesz repo: https://github.com/C...er/Site-builder
  • wchodzisz do danego folderu i odpalasz npm install
  • wklejasz odpowiednie szablony HTML do folderu templates (osobno layout czyli ogólne ramy strony oraz treść dla każdej z podstron) i LESS do folderu less
  • pozostałe bzdety (obrazki, fonty i inne) wrzucasz od razu do dist
  • ustawiasz odpowiednio zmienne w config.js
  • uruchamiasz grunt
  • jeśli chcesz potestować, to po wszystkim grunt connect i odpali ci się serwer na porcie 8080
  • wszystkie pliki są do odbioru w folderze dist - uploadujesz go na serwer i voilla :D
oczywiście całość działa na node.js i grunt ;)
opiera się toto na dość prymitywnym systemie szablonów, gdzie pewne tokeny zamieniane są na treść:
  • {CONTENT} - oznacza miejsce treści w layu
  • {DESCRIPTION} -ot, SEO (meta[name=description]) dla danej podstrony
  • {MENU} - miejsce menu (skrypt może je automatycznie wygenerować!)
  • {SITETITLE} - wstawia tytuł witryny
  • {TITLE} - wstawia tytuł danej podstrony
  • {TITLESEPARATOR} - oddzielacz tytułu podstrony od tytułu witryny. pojawia się tylko wówczas gdy rzeczony tytuł podstrony istnieje (w gruncie rzeczy można się tego pozbyć, ale mam na domowej '@' w tytule, więc zostało)
  • {URI} - adres strony
  • {YEAR} - aktualny rok (żeby stopki nie trza było zmieniać w szablonie ;))
skrypt nigdy nie był w żaden sposób optymalizowany. jak powstał, tak istnieje ;) mimo, że jest super prymitywny, to mam nadzieję, że komuś się do czegoś przyda.
 
podaję jeszcze raz linka: https://github.com/C...er/Site-builder

Moje tutoriale

Ad hominem attacks are valid arguments, and you are an idiot.






Również z jednym lub większą ilością słów kluczowych: node.js, grunt, site builder

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych