Arkistosivut Jekyllissä

Arkistosivut ovat koosteita jonkun määrätyn asian mukaan. Sellainen voi olla vaikka aina yhden vuoden julkaisut sisältävä arkisto. Tai sitten luettelo yhden kirjoittajan kaikista artikkeleista. Myös luettelo kaikista kirjoittajista on oma arkistosivunsa. Jekyll ei tee niitä automaattisesti, kuten WordPress, joka toisaalta estää sisällön paisumisen ja toisaalta lisää yhden työvaiheen. Työn suhteen arkistosivut eivät kuitenkaan ole mitenkään merkityksellisiä, koska ne tehdään vain kerran.

Jekyll kutsuu arkistoja nimellä kokoelmat, collections, mutta minä käytän tylsänä nimeä arkisto. Tiedän, että moinen nimenmuutos saattaa vaikeuttaa tiedon hankkimista muualta, mutta minulla on suunnaton vastahanka siirtyä käyttämään konsulttienglantia. Ellei ole ehdoton pakko.

Kirjoittaja-arkisto

Teknisesti arkistosivu ei ole muuta kuin tavallinen artikkeli, joka ei ole päivämääräsidonnainen, mutta jota on myös rampautettu hieman. Koska tekeminen on ainoa tapa oppia, niin tehdään kirjoittaja-arkisto – oikeastaan vain siksi, että kaikki muutkin ohjeet tekevät niin.

Siihen, että saadaan

  • arkisto kaikista kirjoittajista
  • jokaiselle kirjoittajalle oma arkistosivu jutuista
  • linkityksen jokaiseen paikkaan

joudutaan tekemään aika paljon muutoksia.

Tekemiset saattavat tuntua sekavalta ensi alkuun, ja sitä kaikki taatusti on, mutta on muistettava Jekyllin perusidea: se koodareiden tekemä blogialusta viritykseen ja että saa virittämisellä aikaiseksi sivut Github Pageen. Siitä se on kasvanut kehitysympäristöksi, josta saadaan aikaiseksi staattiset sivut sivustolle. Jekyll tyydyttää siten täysin toisenlaiset tarpeet kuin WordPress, puhumattakaan isommista raskaan sarjan kehitysalustoista.

Arkiston luominen

Ensimmäiseksi täytyy eräällä tavalla luoda arkisto ja se tehdään Jekyllin asetustiedostossa _config.yml. Avataan se sivupohjan juuresta ja lisätään sinne tämä (samalla voi muokata perustiedot, kuten sivuston nimen, urlin jne. jos kyseessä on muuta kuin vain paikallisesti uteliaisuuttaan testattava):

# Collections
 collections:
  kirjoittajat:
    output: true
  • collections: kertoo, että asetetaan arkisto
  • kirjoittajat: taasen mistä tehdään arkisto eli kirjoittajista
  • output: true aloittaa tekemään jokaiselle kirjoittajalle omaa juttuarkistoa

Jos haluatkin luetella vaikka henkilökunnan, niin jätä output: true pois, koska varsinaista kirjoittajien artikkeleita ei ole. Vaihda myös kirjoittajat: johonkin paremmin sopivaan, vaikka team:.

Arkisto vaatii oman hakemistonsa Jekylliin, koska sivut, jotka esittelevät arkiston, laitetaan sinne. Sellainen täytyy tehdä Jekyllin juureen:

mkdir ~/stage/proto/_kirjoittajat

  • Jekyllin tekemän sivuston hakemisto on ~/stage/proto
  • _kirjoittajat on sama kuin collections määrittelyssä, mutta alkavalla alaviivalla; ylipäätään kaikki kehityssivuston hakemistot alkavat aina alaviivalla _

Layoutin oletukset

Jokaisella sisältötyypillä on omat oletuksensa. Ne määräävät mitä tulee <head> tagiin, sekä hieman miten sisältöosaa muotoillaan. Käytettävä layout voidaan kertoa per sisältö head matter osassa, mutta ne voidaan myös asettaa oletuksille.

Avaa _config.yml ja lisää tämä:

defaults:
  - scope:
      path: ""
      type: "kirjoittajat"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"

Tuo tarkoittaa yksinkertaistetusti, että  aina kun sisältötyyppi on

  • kirjoittajat, niin käytettävä layout on author
  • posts, niin käytettävä layout on post
  • kaikki muut ovat layoutilla default

Nyt ei tarvitse käyttää yhdessäkään head matter osassa määritystä layout:.

Kirjoittajien luominen

Jotta saataisiin kirjoittaja-arkisto, niin täytyy olla kirjoittajia. Tai niitä tiimiläisiä. Luodaan heille oma sivu, eräänlainen profiilisivu. Ne tehdään hakemiston _kirjoittajat alle.

nano ~/stage/proto/_kirjoittajat/jakke.md

  • pääte .md on nopeampi kirjoittaa kuin .markdown; molemmat kuitenkin toimivat ja tarkoittavat samaa eli teksti on markdown muotoista

Lisää sinne suunnilleen tällaista. Muista, että front matter on suunnilleen säännömukainen.

