Parcel - wykorzystanie szablonów handlebars

Kamil Powroźnik

2019-05-03 | 8 min

Hej, w ostatnim poście pokazałem Ci, czym jest Parcel oraz dlaczego jest wyjątkowy. Dziś zobaczysz jak małym nakładem pracy i konfiguracji możemy stworzyć projekt wraz z systemem szablonów handlebars, który ułatwi pracę z kodem na przykładzie prostej strony. Podczas tworzenia projektu będziemy bazować na kodzie z poprzedniego postu: project-with-parcel

Odpowiednie zależności

Do poprawnego działania wystarczy nam instalacja jednego pluginu o nazwie parcel-plugin-handlebars.

Zrobimy to poleceniem:

npm install --save parcel-plugin-handlebars

Plugin sam w sobie dostarcza nam już podstawową konfigurację i od razu moglibyśmy z niego korzystać. Po zapoznaniu się z dokumentacją wystarczy że pliki .hbs tworzylibyśmy w podanych katalogach.

module.exports = {
  data: 'src/markup/data',
  decorators: 'src/markup/decorators',
  helpers: 'src/markup/helpers',
  layouts: 'src/markup/layouts',
  partials: 'src/markup/partials',
};

Jako, że nie idziemy na łatwiznę, stworzymy swoją własną konfigurację. W tym celu, w głównej ścieżce projektu utwórzmy pliki o nazwie handlebars.config.js lub hbs.config.js. Chciałbym, aby główne pliki layoutu oraz jego części znajdowały się odpowiednio w katalogach src/templates oraz src/templates/partials dlatego nasza konfiguracja będzie wyglądać tak:

module.exports = {
  data: 'src/data',
  helpers: 'src/tools',
  layouts: 'src/templates',
  partials: 'src/templates/partials'
};

Nie zapomnij również o utworzeniu struktury katalogów adekwatnej do tej, podanej w konfiguracji.

PS. od teraz wszystkie pliki z markupem, w tym index muszą mieć rozszerzenie .hbs. Musimy również zmienić rozszerzenie w naszym entrypoincie w pliku package.json.

Tworzymy szablon

Skoro nasza konfiguracja działa jak należy, przejdźmy teraz do stworzenia prostej strony składającej się z prostego headera z nawigacją, treścią oraz stopką. W celu zademonstrowania możliwości handlebars utworzymy dwie podstrony - stronę główną oraz stronę kontaktową.

Całość zmian możesz oczywiście obserwować na odpowiedniej gałęzi w moim repozytorium project-with-parcel

Główny layout strony

Zacznijmy od stworzenia głównego layoutu. Będzie on nosił nazwę base.hbs i znajdzie się w katalogu src/templates. Na obecną chwile będzie on bardzo ubogi, jednak za moment rozszerzymy go o następne części layoutu.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Project with Parcel</title>
  <link rel="stylesheet" href="./styles/main.scss" />
</head>

<body>
  {{{body}}}
</body>

</html>

Możesz zauważyć, że między tagami <body> znalazło się nietypowe wyrażenie {{{body}}} - jest to miejsce, w które będzie wstrzykiwana treść z naszych podstron, jednak o tym za chwilę. Zabierzmy się za stworzenie headera strony.

Header

W tym celu stwórzmy plik header.hbs w katalogu src/templates/partials. Będzie się w nim znajdował cały markup naszego headera.

Wygląda on następująco:

<header class="header">
  <div class="container">
    <div class="header__grid">
      <a href="/" class="header__link">
        <h1 class="header__title">My <span class="text-red">awesome</span> site</h1>
      </a>
      <nav class="navigation">
        <ul class="navigation__list">
          <li class="navigation__item">
            <a href="/" class="navigation__link">Home</a>
          </li>
          <li class="navigation__item">
            <a href="./contact.hbs" class="navigation__link">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Teraz musimy go zaimportować w pliku base.hbs wyrażeniem:

{{> header}}

Wygląda to następująco:

<body>
  {{> header}}
  {{{body}}}
</body>

Stopka

Analogicznie do powyższego kodu stwórzmy stopkę. Plik będzie nazywał się footer.hbs, znajdzie się dokładnie w tym samym katalogu co header.

Markup będzie wyglądał następująco:

<footer class="footer">
  <div class="container">
    Created with <span class="fa fa-heart text-red"></span>
  </div>
</footer>

Zaimportujmy go tak samo jak header, dodając do pliku base.hbs wyrażenie {{> footer}}

Tworzymy podstrony

Mając już w pełni skonfigurowany layout możemy przejść do tworzenia podstron. Będą to pliki .hbs bezpośrednio w katalogu /src. Podstrony będą automatycznie generowane poprzez podlinkowanie ich w nawigacji.

Nasz index.hbs będzie wyglądał w następujący sposób:

{{!< base}}

<main class="container">
  <h2>Hello World!</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere id dolorum accusamus totam maxime magnam quam minus
    temporibus laboriosam error.</p>
</main>

Zauważ wyrażenie {{!< base}} na początku pliku. Pozwala nam ono zaimportować nasz główny layout, reszta markupu to to, co zostanie wstrzyknięte do naszego layoutu.

Drugim plikiem będzie contact.hbs, zawiera on prosty markup:

{{!< base}}

<div class="container">
  <h2>Contact</h2>
  <p>Hello! If you want contact with me, please send me a message at <a
      href="mailto:parcel@bycfrontendem.blog">parcel@bycfrontendem.blog</a></p>
</div>

Gotowe. Stworzyliśmy prostą stronę z wykorzystaniem szablonów handlebars. W następnym poście z tej serii przedstawię Ci zaawansowane możliwości biblioteki handlebars.js.

Cały kod źródłowy z tego posta znajdziesz na moim repozytorum project-with-parcel

Podsumowanie

Jak widzisz, handlebars umożliwia nam stworzenie uniwersalnego layoutu i komponentów, które mogą być reużywalne. Dzięki niemu w szybki sposób możesz tworzyć strony www, bez niepotrzebnego kopiowania jej fragmentów. Jeśli ten post Ci się spodobał lub zauważyłeś nieprawidłowości zostaw komentarz!


Hej, ta strona wykorzysuje pliki cookies, localStorage, sessionStorage oraz dane osobowe do celów analitycznych.