Jekyll - 2. Saját template

Elkészült a projektünk és megismertük a Jekyllt. Most elkészítjük a weboldalunk layoutját egy Bootstrap sablonból kiindulva, a Bootstrapet pedig SCSS-ből fordítjuk.

A váz

A Bootstrap 5.1 “Fixed top navbar example” névre hallgató példáját vesszük alapul. Nyisd meg, másold ki a forrását.

Készíts a Jekyll projektedbe egy új mappát: _layouts, ide pedig egy default.html fájlt és másold bele a Bootstrap példa kódját. Később majd átírjuk az asset url-eket a megfelelőekre benne.

Ez az alapértelmezett layout lesz, minden aloldal ebbe fog majd automatikusan bekerülni.

Bootstrap

SCSS

Készíts a projekted gyökerébe még egy mappát, most _sass névvel. Töltsd le a Bootstrapet, de ne a fordítottat, hanem a forrásokat (Source files). Mi magunk fogjuk fordítani.

A letöltött ZIP-ben lévő scss mappát másold a _sass mappába, nevezd át bootstrapre.

Már csak azt kell elérnünk, hogy valahova elkészüljön a CSS az SCSS-ből. Ehhez kell egy olyan SCSS fájl, amibe importálhatjuk a Bootstrapet.

Készíts a gyökérbe most egy css mappát, ebbe pedig egy új fájlt, a styles.scss-t. Ez lesz az oldalunk CSS-e később.

A tartalma legyen a következő:

---
---

@import "bootstrap/bootstrap.scss";

/* Show it is fixed to the top */
body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

A két kötőjeles sor fontos, ne hagyd ki. Akkor fogja CSS-é buildelni a Jekyll a fájlt, ha benne van a Front Matter.

A body-n a style a fixed navbar miatt szükséges.

Ha most elindítod a projekted a

bundle exec jekyll serve

kiadásával, akkor le is fog generálódni a Bootstrapet tartalmazó CSS-ünk a /css/styles.css fájlba.

Ezt azért csináljuk, hogy később tudjuk majd konfigurálni a Bootstrapet a saját ízlésünknek megfelelően.

JS

Szükségünk lesz s Bootstrap Javascript bundle-jére is, különben nem működne a mobilos menü és pár komponens. Ennek a fordításával nem törődünk most, úgyhogy a letöltött ZIP-ből a dist/js/bootstrap.bundle.min.js fájlt helyezd a projektedbe, egy új, js mappába.

Összekötés

Nyisd meg a _layouts alatti default.html fájlt.

Először töröljük belőle a canonical link taget:

<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/navbar-fixed/">

Majd pedig a <!-- Bootstrap core CSS --> alatti link taget cseréljük át egy olyanra, ami a saját buildelt CSS-ünkre mutat:

<link href="/css/styles.css" rel="stylesheet">

Kicsit lejebb a <!-- Custom styles for this template --> alatti sort is töröljük ki.

Az oldal alján pedig cseréljük ki a script taget:

<script src="/js/bootstrap.bundle.min.js"></script>

Tesztelés

Ha még nem indítottad el a projekted, tedd most meg. Ha böngészőben megnyitva ezt látod, akkor eddig mindent jól csináltál:

Layout

Egyelőre a layoutunk pont nem látja el a funkcióját, ugyanis a Jekyll jelenleg nem tudja hol megjeleníteni benne az oldalainkat. Módosítsuk hát úgy, hogy működjön.

A main containerünk tartalmát cseréld a következőre:

<main class="container">
    {{ content }}
</main>

A Jekyll a content varázsszó helyére fogja behelyettesíteni az aloldalak tartalmát. Ha most ráfrissítesz a weblapodra a főoldalon a post collection listáját kell látnod, immáron a saját HTML keretünkben. Sőt, a postot megnyitva, az is már az új keretben fog betöltődni:

Layout a layoutban

Tervezzünk egy picit: hova, milyen layoutot szeretnénk?

Én a főoldalt teljes szélességűre akarom, a postokat viszont Bootstrap containerben képzelem el. Ehhez az a legcélszerűbb, ha a default layoutunk teljes szélességű (container nélkül) és készítünk mellé más layoutokat, amik a defaultot kibővítik, új kereteket téve beléjük.

