Enable categories and update the template tutorial

4 files changed, 91 insertions, 13 deletions

diff --git a/_config.yml b/_config.yml
index a8bdc1c..99648c3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,3 +8,6 @@ show-excerpt: true
 
 # Exclude the following files from being part of the website
 exclude: [Makefile, README.md]
+
+# Split the blog posts in categories
+show_categories: false
diff --git a/_layouts/home.html b/_layouts/home.html
index 654be00..26d255c 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -15,6 +15,25 @@ layout: base
 
   <h1>Blog</h1>
 
+  {% if site.show_categories %}
+  <ul class="categories-list">
+    {% for category in site.categories %}
+        {% capture category_name %}{{ category | first }}{% endcapture %}
+      <li>
+        <h2 class="category">{{ category_name }}</h2>
+        <ul class="posts-list">
+        {% for post in site.categories[category_name] %}
+            <li>
+              <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
+              <p><em>{{ post.date | date: "%Y-%m-%d"}}</em></p>
+              {% if site.show-excerpt %}<p>{{ post.excerpt }}</p>{% endif %}
+            <li>
+        {% endfor %}
+        </ul>
+        </li>
+    {% endfor %}
+  </ul>
+  {% else %}
   <ul class="posts-list">
     {% for post in site.posts %}
     <li>
@@ -24,6 +43,7 @@ layout: base
     </li>
     {% endfor %}
   </ul>
+  {% endif %}
 
   {{ content }}
 </main>
diff --git a/_posts/2021-03-23-website-template-texto-plano.md b/_posts/2021-03-23-website-template-texto-plano.md
index 9b41e99..ff6d148 100644
--- a/_posts/2021-03-23-website-template-texto-plano.md
+++ b/_posts/2021-03-23-website-template-texto-plano.md
@@ -53,7 +53,8 @@ cd mi-sitio-web
 Dentro de esta carpeta encontramos el código fuente para construir nuestro
 sitio web.
 
-### Configurando el sitio
+
+## Configurando el sitio
 
 Primero vamos a editar r el archivo `_config.yml`.
 Vamos a configurar el título del sitio y el nickname del autor:
@@ -75,6 +76,7 @@ Luego podemos editar el `index.md` para agregar contenido al home de nuestro
 sitio. Por ejemplo, podemos escribir algo acerca de nosotros y listar nuestros
 perfiles en la red.
 
+
 ### Añadiendo contenido
 
 Podemos añadir contenido a nuestro sitio web a través de archivos Markdown. Por
@@ -116,7 +118,48 @@ Markdown). Por ejemplo:
     echo "Aguante texto-plano"
     ```
 
-### Construir el sitio
+
+### Clasificar los posts en categorias
+
+Este template nos permite clasificar nuestras entradas de blogs en categorías
+o secciones. Por ejemplo, supongamos que vamos a mantener dos categorías: `Blog
+personal` y `Tutoriales`. A la hora de escribir una nueva entrada del blog,
+vamos a especificar la categoría a la cual este pertenece a través del
+parámetro `categories`. Por ejemplo, creamos un post para nuestro `Blog
+personal`:
+
+    ---
+    title: Mi primer posteo
+    layout: post
+    categories: Blog personal
+    excerpt: |
+        Este es un resumen de mi posteo
+    ---
+
+
+Y otro para la sección `Tutoriales`:
+
+    ---
+    title: ¿Cómo usar Jekyll?
+    layout: post
+    categories: Tutoriales
+    excerpt: |
+        Este es mi tutorial
+    ---
+
+No nos olvidemos de editar nuestro `_config.yml`, activando las categorías en
+el home:
+
+```
+# Split the blog posts in categories
+show_categories: true
+```
+
+Cuando construyamos el sitio, nuestro home mostrará todos los posts del blog,
+pero divididos en sus correspondientes categorías.
+
+
+## Construir el sitio
 
 Una vez que generamos contenido nuevo, vamos a proceder a construir el sitio
 web. Esto lo debemos hacer a través de Jekyll.
@@ -135,7 +178,7 @@ bundle exec jekyll build
 Estos comandos generarán una carpeta `_site` que contiene todos los archivos
 necesarios para servir nuestro sitio web.
 
-### Servir el sitio localmente
+## Servir el sitio localmente
 
 Si estás modificando tu sitio desde tu computadora, podés ver una cómo va
 quedando sirviéndolo localmente con:
@@ -146,7 +189,8 @@ bundle exec jekyll serve
 
 Jekyll te dará una url a través de la cual vas a poder visualizar tu sitio web.
 
-### Servir el sitio en texto-plano
+
+## Servir el sitio en texto-plano
 
 Lo único que queda es publicar el sitio web para que todes puedan acceder a él.
 Para ello debemos copiar todos los archivos de la carpeta `_site` en
diff --git a/css/style.css b/css/style.css
index 1498a9c..9a3f695 100644
--- a/css/style.css
+++ b/css/style.css
@@ -54,7 +54,7 @@ h3 {
 p {
   font-size: 0.95em;
   line-height: 1.5em;
-  margin-top: 12px;
+  margin-top: 0px;
   margin-bottom: 12px;
 }
 
@@ -165,26 +165,37 @@ header h2 {
 /* Home */
 /* ---- */
 
-ul.posts-list {
+.blog h2,
+.blog h3 {
+}
+
+ul.posts-list,
+ul.categories-list {
   list-style: none;
   padding-left: 0px;
 }
 
-ul.posts-list h2 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+ul.posts-list h2,
+ul.posts-list h3,
+ul.posts-list p {
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 ul.posts-list li {
-  margin-top: 40px;
+  margin-top: 0px;
   margin-bottom: 40px;
 }
 
-ul.posts-list p {
-  margin-top: 10px;
-  margin-bottom: 10px;
+ul.categories-list li {
+  margin-top: 0px;
+  margin-bottom: 60px;
 }
 
+/* ----- */
+/* Posts */
+/* ----- */
+
 .date {
   text-align: right;
 }