Desarrollo de Aplicaciones

Jekyll un generador de web estática

Jekyll es un generador de sitios web basado en Ruby muy personalizable y con posibilidad de reutilizar plantillas y diseños creados para darle tu toque personal en la web

Jekyl html
Victor Auyanet
Victor Auyanet

Enero 24, 2020

¿Para qué sirve?

Puedes escribir el texto de cada página de la web en el tu lenguaje de marcado preferido y utilizar diseños ya establecidos o propiamente creados para darle tu toque personal en la web. Puede ajustase como quieras que se vean las URL, qué datos se muestran en cada apartado del sitio web, etc...

Jekyll HTML

La ventaja sobre otros generadores es que aquí se pueden reutilizar las plantillas haciendo que no tengamos que crear por ejemplo el footer cada vez , de una manera sencilla e individualizar esto para cada tipo.

Como punto a destacar, puedes configurar que las páginas creadas en una carpeta en específico, automáticamente cree la ruta para acceder al post, donde ya se podrá ver el contenido introducido con el estilo definido para cada tipo de post.

La mayoría de configuraciones para toda la web están en el fichero " _config.yml " , donde de base deberíamos tener similar a esto :


# 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 este archivo también podemos definir variables generales que podremos acceder a ellas desde la variable "site".

Si por ejemplo hacemos nuestros posts con plantillas html podríamos acceder así:

{{ site.nomVariable }}

Para definir un tipo de post basta crear una plantilla en la carpeta " _layouts " (que tendremos que crear si no existe) . Esta sería un ejemplo:

<!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>

Donde los atributos que salen de la variable "page" son los que se definirán en la plantilla de cada uno de los posts, la variable "contento" es el que mostrará el contenido de cada uno de nuestros posts, como además podemos incluir otros plantillas que estén en la carpeta "_includes" .

Después arriba del todo en las plantillas de los posts o páginas básicas asignamos un layout de los que hayamos definido .

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

Para no tener que definir la plantilla para cada post se puede definir una regla genérico a en el fichero " _ config .yml ".

#Defaults

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

Como punto a destacar también puedes hacer que Jekyll leen e y xi un archivo JSON y mostrar el contenido de este como información de un post o página de una manera muy sencilla.

Teniendo un JSON como este 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"
    }
  ]
}

En la plantilla se puede acceder a esta información de una manera muy 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 %}

 

Comparte este artículo

Artículos Relacionados