Teljes széles default layout

Térjünk vissza a default.html-re és töröljük a container classt a <main>-ről:

<main>
    {{ content }}
</main>

Post layout

Készítsünk a _layouts mappába egy post.html fájlt is. A tartalma legyen most ennyi:

---
layout: default
---

<div class="container">
  {{ content }}
</div>

Mit csinálunk? Fogjuk a default layoutot, ebbe beleteszünk egy Bootstrap containert és abba kerül a tartalom. Ha megnézed a _posts mappában lévő példa posztot látod, hogy ott a Front Matterben már fel is van véve, hogy ide a post layoutot kérjük:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2021-11-08 07:47:59 +0100
categories: jekyll update
---

Ha most megnézed a weboldalad, akkor azt látod, hogy a főoldal teljes széles, a post oldala pedig containerbe van zárva.

Változók

Szuper a layout - viszont a postoknál hiányoznak azok az adatok, amik a beépített post layoutban szerepeltek, mint például a cím.

Ezt a Front Matterben lévő változók kiírásával tudjuk orvosolni a post.html fájlban:

---
layout: default
---

<div class="container">
  <h1>{{ page.title }}</h1>
  <p class="small">{{ page.date }}</p>
  
  {{ content }}
</div>

Így kikerül egy <h1>-be a cím, egy <p>-be pedig a dátum, minden olyan oldalon, ahol a post layoutot használjuk.

Includeok

Foglalkozzunk picit most a navbarunkkal. Így, hogy benne van a layoutban, már azzal előrébb vagyunk, hogy új oldalakra nem kell egyesével belemásolnunk, de még szebb lenne, ha valahogy külön egységként is tudnánk vele foglalkozni.

Készíts egy _includes mappát a projekt gyökerébe, abba pedig egy nav.html fájlt. Helyezd át bele a default.html layoutból a <nav> részt, a layoutban a helyére pedig includeold be a {% include nav.html %} használatával.

Kicsit okosítsuk fel a navbarunkat, írjuk ki a weboldalunk címét az elejére és módosítsuk a menüpontokat:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">{{ site.title }}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="/">Főoldal</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/rolunk.html">Rólunk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/tagjaink.html">Tagjaink</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

A _config.yml-ben add meg a weblapod címét a title változóval:

title: PVGA Tutorial

Töltsük ki a default.html-ben a meta tageket is:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ site.description }}">
<meta name="generator" content="Jekyll">
<title>{{ site.title }}</title>

Új aloldal

A nav.html-ben készítettünk egy új “Rólunk” menüpontot. Ehhez egy md, markdown vagy html fájlt kell készítenünk a projektünk gyökérkönyvtárába rolunk néven. Én most Markdownban írom, úgyhogy rolunk.md lesz:

---
layout: post
title: Rólunk
---

Hi.
Ez a rólunk oldal tartalma.

Ha szeretnéd, hogy a <title> tagben ilyenkor az oldal címe kerüljön be a weboldal címe helyett, módosítsd a default layoutot így:

{% if page.title %}
<title>{{ page.title }}</title>
{% else %}
<title>{{ site.title }}</title>
{% endif %}

Bootstrap változók

Végül nézzük meg, hogyan tudjuk használni az SCSS-t. Ha használtad már, akkor sok újat nem fogsz látni és arról is lerántottuk már a leplet, hogy a Bootstrapünk működik.

A Jekyll serve figyeli az SCSS változásokat is, így ha a _sass/bootstrap/_variables.scss-ben állítasz valamit, akkor a Jekyll azonnal újrabuildel. Próbáld ki pl. az $enable-rounded false-ra állítását. Szögletesek lesznek frissítés után a navbarban a form elemek.

Végszó

Az alapokat megismerted: ezzel a tudással már sokkal “okosabb” statikus weboldalakat tudsz készíteni. Ha például egy egyszerű weboldalt szeretnél készíteni magadnak vagy céges/bemutatkozó oldalakkal foglalkozol, a Jekyll nagyszerű társad lehet már most is.

A következő részben készítünk egy vagy több collectiont és megismerjük azok működését picit alaposabban.

Ha esetleg elakadtál volna, innen letöltheted a projekt aktuális állapotát.