💥 feat!: add tag filtering for projects (#431)

- Card (project) images no longer require manual top/bottom margin
adjustments for proper spacing. Action needed: Review existing card
images as previous manual margin adjustments may now be
unnecessary/excessive.
- Sites using `cards.html` with tags will now load JavaScript by
default when tags are present. To maintain no-JS behaviour, explicitly
set `enable_cards_tag_filtering = false` in either `config.toml` or the
`_index.md` file where `cards.html` is used.
This commit is contained in:
welpo 2024-11-17 00:38:32 +01:00
parent f93def0692
commit a7833299ff
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
46 changed files with 421 additions and 40 deletions

View file

@ -1,7 +1,7 @@
+++
title = "Domina la configuración de tabi: guía completa"
date = 2023-09-18
updated = 2024-11-14
updated = 2024-11-16
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
[taxonomies]
@ -391,6 +391,33 @@ Cuando un usuario haga clic en la imagen o el título de un proyecto, será llev
La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, `template = "info-page.html"`.
#### Filtrar proyectos
Si agregas etiquetas a tus proyectos, verás un filtro de etiquetas:
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Página de proyectos con filtro de etiquetas", full_width=true) }}
El sistema de filtrado de etiquetas utiliza mejora progresiva:
- Sin JavaScript: Las etiquetas enlazan directamente a páginas de etiquetas dedicadas (por ejemplo, `/tags/nombre-etiqueta`).
- Con JavaScript: Filtrado instantáneo, sincronización de URL (#nombre-etiqueta) y navegación por teclado.
Para desactivar esta función, establece `enable_cards_tag_filtering = false` en la sección `[extra]` del archivo `projects/_index.md` o en `config.toml`.
{% admonition(type="tip") %}
Para filtrar proyectos por etiquetas, necesitas establecer etiquetas en el front matter de cada proyecto. Por ejemplo:
```toml
title = "nombre del proyecto"
weight = 40
[taxonomies]
tags = ["etiqueta uno", "etiqueta 2", "tercera etiqueta"]
```
{% end %}
### Archivo
Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente encabezado: