diff options
author | Santiago Soler <santiago.r.soler@gmail.com> | 2021-03-27 13:39:38 -0300 |
---|---|---|
committer | Santiago Soler <santiago.r.soler@gmail.com> | 2021-03-27 13:39:38 -0300 |
commit | 129b9de6fef7b6824c3c7b1dd4c88f62aed0db56 (patch) | |
tree | ec52f40e37a0227d8fe40c7a7b43a8f31e88b696 | |
parent | f2dd3987a4ced1c6a1a5f8800b1323a9dd35c09e (diff) | |
download | website-template-129b9de6fef7b6824c3c7b1dd4c88f62aed0db56.tar.gz |
Enable categories in blog
Define a variable for splitting the blog posts in categories on the home
page.
-rw-r--r-- | _config.yml | 3 | ||||
-rw-r--r-- | _layouts/home.html | 20 | ||||
-rw-r--r-- | _posts/2021-03-22-mi-entrada-del-blog.md | 1 | ||||
-rw-r--r-- | _posts/2021-03-27-otra-entrada.md | 17 | ||||
-rw-r--r-- | css/style.css | 29 |
5 files changed, 61 insertions, 9 deletions
diff --git a/_config.yml b/_config.yml index df12cef..691d429 100644 --- a/_config.yml +++ b/_config.yml @@ -11,3 +11,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: true 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-22-mi-entrada-del-blog.md b/_posts/2021-03-22-mi-entrada-del-blog.md index 313019c..dffa6a1 100644 --- a/_posts/2021-03-22-mi-entrada-del-blog.md +++ b/_posts/2021-03-22-mi-entrada-del-blog.md @@ -1,6 +1,7 @@ --- title: Mi primera entrada del blog layout: post +category: Blog personal excerpt: | Este es un resumen de mi entrada del blog --- diff --git a/_posts/2021-03-27-otra-entrada.md b/_posts/2021-03-27-otra-entrada.md new file mode 100644 index 0000000..da31f84 --- /dev/null +++ b/_posts/2021-03-27-otra-entrada.md @@ -0,0 +1,17 @@ +--- +title: Un tutorial +layout: post +category: Tutoriales +excerpt: | + Este es un tutorial +--- + +Acá podemos escribir el contenido de mi entrada del blog utilizando +[Markdown](https://es.wikipedia.org/wiki/Markdown) + +Recordá colocar `layout: post` en el header de cada entrada del blog +y colocar la fecha de publicación en su nombre, por ejemplo: + +``` +2021-03-22-un-nombre-sencillo.md +``` 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; } |