Desenvolupament d'Aplicacions

Jekyll un generador de web estàtic

Jekyll és un generador de lloc estàtic basat en Ruby

Jekyll HTML
Victor Auyanet
Victor Auyanet

gener 24, 2020

Per a què serveix?

Pots escriure el text de cada plana del web en el teu llenguatge de marcat preferit i utilitzar dissenys ja establerts o pròpiament creats per donar-li el teu toc personal al web. Podeu ajustar com voleu que es vegin les URL, quines dades es mostren en cada apartat del lloc web, etc. 

Jekyll HTML

L'avantatge sobre altres generadors de web estàtics es que aquí es poden reutilitzar les plantilles fent que no s’hagi de crear per exemple el footer cada cop, d’una manera senzilla i individualitzada per a cada tipus de lloc web. 

Com a punt a destacar, pots configurar que les planes creades en una carpeta en específic, automàticament creï la ruta per accedir al post, on ja es podrà veure el contingut introduït amb el estil definit per a cada tipus de post.

La majoria de configuracions per a tot el web estan en el fitxer “_config.yml”, on de base hauríem de tenir un codi similar a això:


# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.

title: My awesome title
email: example@example.com
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: example
github_username:  example

# Build settings
theme: minima
plugins:
  - jekyll-feed

defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      title: "A default title

En aquest fitxer també podem definir variables generals que podrem accedir a elles des de la variable “site”.

Si per exemple fem els nostres posts amb plantilles html podríem accedir així:

{{ site.nomVariable }}

Per a definir un tipus de post només cal crear una plantilla en la carpeta “_layouts” (que haurem de crear si no existeix). Aquesta seria un exemple:

<!DOCTYPE HTML>

<html>
{% include head.html %}

<body>
    {% include header.html %}

    <!-- Main -->
    <article id="main">
        <header>
            <h2>{{ page.title }}</h2>
            <p>{{ page.description }}</p>
        </header>
        <section class="wrapper style5">
            <div class="inner">
                {{ content }}
            </div>
        </section>
    </article>

    {% include footer.html %}

</body>

</html>

On els atributs que surten de la variable “page” són els que es definiran en la plantilla de cada un dels posts, la variable “content” es el que mostrarà el contingut de cadascun dels nostres posts, com a més a més podem incloure altres plantilles que estiguin en la carpeta “_includes”.

Després a dalt de tot en les plantilles dels posts o pagines bàsiques assignem un layout dels que haguem definit.
 

---
layout: post
title: Tortor dolore feugiat elementum magna
description: Aliquam ut ex ut augue consectetur interdum.
image: pic02.jpg
---

Per no haver de definir la plantilla per a cada post es pot definir una regla genèrica en el fitxer “_config.yml”.

#Defaults

defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      title: "A default post title"

Com a punt a destacar també pots fer que Jekyll llegeixi un arxiu JSON i mostrar el contingut d’aquest com a informació d’un post o pàgina d’una manera molt senzilla.

Tenint un JSON com aquest en la carpeta “_data”:
 

 {
  "articles": [
    {
      "title": "Title 1",
      "description": "Desc 1",
      "featuredImage": "https://via.placeholder.com/225x300?text=1",
      "body_image": "https://via.placeholder.com/225x300?text=1",
      "inside_text": "Lorem ipsum dolor sit amet, consectetur."
    },
    {
      "title": "Title 2",
      "description": "Desc 2",
      "featuredImage": "https://via.placeholder.com/225x300?text=2",
      "body_image": "https://via.placeholder.com/225x300?text=2",
      "inside_text": "Ad assumenda blanditiis culpa, debitis deleniti"
    }
  ]
}

A la plantilla es pot accedir a aquesta informació d’una manera molt fàcil:

{% for art in site.data.drupal.articles %}
<div class="json-object">
    <div class="featured-image">
        <img src="{{ art.featuredImage }}" alt="{{ art.title }}">
    </div>
    <h3>{{ art.title }}</h3>
    <p>{{ art.description }}</p>
</div>
{% endfor %}

 

Comparteix aquest article

Articles Relacionats