Jekyll - 3. Collectionök kezelése

Előzőleg elkészítettük a layoutunkat és előkészítettünk egy új menüpontot amivel majd később dolgozunk.

Collection

Ahogy az első részben említettük, a collectionökbe összetartozó oldalakat, adatokat gyűjthetünk. Gyárilag pedig van egy posts névre hallgató, hardcoded collection a Jekyllben.

Post lista

Először a gyári, posts collectionnel fogunk dolgozni: készítünk egy kártyás listát belőlük a kezdőlapra.

Ha az index.markdownt megnézed, láthatod, hogy egy home nevű beépített layoutra támaszkodik a lista megjelenítéséhez - ez nekünk nem lesz jó alap, így töröld ezt a fájlt. Helyette hozd létre az index.html-t, abba pedig a következőt írd:

---
layout: default
---
<section class="bg-light p-4">
    <div class="row">
        {% for post in site.posts %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <img src="/images/posts/{{ post.image }}" class="card-img-top" alt="{{ post.title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text">{{ post.description }}</p>
                    <a href="{{ post.url }}" class="btn btn-primary">Olvasás</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

Így végigmegyünk a posts collection elemein és kirajzoljuk őket Bootstrap kártyákra. Ha most ránézel az oldaladra, láthatod, hogy képek ugye nincsenek és a post.description sem jelenik meg. Mielőtt ezt pótolnánk, töltsd le innen ezt a pár teszt képet és egy új mappába, az images/posts/ alá bontsd ki a projektben.

Most módosíthatjuk az első postunk front matterét:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2021-11-08 07:47:59 +0100
categories: jekyll update
description: Első remek post az oldalon
image: post1.jpg
---

Ha pedig most ránézel, megjelenik mind a leírás, mind a kívánt kép. Csinálj még két posztot, legyen használva a másik két képünk is - töltsük ki vele a kezdőlap tetejét.

Új collection

Létrehozás, adatok

Egy szimpla bemutatkozó oldaltól komolyabb weblap esetén biztosan előfordul, hogy van valami más, ami miatt kell majd egy új collection. A mi példánkban a fiktív valamink tagjait fogjuk felsorolni. Mindenkinek lesz egy egyszerű aloldala az adataival, a “Tagjaink” menüpontban pedig ki is listázzuk őket.

Kezdjük is azzal, hogy a _config.yml-ben felvesszük az új collectiont:

collections:
  members:
    output: true

Az output: true fontos! Enélkül nem fogja automatikusan HTML fájlokká alakítani a tartalmat a Jekyll. Ha most fut a jekyll serve, indítsd újra!

Hozzuk létre az _members mappát a projekt gyökerébe, majd pedig hozd létre az első tagunkat. Én ezt a random névgenerátort használtam, az oldalak fájlnevének pedig a nevek “slugosított” formáját (pl. farkas-norbert.md) használtam.

A tartalom a következő:

---
layout: member
name: Farkas Norbert
since: 2020-04-11
role: Fejlesztő
image: pic1.jpg
---
Ez lenne pedig Norbi bioja, amit írhatna magáról.

Értelemszerűen van egy nevünk, egy since változónk, ami azt jelzi mikortól tag, egy role, ami a betöltött pozíciója és egy image, ami egy fotó róla. A Front Matter alá - azaz a contentbe - írt szöveg pedig egy bio, egy “magamról” infó.

Csinálj még pár ilyet.

Készítsünk itt is mappát a képeknek, az images/members/ alatt. A képeket letöltheted innen. Egyébként a képek a thispersondoesnotexist.com-ról származnak.

Member layout

Szeretnénk egy olyan layoutot, amit a tagok aloldalainál használhatunk, és az ott megadott adatokat megfelelően megjeleníti majd nekünk. A _layouts alatt készítsük hát el a member.html fájlt:

---
layout: default
---
<div class="container">
  <div class="row">
    <div class="col-3">

      <img src="/images/members/{{ page.image }}" alt="{{ page.name }}" class="img-fluid mb-3">

      <h2 class="mb-3">{{ page.name }}</h2>

      <ul class="list-group">
        <li class="list-group-item d-flex flex-column">
          <span class="small">Pozíció</span>
          <span>{{ page.role }}</span>
        </li>
        <li class="list-group-item d-flex flex-column">
          <span class="small">Tagság kezdete</span>
          <span>{{ page.since }}</span>
        </li>
      </ul>
    </div>
    <div class="col-9">
      <h2>Bio</h2>

      {{ content }}
    </div>
  </div>
</div>

Ezzel egy két hasábba tört felületünk lesz. Bal oldalon a fotó, név és listában az egyéb adatok, jobb oldalon pedig a bio szöveg. Ugye most listaoldal nincs, de a címet ismerve meg tudjuk nézni a tagjaink oldalait: http://127.0.0.1:4000/members/farkas-norbert.html formában:

Listaoldal

Készítsük el a tagjaink.html fájlt. A főoldalhoz hasonló listát készítünk bele. A különbségek:

• a collectiont a site.members-ből vesszük,
• title helyett a name elemet írjuk ki,
• description helyett pedig a role-t

A képeink egész nagyok, ezért ezt a post layoutba teszem, hogy legyen containerünk rajta:

---
title: Tagjaink
layout: post
---
<div class="row">
    {% for member in site.members %}
    <div class="col-md-4 mb-4">
        <div class="card">
            <img src="/images/members/{{ member.image }}" class="card-img-top" alt="{{ member.name }}">
            <div class="card-body">
                <h5 class="card-title">{{ member.name }}</h5>
                <p class="card-text">{{ member.role }}</p>
                <a href="{{ member.url }}" class="btn btn-primary">Részletek</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

A menüben a “Tagjaink” pontot megnyitva, ezt kell látnod:

Végszó

Most, hogy már új collectionöket is tudsz csinálni, könnyen tudsz bármiféle, könnyen frissíthető tartalmat előállítani a weboldalad részére.

A következő részben megismerjük a híresebb Jekyll pluginokat és pl. készítünk listákat kategóriák és tagek alapján - mint ahogy a mi Böngészés oldalunk működik.

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