---
short_name: jakke
name: Jakke Lehtonen
position: Sisällöntuotto
---
Jakke vastaa sivuston toiminnasta sekä sisällöstä.

Tiimin sivu

Luodaan sivu, jossa koko tiimi on lueteltuna. Tehdään se sivuksi, joten tiimisivu luodaan sivuston juureen:

nano ~/stage/proto/team.md

Lisää sinne suunnilleen tällaista:

---
title: Tiimi
permalink: /tiimi/
---
<h1>Staff</h1>

<ul>
  {% for author in site.kirjoittajat %}
    <li>
      <h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>
  • Arkisto rakennetaan filtterillä site.kirjoittajat (en minä tiedä miksi noita kuuluu kutsua, joten olkoot filtteri), joka käynnistää loopin
  • author. kohdat ovat selviä, ne hakevat tiedot kirjoittajan sivun head matter tiedoista
  • author.contet kohdalla on pakko käyttää suodatinta markdownify, jotta sisältö saadaan renderöityä oikein html-muotoon (jos sisältö ilmoitetaan {{ content }} niin markdown-suodatin on oletuksena käytössä)
  • author.url tekee linkin kirjoittajan omaan arkistoon, joka tehdään seuraavaksi

Kirjoittajan sivu

Tehdään kirjoittajlle oma sivu, se mihin äsken tehtiin linkki. Siitä tehdään sivupohja, jotka tallennetaan kaikki sivupohjat sisältävään hakemistoon _layouts, joka on luotava. Tehdään myös per kirjoittaja luotava sivupohja.

mkdir ~/stage/proto/_layouts
nanko ~/stage/proto/author.html

Lisää author.html tiedostoon tämä:

---
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

Kirjoittajat suodatetaan heidän oman profiilisivunsa head matter osion lyhytnimikentän mukaan.

Julkaisun linkki kirjoittajaan

Jokaisessa postauksessa saisi olla linkki kirjoittajaan ja hänen arkistoonsa. Lisätään se artikkelien pohjaan nimeltään post.html, jonka myös tulee löytyä _layouts hakemistosta.

nano ~/stage/proto/_layouts/post.html

Lisää siihen tämä:

---
---
<h1>{{ page.title }}</h1>

<p>
  {{ page.date | date_to_string }}
  {% assign author = site.kirjoittajat | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url }}">{{ author.name }}</a>
  {% endif %}
</p>

{{ content }}

Tiimin sivu

Tarvitaan myös tiimin oma sivu, joka on yksinkertainen luetteloa siihen kuuluvista kirjoittajista. Se laitetaan hakemistoon _layouts ja annetaan tiedostolle nimi tiimi.html.

nano ~/stage/proto/_layouts/tiimi.html

Lisää tämä:

---
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

Valikot kuntoon

Sisältö on aina lisättävä valikkoon. Jekyllissä valikot sijoitetaan hakemistoon _data, joka täytyy tehdä. Navin rakentamiseen käytetään tiedostoa navigation.yml.

mkdir ~/stage/proto/_data
nano ~/stage/proto/_data/navigation.yml

Lisää tällainen:

- name: Alkuun
  link: /
- name: Tiimi
  link: /tiimi.html

Julkaisun kirjoittaja

Yksi asia puuttuu vielä. Yhdessäkään julkaisussa ei ole tekijän nimeä, joten mitään kirjoittajakohtaista arkistoa ei synny. Se täytyy asettaa ja tällä tekniikalla vaaditaan, taas muistamista jokaisessa artikkelissa miten kirjoittaja sinne tuodaan. Mutta ehkä jokainen oppii sen muistamaan oman nimensä – sen, joka jokaiselle laitettiin heidän oman bio-sivun head matter osaan merkinnällä short_name.

Jokaiseen omaan julkaisuuni joudun laittamaan head matter osioon joudun laittamaan merkinnän author: "Jakke Lehtonen".

Avaan oletusasennuksessa ainoan olevan julkaisun, että saan ylipäätään testattua toimintaa. Se löytyy _posts hakemistosta nimellä vuosi-kuukausi-päivä-welcome-to-jekyll.markdown ja muokkaan head matter osaa lisäämällä kirjoittajan:

---
title:  "Welcome to Jekyll!"
date:   2020-08-13 20:48:07 +0300
categories: jekyll update
author: "Jakke Lehtonen"
---
  • Minulta puuttuu layout: koska se asetettiin oletukseksi _config.yml tiedostoon.

Julkaisua vailla

Aivan ensimmäiseksi katsotaan toimiiko tuo kaikki. Generoidaan sisältö ja avataan se Jekyllin omaan webserveriin:

 

 

Avainsanat: ,

Jakke Lehtonen

Teen B2B-markkinoille sisällöntuottoa sekä UX-testauksia. Samaan liittyy myös koulutukset yrityksille ja webmaailman kanssa muutoin painiville. Serverien sielunelämää on joutunut ohessa opettelmaan. Toinen puoli toiminnasta on koirien ravitsemuksen ja ruokinnan suunnittelua sekä varsinkin omistajien kouluttamista hoitamaan koiriaan oikein ja vielä paremmin. Profiili: Jakke Lehtonen

Keskustele foorumilla Meta/KATISKA