¿Cómo crear una sección y una página que muestre un único tag o etiqueta?
Para comenzar a crear una sección en el navbar o barra de navegación que rediriga a una única página que contenga un único contenido (Ejemplo: una página que solo muestre los posts que pertenezcan a la etiqueta de recetas, o deportes) se debe recurrir primero a la creación del archivo de dicha sección (en teoría la nueva sección es una nueva página del sitio web) y dicha creación debe ser llevada a cabo en la raíz del proyecto con la extensión .html (Ejemplo: recetas.html, deportes.html, etc)
Dentro del archivo de sección recién creado, se debe agregar el siguiente contenido:
---
layout: default
title: Titulo de la sección que se mostrará en la pestaña del navegador
---
El valor de layout: deberá corresponder a una layout disponible en _layouts y que en teoria debe ser establecido para que dicha nueva sección cumpla con cierto diseño de página (Ejemplo: un post usa un diseño especifico para los posts, la sección de about me usa otro diseño de página distinto al de home, etc).
El valor de title: corresponde al nombre de la pestaña del navegador. Notese en este caso que en esta sección el nombre de la pestaña se llama: Aquí va el nombre de pestaña :)
El segundo paso será adicionarle la logica que mostrará el contenido en especifico, aquel contenido que se desea que esté en la página o sección independiente.
<head>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<h2>Titulo de sección (por defecto: Posts)</h2>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == "yourtag" %}
<li class="tituloPost">
<a href="{{ post.url }}">{{ post.title }}</a><br>
{{ post.date | date_to_string }}
{{ post.excerpt }}
</li>
{% endif %}
{% endfor %}
{% endfor %}
En donde lo más importante de este tema, será llevado a cabo agregando únicamente el tag o etiqueta entre parentesis en la siguiente linea:
{% if tag == "yourtag" %}
Recuerda que "yourtag1" debe corresponder a un tag o etiqueta real ubicado en _tags y que su "invocación" sea la misma del nombre de archivo.
El tercer paso será recurrir al archivo _data/navbar.yml y determinarle los siguientes valores que establecerán tanto el nombre de la sección a mostrar en el navbar o barra de navegación, como el link al cual debe redirigirse (Ejemplo: Una sección llamada Deportes deberá redirigir a su respectiva página recién creada en la raíz del proyecto, en este caso: deportes.html)
Por lo tanto los valores anteriormente mencionados deben ser agregados de la siguiente manera:
- name: Nombre de la sección
- link: /paginareciencreadacorrespondientealaseccion
El valor name: deberá correponder al nombre que se le quiera dar a la sección, dicho nombre es el que será mostrado en la barra de navegación (Ejemplo: Deportes, Cocina, Sobre mi)
El valor link: deberá principalmente iniciar con un slash (/) e ir seguido del archivo recién creado en la raíz del proyecto (Ejemplo: /deportes.html, /recetas.html, /sobremi.html, etc)
Nota: Los estilos globales se encuentran en _sass/main.scss (No tenían nada que ver aquí pero no sabía en donde mencionarlos :) )
Preview: