— title: Una guía sobre Jekyll - configurando los post author: Jorge Aznar layout: post permalink: /una-guia-sobre-jekyll-configuracion-post/ comments: true tags:

En este post vamos a ver el código que necesitamos para configurar los layouts de default y post que vimos en la segunda parte de la guía.

Para ello voy a utilizar el código HTML que viene por defecto con la instalación de Jekyll.

Default

Bueno lo primero vamos con el layout de default.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include header.html %}

    <div class="page-content">
      <div >
        {{ content }}
      </div>
    </div>

    {% include footer.html %}

  </body>

</html>

Lo más importante es la variable {{ content }} con esta variable vamos a incluir todo el contenido que tenemos alojado en los post.

Los includes de header.html head.html footer.html como vimos anteriormente los utilizamos para incluir porciones de código que se van a ir repitiendo constantemente a lo largo de nuestro tema.

post

Ahora vamos a ver todo lo que incluye nuestro layout post. Hay que tener en cuenta que este layout implementa a través del front matter el layout default. Así que todo lo que viene en el layout default es utilizado por el layout post. A continuación el front matter de post.

1
2
3

---
layout:default
---

A continuación el layout de post que viene por defecto con Jekyll.

1
2
3
4
5
6
7
8
9
10
11

<div class="post">

  <header class="post-header">
    <h1 class="post-title">{{ page.title }}</h1>
    <p class="post-meta">{{  page.date | date: }} {% if page.author %} • {{ page.author }} {% endif %} {% if page.meta %} • {{ page.meta }}{% endif %}</p>
  </header>

  <article class="post-content">
     {{ content }}
  </article>
</div>

Con {{ page.title }} obtenemos el nombre que tenga la página, esto se lo daremos en el front matter.

Fecha y autor

Lo siguiente es la manera de obtener la fecha y autor. A mi este método que trae por defecto Jekyll no me gusta así que os voy a mostrar el que utilizo en el blog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

        Por {{ page.author }} el
          {{  page.date | date: '%-d' }} de
            {% assign m = page.date | date: '%-m' %}
            {% case m %}
              {% when '1' %}enero
                {% when '2' %}febrero
                {% when '3' %}marzo
                {% when '4' %}abril
                {% when '5' %}mayo
                {% when '6' %}junio
                {% when '7' %}julio
                {% when '8' %}agosto
                {% when '9' %}septiembre
                {% when '10' %}octubre
                {% when '11' %}noviembre
                {% when '12' %}diciembre
            {% endcase %}
            de
            {{  page.date | date: '%Y' }}

Lo primero que vemos es {{ page.author }} con ella vamos a obtener el nombre del autor.

Con la variable {{ page.date | date: '%-d' }} vamos a obtener el día en el que se publicó el artículo.

Con la variable {% assign m = page.date | date: '%-m' %} vamos a obtener el mes en el que se publicó el artículo. Por defecto Jekyll viene con los meses en inglés así que vamos a utilizar un case para cambiar el nombre de los meses.

Abrimos el case y le añadimos el valor m que es el que representa a los meses.

1

{% case m %}

Lo siguiente es utilizar when y la posición del mes. Así el valor 1 corresponde a enero.

1

{% when '1' %}enero

Así que con este trozo de código le decimos que en caso de que sea m sustituya los valores por los nombres en castellano de los meses. Recordad que los nombres de los meses van en minúscula.

Por último con la variable {{ page.date | date: '%Y' }} vamos a obtener el año en el que se publicó el artículo.

Así que todo este código al final da como resultado lo siguiente

1
2
3
4
5
6
7

Por  el
          16 de
            
            octubre
                
            de
            2014

Artículo anterior y posterior

Ahora vamos a añadir un par de botones para facilitar la navegación entre artículos.

Con el siguiente código le vamos a decir con un if que nos añada un enlace y que la url sea la siguiente al artículo donde estamos. El orden será por fecha.

{% if page.next %}
  <a href="{{  site.baseurl }}{{  page.next.url }}">Artículo posterior</a>
{% endif %}

Para obtener el artículo anterior lo haremos con el siguiente código que en este caso obtendrá la url del artículo anterior.

{% if page.previous %}
  <a href="{{  site.baseurl }}{{  page.previous.url }}">Artículo anterior</a>
{% endif %}

Ahora solo hace aplicarle unos estilos a través de CSS y ya tenemos un par de botones que irán de artículo en artículo.

Comentarios

Y ya para acabar con el layout de post vamos a incluir los comentarios. Como ya dije anteriormente yo utilizó los comentarios de Disqus.

No tiene mayor complicación que añadir un if con page.comments y dentro de el incluir el código que nos proporciona Disqus.

Y todo esto da como resultado está página que ahora mismo estáis leyendo.