diff options
-rw-r--r-- | _config.yml | 3 | ||||
-rw-r--r-- | _layouts/home.html | 20 | ||||
-rw-r--r-- | _posts/2021-03-23-website-template-texto-plano.md | 52 | ||||
-rw-r--r-- | css/style.css | 29 |
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; } |