nick
/
tabi-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📝 docs: add guide to all of tabi's features (#169)

Browse Source
main
Óscar Fernández Vázquez 1 year ago committed by GitHub
parent 88cc68f4a0
commit 99b8972cf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 1931 additions and 78 deletions
Show Stats Download Patch File Download Diff File

21
README.md
Unescape Escape View File

@ -19,19 +19,28 @@ tabi has a perfect score on Google's Lighthouse audit:
- [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
- [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
- [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
- [X] [KaTeX](https://katex.org/) support.
- [X] [Integration with remote repositories](https://welpo.github.io/tabi/mastering-tabi-settings/#git-repository-integration) on GitHub, GitLab, Gitea & Codeberg for commit history and showing the site source.
- [X] [Social media cards](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards).
- [X] [KaTeX](https://katex.org/) support for mathematical notation.
- [X] All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/).
- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
- [X] [Stylized feed](https://welpo.github.io/tabi/atom.xml).
- [X] [Quick navigation buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons).
- [X] [Footnote backlinks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footnote-backlinks).
- [X] [Copy button for code blocks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks).
- [X] [Custom canonical URLs](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url).
- [X] [Projects page](https://welpo.github.io/tabi/projects/).
- [X] [Archive page](https://welpo.github.io/tabi/archive/).
- [x] [Table of Contents](https://welpo.github.io/tabi/blog/toc/).
- [x] Tags.
- [x] Social links.
- [X] [Customizable Table of Contents](https://welpo.github.io/tabi/blog/toc/).
- [X] [Mail encoding](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email) for spam protection.
- [X] [Tags](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags).
- [X] [Social links](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons).
- [X] [Custom copyright notice](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright).
- [X] Responsive design.
- [X] Code syntax highlighting.
- [X] Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
- [X] [Customizable secure headers](https://welpo.github.io/tabi/blog/security/).
- [X] [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/).
- [X] Thorough documentation. See [Mastering tabi Settings: A Comprehensive Guide](https://welpo.github.io/tabi/blog/mastering-tabi-settings/)
## Quick start
@ -43,7 +52,7 @@ cd tabi
zola serve
```
Open http://127.0.0.1:1111/ in the browser.
Open http://127.0.0.1:1111 in the browser.
## Installation

24
config.toml
Unescape Escape View File

@ -15,9 +15,12 @@ default_language = "en"
taxonomies = [{name = "tags", feed = true}]
[markdown]
external_links_target_blank = true
highlight_code = true
highlight_theme = "css"
smart_punctuation = true
[link_checker]
internal_level = "warn"
[languages.es]
title = "~/tabi"
@ -36,6 +39,9 @@ minify_html = true
taxonomies = [{name = "tags", feed = true}]
[extra]
# Check out the documentation (or the comments below) to learn how to customise tabi:
# https://welpo.github.io/tabi/blog/mastering-tabi-settings/
# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
# Also enables automatic switching based on user's OS-level theme settings.
# If disabled, your site will only use the theme specified in the `default_theme` variable.
@ -84,34 +90,34 @@ remote_repository_git_platform = "auto" # Defaults to "auto".
# Branch in the repo hosting the Zola site.
remote_repository_branch = "main" # Defaults to "main".
# Show a link to the commit history of updated posts, right next to the last updated date.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
show_remote_changes = true # Defaults to true.
# Show a link to the repository of the site, right next to the "Powered by Zola & tabi" text.
show_remote_source = true # Defaults to true.
# Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
copy_button = true
# Show the reading time of a page.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
show_reading_time = true
# Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
footnote_backlinks = false
# Enable KaTeX for all posts.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
katex = false
# Quick navigation buttons.
# Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
quick_navigation_buttons = false
# Add a Table of Contents to posts, right below the title and metadata.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
toc = false
# Date format used when listing posts (main page, /blog section, tag posts list…)
@ -137,7 +143,7 @@ favicon = "img/seedling.png"
favicon_emoji = "🌱"
# Path to the fallback image for social media cards (the preview image shown when sharing a link on WhatsApp, LinkedIn…).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
# Learn how to create these images in batch and automatically:
# https://osc.garden/blog/automating-social-media-cards-zola/
social_media_card = "img/social_cards/index.jpg"

604
content/blog/mastering-tabi-settings.ca.md
Unescape Escape View File

@ -0,0 +1,604 @@
+++
title = "Domina la configuració de tabi: guia completa"
date = 2023-09-18
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
[taxonomies]
tags = ["funcionalitat", "tutorial", "preguntes freqüents"]
[extra]
giscus = true
footnote_backlinks = true
quick_navigation_buttons = true
+++
Aquesta és la guia completa sobre la configuració a tabi. Si tens alguna pregunta, pots utilitzar els [comentaris](#comments) al final d'aquesta pàgina o [obrir un issue a GitHub](https://github.com/welpo/tabi/issues/new).
<details>
<summary><b>Taula de continguts</b></summary>
<!-- toc -->
</details>
## Jerarquia de configuració
tabi té una jerarquia que permet personalitzar el teu lloc a diferents nivells. La jerarquia (de menor a major prioritat) és la següent:
1. **Configuracions globals**: Aquestes són les configuracions que s'apliquen a tot el teu lloc. Es configuren a `config.toml`.
2. **Configuracions de secció**: Aquestes són les configuracions que s'apliquen a una secció del teu lloc (per exemple, `/blog` o `/projects`). Es configuren a la metainformació de l'arxiu `_index.md` de la secció.
3. **Configuracions de pàgina**: Aquestes són les configuracions que s'apliquen a una sola pàgina. Es configuren a la metainformació de la pàgina.
En tots els casos, les opcions de tabi es configuren a la secció `[extra]`.
Per a les configuracions que segueixen aquesta jerarquia, el valor establert a una pàgina reemplaça el valor d'una secció, que al seu torn reemplaça el valor global. En resum: com més específica sigui la configuració, més prioritat tindrà, o `pàgina > secció > config.toml`.
---
## Suport multilingüe
tabi ofereix suport multilingüe complet per al teu lloc Zola, des de configurar un idioma predeterminat fins a afegir tots els que vulguis. Consulta les [preguntes freqüents sobre idiomes](/ca/blog/faq-languages/) per a més informació.
---
## Aparença
### Pàgina principal
La [pàgina principal](/) d'aquesta demo té una capçalera amb una imatge, un títol i una descripció:
{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Capçalera de la pàgina principal") }}
Per configurar la imatge i el títol, pots utilitzar la variable `header` al front matter de l'arxiu `_index.md` de la secció. Per exemple:
```toml
[extra]
header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" }
```
La descripció és contingut Markdown normal, escrit fora del front matter.
Si vols mostrar publicacions a la pàgina principal, primer necessites decidir si la seva ruta serà `/` o quelcom diferent, com ara `/blog/`.
Si vols servir les publicacions des de `/`, necessites configurar `paginate_by = 5` al front matter del teu arxiu `_index.md`. **Nota**: això no es configura a l'apartat `[extra]`, sinó al front matter principal. Exemple:
```toml
sort_by = "date"
template = "section.html"
paginate_by = 5
[extra]
header = {title = "Hola! Sóc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" }
```
Si prefereixes servir les publicacions des de `/blog`, pots configurar `section_path = "/blog"` a la secció `[extra]`. Aquesta és la configuració d'aquesta demo:
```toml
title = "Publicacions recents"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hola! Sóc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" }
section_path = "blog/_index.es.md"
max_posts = 4
```
Fixa't que si configures `section_path`, no cal que configuris `paginate_by`. Pots establir `max_posts` per determinar el nombre de publicacions que vols mostrar a la pàgina principal.
El `title` és el títol que apareix a sobre de les publicacions.
### Commutador de mode clar i fosc
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
El commutador de mode clar i fosc (la icona de lluna/sol a la cantonada superior dreta) es pot habilitar configurant `theme_switcher = true` a `config.toml`.
### Mode predeterminat (clar/fosc)
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El mode predeterminat es pot especificar amb la variable `default_theme`, que accepta `"dark"` o `"light"`. Per defecte és `"light"`.
**Nota**: el mode predeterminat només s'usa quan el commutador de mode està desactivat, ja sigui perquè s'ha configurat com a `false` a `config.toml` o perquè un usuari ha deshabilitat JavaScript.
### Skin personalitzada
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Les skins («pells») de tabi canvien el color principal del lloc web. Pots configurar la skin a `config.toml` amb `skin = "nom_de_la_skin`. Per exemple, `skin = "lavender"` es veu així (clica per canviar entre mode clar i fosc):
{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="pell lavender en mode clar", toggled_alt="pell lavender en mode fosc", full_width=true) }}
Explora les skins disponibles i aprèn com crear la teva pròpia consultant [la documentació](/ca/blog/customise-tabi/#skins).
### Estils CSS personalitzats
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ❌ |
Pots carregar estils CSS personalitzats per a tot el lloc web o en pàgines específiques utilitzant `stylesheets`, que accepta una llista de rutes cap a arxius CSS. Per exemple:
```toml
stylesheets = ["css/custom.css", "css/another.css"]
```
### Color del tema del navegador
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El color del tema del navegador és el color que apareix a la barra de pestanyes del navegador:
{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="pestanyes amb un tema de navegador de color") }}
Pots establir-ho a `config.toml` com a `browser_theme_colour = "#087e96"`. Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb `browser_theme_colour = ["#ffffff", "#000000"]`. El primer color és per al mode clar, el segon per al fosc.
Aquesta variable accepta qualsevol color CSS vàlid, així que pots utilitzar paraules clau (per exemple, `blue`), codis hexadecimals (per exemple, `#087e96`) o valors RGB/HSL (per exemple, `rgb(8, 126, 150)`).
---
## Integració amb repositoris Git
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
| ❓ | ❓ | ✅ | ❓ | ❌ |
❓: `show_remote_source` sí que segueix [la jerarquia](#jerarquia-de-configuracio) i es pot configurar en una pàgina, secció o de manera global. La resta de les configuracions només es poden establir a `config.toml`.
Aquestes configuracions et permeten vincular el teu lloc web tabi amb un repositori públic de Git a GitHub, GitLab, Gitea o Codeberg. Exemples de configuració:
```toml
remote_repository_url = "https://github.com/welpo/tabi"
remote_repository_git_platform = "auto"
remote_repository_branch = "main"
show_remote_changes = true
show_remote_source = true
```
Això habilita dues funcions:
1. `show_remote_source = true` afegeix un enllaç al codi font del teu lloc web (el teu `remote_repository_url`) que es mostrarà al peu de pàgina:
{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'") }}
2. `show_remote_changes = true` afegeix un enllaç "Veure canvis ↗" a l'historial de commits de l'article actualitzat, al costat de la data de l'última actualització [^1]:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'") }}
En clicar aquest enllaç, seràs dirigit a l'historial de commits de l'article, on podràs veure els canvis realitzats en ell:
{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Historial de commits d'un article", full_width=true) }}
---
## Pàgines
### Projectes
tabi té una plantilla integrada per a projectes. Per habilitar-la, pots crear un directori a `content/projects/`. Allà, pots crear un fitxer `_index.md` amb el següent contingut al bloc de metadades:
```toml
title = "Projectes"
sort_by = "weight"
template = "cards.html"
insert_anchor_links = "left"
[extra]
show_reading_time = false
quick_navigation_buttons = true
```
- `title` és el títol de la pàgina.
- `sort_by` determina com s'ordenen els projectes. Pots ordenar per "date", "update_date", "title", "title_bytes", "weight", "slug" o "none".
- `template = "cards.html"` estableix la plantilla per renderitzar la pàgina de projectes.
- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments.
- `show_reading_time = false` amaga el temps estimat de lectura.
- `quick_navigation_buttons = true` mostra els botons de navegació ràpida.
Al costat del fitxer `_index.md`, pots crear un fitxer per a cada projecte. Per exemple, aquest és el bloc de metadades per a la pàgina del projecte [tabi](/ca/projects/tabi/):
```toml
title = "tabi"
description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe."
weight = 1
[extra]
local_image = "img/tabi.webp"
```
- `title` és el títol del projecte.
- `description` és la descripció del projecte.
- `weight` determina l'ordre en què es mostren els projectes. Com menor sigui el pes, més amunt apareixerà el projecte.
- `local_image` és la ruta de la imatge del projecte. Aquesta imatge es mostra a la pàgina de projectes.
Quan un usuari faci clic a la imatge o al títol d'un projecte, serà portat a la pàgina del projecte. Si prefereixes que els usuaris vagin a un enllaç extern, pots establir `link_to = "https://example.com"` a la secció `[extra]` del fitxer `.md` del projecte.
La pàgina del projecte individual es renderitza amb la plantilla predeterminada, tret que estableixis una altra, per exemple, `template = "info-page.html"`.
### 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 bloque de metadatos:
```toml
title = "Archivo"
template = "archive.html"
```
De forma predeterminada, el archivo listará las publicaciones ubicadas en `/blog/`. Si deseas cambiar esto, puedes establecer `section_path = "/otra-ruta/"` en la sección `[extra]` del archivo `_index.md`. Asegúrate de incluir la barra inclinada al final.
### Etiquetes
tabi té suport integrat per a etiquetes. Per habilitar-les, simplement afegeix la taxonomia al teu `config.toml`:
```toml
taxonomies = [{name = "tags", feed = true}]
```
Després, pots afegir etiquetes a les teves publicacions afegint-les a l'array `tags` en el bloc de metadades de la teva publicació. Per exemple:
```toml,hl_lines=05-06
title = "Els molins de vent de la meva vida: reflexions d'un escuder"
date = 1605-01-16
description = "El meu viatge al costat de Don Quixot, enfrontant-me a gegants imaginats i descobrint les veritables batalles de la vida."
[taxonomies]
tags = ["personal", "reflexions"]
```
### Pàgina sobre
Si vols tenir una pàgina que no sigui un article, per exemple per a una secció "Sobre", "Contacte" o "Drets d'autor", pots utilitzar la plantilla `info-page.html`.
Primer, crea un directori dins de `content/` amb el nom que prefereixis. Per exemple, `content/pages/`. Després, crea un fitxer `_index.md` dins d'aquest directori. El fitxer hauria de ser així:
```markdown
+++
render = false
insert_anchor_links = "left"
+++
```
- `render = false` indica a Zola que no renderitzi la secció.
- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments. Això és opcional.
Dins del directori, pots crear qualsevol quantitat de fitxers `.md`.
En aquesta demo, la pàgina [Sobre mi](/ca/about/) utilitza la plantilla `info-page.html`. El bloc de metadades és el següent:
```toml
title = "Sobre mi"
template = "info-page.html"
path = "about"
```
Fixa't com s'estableix `path = "about"`. Zola situarà la pàgina a `$base_url/about/`. Si vols que la pàgina estigui disponible a `/contacte/`, hauries d'establir `path = "contacte"`.
---
## SEO
tabi s'encarrega de la majoria de tasques de SEO per a tu (com ara les etiquetes del protocol Open Graph, descripció, paleta de colors...), però hi ha certes configuracions que pots personalitzar.
### Favicon
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El favicon és la petita imatge que es mostra a la pestanya del navegador. Pots establir-la a `config.toml` amb `favicon = "img/favicon.png"`.
### Favicon d'emoji
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
També pots establir un emoji com a favicon amb `favicon_emoji`. Per exemple, `favicon_emoji = "👾"`.
Nota: Alguns navegadors no suporten favicons d'emoji. Consulta la taula de compatibilitat a [caniuse](https://caniuse.com/link-icon-svg).
### URL canònica
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
| ✅ | ✅ | ✅ | ❌ | ❌ |
L'URL canònica és una manera d'indicar als motors de cerca quina és l'URL preferida per al contingut del teu lloc web. Això és útil per al SEO i per evitar problemes de contingut duplicat.
Per defecte, l'URL canònica és l'URL de la pàgina on et trobes. No obstant això, pots canviar això configurant `canonical_url` al front matter de la teva pàgina o secció.
Si tens un lloc amb una estructura idèntica i contingut coincident, pots configurar `base_canonical_url` al teu `config.toml`. L'URL canònica es crearà substituint el `$base_url` de l'URL actual amb el `$base_canonical_url` que establisquis.
Per exemple, si configures `base_canonical_url = "https://example.com"`, l'URL canònica de la pàgina `$base_url/blog/post1` serà `https://example.com/blog/post1`. Això és útil si tens un lloc amb diversos dominis que comparteixen el mateix contingut.
**Nota**: per assegurar-te que l'URL canònica sigui correcta, probablement serà millor configurar `canonical_url` individualment per a cada pàgina.
### Targetes per a xarxes socials
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Les targetes per a xarxes socials són les imatges que es mostren quan comparteixes un enllaç a les xarxes socials:
![Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials](/img/with_social_media_card.webp)
Pots establir la imatge per a xarxes socials amb `social_media_card = "img/social_media_card.png"`.
Pots especificar rutes tant relatives com absolutes.
- **Ruta relativa**: Posiciona la imatge a la mateixa carpeta que la teva entrada de blog i especifica el seu nom. Per exemple, `social_media_card = "relative_image.png"`.
- **Ruta absoluta**: Posiciona la imatge en una carpeta específica i especifica la ruta des de l'arrel. Per exemple, `social_media_card = "/img/absolute_image.png"`.
Si ambdues rutes, relativa i absoluta, són vàlides, la ruta relativa tindrà prioritat.
Ja que segueix la [jerarquia](#jerarquia-de-configuracio), si no està configurat en una pàgina, però sí ho està en una secció, s'utilitzarà la imatge de la secció. Si no està configurat en una pàgina o secció, però sí en `config.toml`, s'utilitzarà la imatge global.
**Consell**: automatitza la seva creació amb un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [De reservat a rei de les xarxes: automatitzant les vistes prèvies dels enllaços amb Zola](https://osc.garden/ca/blog/automating-social-media-cards-zola/).
---
## Navegació
### Barra de navegació
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
La barra de navegació és la franja a la part superior de la pàgina que conté el títol del lloc i el menú de navegació. Pots personalitzar els elements que apareixen configurant `menu` en `config.toml`. Per exemple:
```toml
menu = [
{ name = "blog", url = "blog", trailing_slash = true },
{ name = "arxiu", url = "archive", trailing_slash = true },
{ name = "etiquetes", url = "tags", trailing_slash = true },
{ name = "projectes", url = "projects", trailing_slash = true },
{ name = "sobre nosaltres", url = "about", trailing_slash = true },
]
```
### Botons de navegació ràpida
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Els botons de navegació ràpida són els botons que apareixen a la part inferior dreta de la pantalla. Hauries de veure'ls en aquesta pàgina, si no estàs en un dispositiu mòbil. Es veuen així:
{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp", alt="Botons de navegació ràpida") }}
Per activar-los, estableix `quick_navigation_buttons = true`.
### Taula de continguts
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:------------------:|:--------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Activa l'índex de continguts just sota del títol i metadades de l'article amb `toc = true`.
Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la Taula de continguts](/ca/blog/toc/).
### Enllaços de retorn a les notes a peu de pàgina
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:------------------:|:--------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Establir `footnote_backlinks = true` afegirà enllaços de retorn a les notes a peu de pàgina de les teves publicacions, com aquest:
{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp", alt="Enllaços de retorn a les notes a peu de pàgina", full_width=true) }}
Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada al punt del text on es va fer referència a la nota a peu de pàgina.
---
## Usabilitat
### Botó de copiar en blocs de codi
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:------------------:|:--------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Establir `copy_button = true` afegirà un petit botó de copiar a la part superior dreta dels blocs de codi, com aquest:
{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }}
### Suport per a KaTeX
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:------------------:|:--------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
KaTeX és una biblioteca JavaScript ràpida i fàcil d'usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb `katex = true`. Mira com es veu en tabi [aquí](/ca/blog/markdown/#katex).
### Subconjunt de tipus de lletra personalitzat
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:------------------:|:--------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt.
Pots crear un subconjunt personalitzat adaptat al teu lloc, guardar-lo com a `static/custom_subset.css`, i fer que es carregui amb `custom_subset = true`.
Per obtenir més informació, incloent instruccions sobre com crear un subconjunt personalitzat, consulta la [documentació](/ca/blog/custom-font-subset/).
### Contingut complet al feed
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:-------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Per defecte, el feed Atom només conté el resum o descripció de les teves publicacions. Pots incloure el contingut complet de les publicacions establint `full_content_in_feed = true` a `config.toml`.
---
## Comentaris {#afegir-comentaris}
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:-------------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ✅ |
Per activar els comentaris en una pàgina, establert el nom del sistema com a `true` al front matter. Per exemple, `utterances = true`.
Si vols activar els comentaris de forma global, pots fer-ho establint `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (per exemple, a `[extra.giscus]`).
Llegeix la [documentació](/ca/blog/comments/) per a més informació sobre els sistemes disponibles i la seva configuració.
---
## Icones al peu de pàgina
### Icones de xarxes socials
| Pàgina | Secció | `config.toml` | Respecta jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Pots afegir icones de xarxes socials al peu de pàgina amb `socials`, que accepta una llista d'objectes de xarxes socials. Per exemple:
```toml
socials = [
{ name = "github", url = "https://github.com/welpo/", icon = "github" },
{ name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
{ name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
{ name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
{ name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
]
```
Le icones provenen de Font Awesome. Per veure una llista de tots els icones disponibles, fes una ullada al [directori `static/social_icons`](https://github.com/welpo/tabi/tree/main/static/social_icons).
### Icona de feed
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Pots afegir un enllaç al teu feed RSS/Atom al peu de pàgina amb `feed_icon = true`.
---
## Metadades
### Copyright
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Per afegir una menció sobre els drets d'autor al teu lloc web, configura `copyright`:
```toml
copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
```
`$CURRENT_YEAR` es substituirà per l'any actual i `$SEPARATOR` es substituirà per la [variable `separator`](#separador-personalitzat). El text es processarà en Markdown. Per exemple:
{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Secció de drets d'autor", full_width=true) }}
Si tens un lloc multilingüe i vols establir diferents notificacions de drets d'autor per a diferents idiomes, pots:
1. Configura `translate_copyright = true` a `config.toml`.
2. Afegeix una clau `copyright` als arxius `i18n`. Consulta la [documentació](/ca/blog/faq-languages/#com-puc-personalitzar-o-sobreescriure-una-cadena-de-text-específica-al-meu-lloc-web).
### Temps de lectura
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Pots activar o desactivar el temps estimat de lectura d'un article amb `show_reading_time`. Si el configures com a `true`, apareixerà a les metadades de l'article, com això:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç «Veure canvis»") }}
Com que segueix [la jerarquia](#jerarquia-de-configuracio), pots activar-lo o desactivar-lo per a pàgines o seccions específiques. Per exemple, aquesta demo desactiva `show_reading_time = false` a la secció [projectes](https://welpo.github.io/tabi/ca/projects/) a l'arxiu [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), de manera que les seves publicacions individuals no mostren el temps de lectura.
### Format de data
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
tabi té dos formats de data: `long_date_format` i `short_date_format`. El format curt s'utilitza a les metadades d'una publicació, mentre que el format llarg s'utilitza al llistar les publicacions (és a dir, a la [secció de blog](/ca/blog/) o a la [pàgina principal](/ca/)).
Per defecte és "6th July 2049" per a ambdós formats en anglès. Per a altres idiomes, el predeterminat és `"%d %B %Y"` per al format llarg i `"%-d %b %Y"` per al format curt.
A Zola, la sintaxi per al format de temps està inspirada en strftime. Una referència completa està disponible a la [documentació de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
### Separador personalitzat
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El separador apareix en diversos llocs: al títol del navegador, entre les metadades d'una publicació...
El separador per defecte és un punt de llista (`•`), però pots canviar-lo configurant alguna cosa com `separator = "|"`.
### Ordre del títol
| Pàgina | Secció | `config.toml` | Respecta la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Per defecte, el títol a la pestanya del navegador és el nom del lloc seguit del títol de la pàgina. Per exemple, el títol de la secció del blog és «~/tabi • Blog».
Configurant `invert_title_order = true`, pots invertir l'ordre del títol del lloc i el títol de la pàgina a la pestanya del navegador. Per exemple, l'etiqueta del títol de la secció del blog es convertiria en «Blog • ~/tabi».
---
Certainly, here is a high-quality, non-literal translation of the provided text into Catalan. I've adhered to your specifications, keeping the variables and English terms unchanged.
## Seguretat
### Correu electrònic codificat
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
Per tal de protegir la teva adreça de correu electrònic contra els spambots, pots codificar-la al peu de pàgina. Pots fer això establint `email` a una versió codificada en base64 de la teva adreça de correu electrònic[^2]. Per exemple, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` és la versió codificada en base64 de "mail@example.com".
Si no vols codificar el teu correu electrònic tu mateix, tabi pot fer-ho per tu si configures `encode_plaintext_email = true`. Això et permet establir un correu electrònic en text pla en la configuració. Tingues en compte que això només protegeix la teva adreça de correu electrònic al teu lloc web, no en repositoris públics.
Si el correu electrònic està codificat (ja sigui per tu o per tabi), els usuaris amb JavaScript desactivat no veuran la icona de correu electrònic.
### CSP (Content Security Policy)
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
La Content Security Policy (CSP) és una capa addicional de seguretat que ajuda a detectar i mitigar certs tipus d'atacs, inclosos atacs de Cross Site Scripting (XSS) i injecció de dades. Aquests atacs s'utilitzen per a tot, des del robatori de dades fins a la desfiguració de llocs web i la distribució de programari maliciós.
tabi té una CSP predeterminada que permet imatges i vídeos remots, així com incrustacions de YouTube i Vimeo. Pots personalitzar-la amb `allowed_domains`, que accepta una llista de directrius de CSP. Aquesta és la CSP predeterminada:
```toml
allowed_domains = [
{ directive = "font-src", domains = ["'self'", "data:"] },
{ directive = "img-src", domains = ["'self'", "https://*", "data:"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'"] },
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]
```
Per a més informació, consulta la [pàgina de documentació de CSP](/ca/blog/security/).
---
[^1]: Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d'actualització del camp `updated`. Aquí tens una guia per a això: [Zola Git Hook: actualitzant les dates de les publicacions](https://osc.garden/ca/blog/zola-date-git-hook/).
[^2]: Per a codificar el teu correu electrònic en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al teu terminal, executar: `printf 'mail@example.com' | base64`

600
content/blog/mastering-tabi-settings.es.md
Unescape Escape View File

@ -0,0 +1,600 @@
+++
title = "Domina la configuración de tabi: guía completa"
date = 2023-09-18
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
[taxonomies]
tags = ["funcionalidad", "tutorial", "preguntas frecuentes"]
[extra]
giscus = true
footnote_backlinks = true
quick_navigation_buttons = true
+++
Esta es la guía completa sobre la configuración en tabi. Si tienes alguna pregunta, puedes usar los [comentarios](#comments) al final de esta página o [abrir un issue en GitHub](https://github.com/welpo/tabi/issues/new).
<details>
<summary><b>Tabla de contenido</b></summary>
<!-- toc -->
</details>
## Jerarquía de configuración
tabi tiene una jerarquía que te permite personalizar tu sitio en diferentes niveles. La jerarquía (de menor a mayor prioridad) es la siguiente:
1. **Configuraciones globales**: Estas son las configuraciones que se aplican a todo tu sitio. Se establecen en `config.toml`.
2. **Configuraciones de sección**: Estas son las configuraciones que se aplican a una sección de tu sitio (por ejemplo, `/blog` o `/projects`). Se establecen en la metainformación del archivo `_index.md` de la sección.
3. **Configuraciones de página**: Estas son las configuraciones que se aplican a una sola página. Se establecen en la metainformación de la página.
En todos los casos, las opciones de tabi se establecen en la sección `[extra]`.
Para las configuraciones que siguen esta jerarquía, el valor establecido en una página reemplaza el valor de una sección, que a su vez reemplaza el valor global. En resumen: cuanto más específica sea la configuración, mayor prioridad tendrá, o `página > sección > config.toml`.
## Soporte multilingüe
tabi ofrece soporte multilingüe completo para tu sitio Zola, desde configurar un idioma predeterminado hasta añadir todos los que desees. Consulta la [preguntas frecuentes sobre idiomas](/es/blog/faq-languages/) para más información.
---
## Apariencia
### Página principal
La [página principal](/) de esta demo tiene un encabezado con una imagen, un título y una descripción:
{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Encabezado de la página principal") }}
Para configurar la imagen y el título, puedes usar la variable `header` en el front matter del archivo `_index.md` de la sección. Por ejemplo:
```toml
[extra]
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
```
La descripción es contenido Markdown normal, escrito fuera del front matter.
Si deseas mostrar publicaciones en la página principal, primero necesitas decidir si su ruta será `/` o algo como `/blog`.
Si quieres servir las publicaciones desde `/`, necesitas configurar `paginate_by = 5` en el front matter de tu archivo `_index.md`. **Nota**: esto no se configura en el apartado `[extra]`, sino en el front matter principal. Ejemplo:
```toml
sort_by = "date"
template = "section.html"
paginate_by = 5
[extra]
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
```
Si prefieres servir las publicaciones desde `/blog`, puedes configurar `section_path = "/blog"` en la sección `[extra]`. Esta es la configuración de esta demo:
```toml
title = "Publicaciones recientes"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
section_path = "blog/_index.es.md"
max_posts = 4
```
Fíjate que si configuras `section_path`, no necesitas configurar `paginate_by`. Puedes establecer `max_posts` para determinar el número de publicaciones que deseas mostrar en la página principal.
El `title` es el encabezado que aparece sobre las publicaciones.
### Interruptor de modo claro y oscuro
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
El interruptor de modo claro y oscuro (el icono de luna/sol en la esquina superior derecha) puede habilitarse configurando `theme_switcher = true` en `config.toml`.
### Modo predeterminado (claro/oscuro)
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El tema predeterminado puede especificarse con la variable `default_theme`, que acepta `"dark"` o `"light"`. Por defecto es `"light"`.
**Nota**: el tema predeterminado solo se usa cuando el interruptor de tema está desactivado, ya sea porque se ha configurado como `false` en el config o porque un usuario ha deshabilitado JavaScript.
### Pieles personalizadas
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Las pieles de tabi cambian el color principal del sitio. Puedes configurar la piel en `config.toml` con `skin = "nombre_de_la_piel"`. Por ejemplo, `skin = "lavender"` se ve así (haz clic para cambiar entre modo claro y oscuro):
{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="piel lavender en modo claro", toggled_alt="piel lavender en modo oscuro", full_width=true) }}
Explora las pieles disponibles y aprende cómo crear la tuya propia consultando [la documentación](/es/blog/customise-tabi/#skins).
### Estilos CSS personalizados
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ❌ |
Puedes cargar estilos CSS personalizados para todo el sitio o en páginas específicas utilizando `stylesheets`, que acepta una lista de rutas hacia archivos CSS. Por ejemplo:
```toml
stylesheets = ["css/custom.css", "css/another.css"]
```
### Color del tema del navegador
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El color del tema del navegador es el color que aparece en la barra de pestañas del navegador:
{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="pestañas con un tema de navegador de color") }}
Puedes establecerlo en `config.toml` como `browser_theme_colour = "#087e96"`. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con `browser_theme_colour = ["#ffffff", "#000000"]`. El primer color es para el modo claro, el segundo para el oscuro.
Esta variable acepta cualquier color CSS válido, así que puedes usar palabras clave (por ejemplo, `blue`), códigos hexadecimales (por ejemplo, `#087e96`) o valores RGB/HSL (por ejemplo, `rgb(8, 126, 150)`).
---
## Integración con repositorios Git
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❓ | ❓ | ✅ | ❓ | ❌ |
❓: `show_remote_source` sí sigue [la jerarquía](#jerarquia-de-configuracion) y puede configurarse en una página, sección o globalmente. El resto de las configuraciones solo pueden establecerse en `config.toml`.
Estas configuraciones te permiten vincular tu sitio web tabi con un repositorio público de Git en GitHub, GitLab, Gitea o Codeberg. Configuraciones de ejemplo:
```toml
remote_repository_url = "https://github.com/welpo/tabi"
remote_repository_git_platform = "auto"
remote_repository_branch = "main"
show_remote_changes = true
show_remote_source = true
```
Esto habilita dos funciones:
1. `show_remote_source = true` añade un enlace al código fuente de tu sitio (tu `remote_repository_url`) que se mostrará en el pie de página:
{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'") }}
1. `show_remote_changes = true` añade un enlace «Ver cambios ↗» al historial de commits del artículo actualizado, al lado de la fecha de última actualización [^1]:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'") }}
Al hacer clic en este enlace, serás dirigido al historial de commits del artículo, donde podrás ver los cambios realizados en él:
{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Historial de commits de un artículo", full_width=true) }}
---
## Páginas
### Proyectos
tabi tiene una plantilla integrada para proyectos. Para habilitarla, puedes crear un directorio en `content/projects/`. Allí, puedes crear un archivo `_index.md` con el siguiente contenido en el bloque de metadatos:
```toml
title = "Proyectos"
sort_by = "weight"
template = "cards.html"
insert_anchor_links = "left"
[extra]
show_reading_time = false
quick_navigation_buttons = true
```
- `title` es el título de la página.
- `sort_by` determina cómo se ordenan los proyectos. Puedes ordenar por «date», «update_date», «title», «title_bytes», «weight», «slug» o «none».
- `template = "cards.html"` establece la plantilla para renderizar la página de proyectos.
- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados.
- `show_reading_time = false` oculta el tiempo estimado de lectura.
- `quick_navigation_buttons = true` muestra los botones de navegación rápida.
Junto al archivo `_index.md`, puedes crear un archivo para cada proyecto. Por ejemplo, este es el bloque de metadatos para la página del proyecto [tabi](/es/projects/tabi/):
```toml
title = "tabi"
description = "Un tema de Zola rápido, ligero y moderno con soporte multilingüe."
weight = 1
[extra]
local_image = "img/tabi.webp"
```
- `title` es el título del proyecto.
- `description` es la descripción del proyecto.
- `weight` determina el orden en el que se muestran los proyectos. Cuanto menor sea el peso, más arriba aparecerá el proyecto.
- `local_image` es la ruta de la imagen del proyecto. Esta imagen se muestra en la página de proyectos.
Cuando un usuario haga clic en la imagen o el título de un proyecto, será llevado a la página del proyecto. Si prefieres que los usuarios vayan a un enlace externo, puedes establecer `link_to = "https://example.com"` en la sección `[extra]` del archivo `.md` del proyecto.
La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, `template = "info-page.html"`.
### 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 bloque de metadatos:
```toml
title = "Archivo"
template = "archive.html"
```
De forma predeterminada, el archivo listará las publicaciones ubicadas en `/blog/`. Si deseas cambiar esto, puedes establecer `section_path = "/otra-ruta/"` en la sección `[extra]` del archivo `_index.md`. Asegúrate de incluir la barra inclinada al final.
### Etiquetas
tabi tiene soporte integrado para etiquetas. Para habilitarlas, simplemente añade la taxonomía a tu `config.toml`:
```toml
taxonomies = [{name = "tags", feed = true}]
```
Luego, puedes añadir etiquetas a tus publicaciones agregándolas al array `tags` en el bloque de metadatos de tu publicación. Por ejemplo:
```toml,hl_lines=05-06
title = "Los molinos de viento de mi vida: reflexiones de un escudero"
date = 1605-01-16
description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida."
[taxonomies]
tags = ["personal", "reflexiones"]
```
### Página acerca de
Si deseas tener una página que no sea un artículo, por ejemplo para un apartado "Acerca de", "Contacto" o "Derechos de autor", puedes usar la plantilla `info-page.html`.
Primero, crea un directorio dentro de `content/` con el nombre que prefieras. Por ejemplo, `content/pages/`. Luego, crea un archivo `_index.md` dentro de ese directorio. El archivo debería verse así:
```markdown
+++
render = false
insert_anchor_links = "left"
+++
```
- `render = false` indica a Zola que no renderice la sección.
- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados. Esto es opcional.
Dentro del directorio, puedes crear cualquier cantidad de archivos `.md`.
En esta demo, la página [Sobre mí](/es/about/) utiliza la plantilla `info-page.html`. El bloque de metadatos es el siguiente:
```toml
title = "Sobre mí"
template = "info-page.html"
path = "about"
```
Fíjate cómo se establece `path = "about"`. Zola colocará la página en `$base_url/about/`. Si deseas que la página esté disponible en `/contacto/`, tendrías que establecer `path = "contacto"`.
---
## SEO
tabi se encarga de la mayoría de las tareas de SEO por ti (como etiquetas del protocolo Open Graph, descripción, esquema de colores…), pero hay ciertas configuraciones que puedes personalizar.
### Favicon
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El favicon es el pequeño icono que aparece en la pestaña del navegador. Puedes establecerlo en `config.toml` con `favicon = "img/favicon.png"`.
### Favicon de emoji
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
También puedes establecer un emoji como tu favicon con `favicon_emoji`. Por ejemplo, `favicon_emoji = "👾"`.
Nota: Algunos navegadores no admiten favicons de emoji. Consulta la tabla de compatibilidad en [caniuse](https://caniuse.com/link-icon-svg).
### URL canónica
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ❌ | ❌ |
La URL canónica es una manera de indicar a los motores de búsqueda cuál es la URL preferida para el contenido de tu sitio web. Esto es útil para el SEO y para evitar problemas de contenido duplicado.
Por defecto, la URL canónica es la URL de la página en la que te encuentras. Sin embargo, puedes cambiar esto configurando `canonical_url` en el front matter de tu página o sección.
Si tienes un sitio con una estructura idéntica y contenido coincidente, puedes configurar `base_canonical_url` en tu `config.toml`. La URL canónica se creará reemplazando el `$base_url` de la URL actual con el `$base_canonical_url` que establezcas.
Por ejemplo, si configuras `base_canonical_url = "https://example.com"`, la URL canónica de la página `$base_url/blog/post1` será `https://example.com/blog/post1`. Esto es útil si tienes un sitio con varios dominios que comparten el mismo contenido.
**Nota**: para asegurarte de que la URL canónica sea correcta, probablemente sea mejor configurar `canonical_url` individualmente para cada página.
### Tarjetas para redes sociales
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Las tarjetas para redes sociales son las imágenes que se muestran cuando compartes un enlace en redes sociales:
![Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales](/img/with_social_media_card.webp)
Puedes establecer la imagen para redes sociales con `social_media_card = "img/social_media_card.png"`.
Puedes especificar rutas tanto relativas como absolutas.
- **Ruta relativa**: Coloca la imagen en la misma carpeta que tu entrada de blog y especifica su nombre. Por ejemplo, `social_media_card = "relative_image.png"`.
- **Ruta absoluta**: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, `social_media_card = "/img/absolute_image.png"`.
Si ambas rutas, relativa y absoluta, son válidas, la ruta relativa tendrá prioridad.
Dado que sigue la [jerarquía](#jerarquia-de-configuracion), si no está configurado en una página, pero sí lo está en una sección, se utilizará la imagen de la sección. Si no está configurado en una página o sección, pero sí en `config.toml`, se usará la imagen global.
**Consejo**: automatiza su creación con un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [De reservado a rey de las redes: automatizando las vistas previas de los enlaces con Zola](https://osc.garden/es/blog/automating-social-media-cards-zola/).
---
## Navegación
### Barra de navegación
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
La barra de navegación es la barra en la parte superior de la página que contiene el título del sitio y el menú de navegación. Puedes personalizar los elementos que aparecen configurando `menu` en `config.toml`. Por ejemplo:
```toml
menu = [
{ name = "blog", url = "blog", trailing_slash = true },
{ name = "archivo", url = "archive", trailing_slash = true },
{ name = "etiquetas", url = "tags", trailing_slash = true },
{ name = "proyectos", url = "projects", trailing_slash = true },
{ name = "acerca de", url = "about", trailing_slash = true },
]
```
### Botones de navegación rápida
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Los botones de navegación rápida son los botones que aparecen en la parte inferior derecha de la pantalla. Deberías verlos en esta página, si no estás en un dispositivo móvil. Se ven así:
{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp", alt="Botones de navegación rápida") }}
Para activarlos, establece `quick_navigation_buttons = true`.
### Table de contenido
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Habilita el índice de contenidos justo debajo del título y metadatos del artículo con `toc = true`.
Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la Tabla de contenido](/es/blog/toc/).
### Enlaces de retorno en notas al pie
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Establecer `footnote_backlinks = true` añadirá enlaces de retorno a las notas al pie de tus publicaciones, como este:
{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp", alt="Enlaces de retorno en notas al pie", full_width=true) }}
Cuando hagas clic en un enlace de retorno (la flecha ↩), te llevará de vuelta al punto del texto donde se hizo referencia a la nota al pie.
---
## Usabilidad
### Botón de copiar en bloques de código
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Establecer `copy_button = true` añadirá un pequeño botón de copiar en la parte superior derecha de los bloques de código, como este:
{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }}
### Soporte para KaTeX
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
KaTeX es una biblioteca JavaScript rápida y fácil de usar para la representación de matemáticas TeX en la web. Puedes habilitarlo con `katex = true`. Mira cómo se ve en tabi [aquí](/es/blog/markdown/#katex).
### Subconjunto de fuente personalizada
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Las fuentes personalizadas causan parpadeo del texto en Firefox. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto (ligeramente) aumenta el tiempo de carga inicial, es una buena idea intentar minimizar el tamaño de este subconjunto.
Puedes crear un subconjunto personalizado adaptado a tu sitio, guardarlo como `static/custom_subset.css`, y hacer que se cargue con `custom_subset = true`.
Para obtener más información, incluyendo instrucciones sobre cómo crear un subconjunto personalizado, consulta la [documentación](/es/blog/custom-font-subset/).
### Contenido completo en el feed
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Por defecto, el feed Atom solo contiene el resumen/descripción de tus publicaciones. Puedes incluir el contenido completo de las publicaciones estableciendo `full_content_in_feed = true` en `config.toml`.
---
## Comentarios {#añadir-comentarios}
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ✅ |
Para activar los comentarios en una página, establece el nombre del sistema como `true` en el front matter. Por ejemplo, `utterances = true`.
Si quieres activar los comentarios de forma global, puedes hacerlo estableciendo `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (por ejemplo, en `[extra.giscus]`).
Lee la [documentación](/es/blog/comments/) para obtener más información sobre los sistemas disponibles y su configuración.
---
## Iconos en el pie de página
### Iconos de redes sociales
| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Puedes añadir iconos de redes sociales al pie de página con `socials`, que acepta una lista de objetos de redes sociales. Por ejemplo:
```toml
socials = [
{ name = "github", url = "https://github.com/welpo/", icon = "github" },
{ name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
{ name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
{ name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
{ name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
]
```
Los iconos provienen de Font Awesome. Para ver una lista de todos los iconos disponibles, echa un vistazo al [directorio `static/social_icons`](https://github.com/welpo/tabi/tree/main/static/social_icons).
### Icono de feed
| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Puedes añadir un enlace a tu feed RSS/Atom en el pie de página con `feed_icon = true`.
---
## Metadatos
### Copyright
| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Para añadir una mención sobre los derechos de autor a tu sitio web, configura `copyright`:
```toml
copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
```
`$CURRENT_YEAR` se reemplazará por el año actual y `$SEPARATOR` se reemplazará por la [variable `separator`](#separador-personalizado). Se procesará el texto en Markdown. Por ejemplo:
{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Sección de derechos de autor", full_width=true) }}
Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de derechos de autor para diferentes idiomas, puedes:
1. Configura `translate_copyright = true` en `config.toml`.
2. Añade una clave `copyright` a los archivos `i18n`. Consulta la [documentación](/es/blog/faq-languages/#cómo-personalizo-o-sobrescribo-una-cadena-de-texto-específica-en-mi-sitio-web).
### Tiempo de lectura
| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Puedes activar o desactivar el tiempo estimado de lectura de un artículo con `show_reading_time`. Si lo estableces en `true`, se mostrará en los metadatos del artículo, así:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»") }}
Dado que sigue [la jerarquía](#jerarquia-de-configuracion), puedes activarlo o desactivarlo para páginas o secciones específicas. Por ejemplo, esta demo desactiva `show_reading_time = false` en la sección [proyectos](https://welpo.github.io/tabi/es/projects/) en el archivo [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), por lo que sus publicaciones individuales no muestran el tiempo de lectura.
### Formato de fecha
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
tabi tiene dos formatos de fecha: `long_date_format` y `short_date_format`. El formato corto se utiliza en los metadatos de una publicación, mientras que el formato largo se utiliza al listar las publicaciones (es decir, en la [sección de blog](/es/blog/) o en la [página principal](/es/)).
Por defecto es "6th July 2049" para ambos formatos en inglés. Para otros idiomas, el predeterminado es `"%d %B %Y"` para el formato largo y `"%-d %b %Y"` para el formato corto.
En Zola, la sintaxis para el formateo de tiempo está inspirada en strftime. Una referencia completa está disponible en la [documentación de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
### Separador personalizado
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
El separador aparece en varios lugares: en el título del navegador, entre los metadatos de una publicación…
El separador por defecto es un punto de viñeta (`•`), pero puedes cambiarlo configurando algo como `separator = "|"`.
### Orden del título
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Por defecto, el título en la pestaña del navegador es el nombre del sitio seguido del título de la página. Por ejemplo, el título de la sección del blog es «~/tabi • Blog».
Al configurar `invert_title_order = true`, puedes invertir el orden del título del sitio y el título de la página en la pestaña del navegador. Por ejemplo, la etiqueta del título de la sección del blog se convertiría en «Blog • ~/tabi».
---
## Seguridad
### Correo electrónico codificado
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
Para proteger tu dirección de correo electrónico de los spambots, puedes codificarla en el pie de página. Puedes hacer esto estableciendo `email` en una versión codificada en base64 de tu dirección de correo electrónico[^2]. Por ejemplo, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` es la versión codificada en base64 de "mail@example.com".
Si no quieres codificar tu correo electrónico tú mismo, tabi puede hacerlo por ti si configuras `encode_plaintext_email = true`. Esto te permite establecer un correo electrónico en texto plano en la configuración. Ten en cuenta que esto sólo protege tu dirección de correo electrónico en tu sitio, no en repositorios públicos.
Si el correo electrónico está codificado (ya sea por ti o por tabi), los usuarios con JavaScript desactivado no verán el icono de correo electrónico.
### CSP (Content Security Policy)
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
La Content Security Policy (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluidos ataques de Cross Site Scripting (XSS) e inyección de datos. Estos ataques se utilizan para todo, desde robo de datos hasta desfiguración de sitios y distribución de malware.
tabi tiene una CSP predeterminada que permite imágenes y vídeos remotos, así como incrustaciones de YouTube y Vimeo. Puedes personalizarla con `allowed_domains`, que toma una lista de directivas de CSP. Esta es la CSP predeterminada:
```toml
allowed_domains = [
{ directive = "font-src", domains = ["'self'", "data:"] },
{ directive = "img-src", domains = ["'self'", "https://*", "data:"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'"] },
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]
```
Para obtener más información, consulta la [página de documentación de CSP](/es/blog/security/).
---
[^1]: Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo `updated`. Aquí tienes una guía para eso: [Zola Git Hook: actualizando las fechas de las publicaciones](https://osc.garden/es/blog/zola-date-git-hook/).
[^2]: Para codificar tu correo electrónico en base64 puedes utilizar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`

604
content/blog/mastering-tabi-settings.md
Unescape Escape View File

@ -0,0 +1,604 @@
+++
title = "Mastering tabi Settings: A Comprehensive Guide"
date = 2023-09-18
description = "Discover the many ways you can customise your tabi site."
[taxonomies]
tags = ["showcase", "tutorial", "FAQ"]
[extra]
giscus = true
footnote_backlinks = true
quick_navigation_buttons = true
+++
This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to ask in the [comments below](#comments) or [open an issue on GitHub](https://github.com/welpo/tabi/issues/new).
<details>
<summary><b>Table of Contents</b></summary>
<!-- toc -->
</details>
## Settings Hierarchy
tabi has a hierarchy that allows you to customise your site at different levels. The hierarchy (from low to high priority) is as follows:
1. **Global settings**: These are the settings that apply to your entire site. They are set in `config.toml`.
2. **Section settings**: These are the settings that apply to a section of your site (e.g.`/blog` or `/projects`). They are set in the front matter of the `_index.md` file of the section.
3. **Page settings**: These are the settings that apply to a single page. They are set in the front matter of the page.
In all cases, tabi's settings are set in the `[extra]` section.
For settings which follow this hierarchy, the value set on a page overrides the value for a section, which overrides the global value. In short: the more specific the setting, the higher priority it has, or `page > section > config.toml`.
---
## Multilingual Support
tabi offers comprehensive multilingual support for your Zola site, from setting a default language to adding as many as you wish. Refer to the [multilingual FAQ](blog/faq-languages/) for more information.
---
## Appearance
### Home Page
The [main page](/) of this demo has a header with an image, a title and description:
{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Main page header") }}
To set the image and title, you can use the `header` variable in the front matter of the section's `_index.md` file. For example:
```toml
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
```
The description is regular Markdown content, set outside the front matter.
If you'd like to show posts on the main page, you first need to decide whether their path will be `/` or something like `/blog`.
If you want to serve the posts from `/`, you need to set `paginate_by = 5` in the front matter of your `_index.md` file. **Note**: this is not in the `[extra]` section, but in the main front matter. Example:
```toml
sort_by = "date"
template = "section.html"
paginate_by = 5
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
```
If you'd rather serve the posts from `/blog`, you can set `section_path = "/blog"` in the `[extra]` section. This is the setup or this demo:
```toml
title = "Latest posts"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
section_path = "blog/_index.md"
max_posts = 4
```
Notice how if you set `section_path`, you don't need to set `paginate_by`. You can set `max_posts` to the determine the number of posts you want to show on the main page.
The `title` is the header that appears above the posts.
### Light and Dark Mode Switcher
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
The light and dark mode switcher (the moon/sun icon on the top right) can be enabled by setting `theme_switcher = true` in `config.toml`.
### Default (Light/Dark) Mode
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The default theme can be specified with the `default_theme` variable, which accepts either `"dark"` or `"light"`. Defaults to `"light"`.
**Note**: the default theme is only used when the theme switcher is disabled, either because it's set to `false` in the config or because a user has JavaScript disabled.
### Custom Skins
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
tabi's skins change the main colour of the site. You can set the skin in `config.toml` with `skin = "skin_name"`. For example, `skin = "lavender"` looks like this (click to switch between light and dark mode):
{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
Explore the available skins and learn how to create your own reading [the documentation](/blog/customise-tabi/#skins).
### Custom CSS
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ❌ |
You can load custom CSS for the entire site or on specific pages with `stylesheets`, which takes a list of paths to CSS files. For example:
```toml
stylesheets = ["css/custom.css", "css/another.css"]
```
### Browser Theme Colour
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The browser theme colour is the colour that appears in the browser's tab bar:
{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="tabi with a coloured browser theme") }}
You can set it in `config.toml` like `browser_theme_colour = "#087e96"`. If you'd like different colours for dark/light mode, you can set an array of colours with `browser_theme_colour = ["#ffffff", "#000000"]`. The first colour will be used for light mode, the second for dark mode.
This variable accepts any valid CSS colour, so you can use keywords (e.g. `blue`), hex codes (e.g. `#087e96`) or RGB/HSL values (e.g. `rgb(8, 126, 150)`).
---
## Git Repository Integration
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:-----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❓ | ❓ | ✅ | ❓ | ❌ |
❓: `show_remote_source` does follow [the hierarchy](#settings-hierarchy) and can be set on a page, section or globally. The rest of the settings can only be set in `config.toml`.
These settings allow you to link your tabi website with a public Git repository in GitHub, GitLab, Gitea or Codeberg. Example settings:
```toml
remote_repository_url = "https://github.com/welpo/tabi"
remote_repository_git_platform = "auto"
remote_repository_branch = "main"
show_remote_changes = true
show_remote_source = true
```
This enables two features:
1. `show_remote_source = true` adds a link to the source code of your site (your `remote_repository_url`) will be displayed on the footer:
{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Page footer, showing a 'Site source' link") }}
1. `show_remote_changes = true` adds a "See changes ↗" link to the commit history of updated posts, next to the last updated date [^1]:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
Clicking on this link will take you to the commit history of the post, where you can see the changes made to it:
{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Commit history of a post", full_width=true) }}
---
## Pages
### Projects
tabi has a built-in projects template. To enable it, you can create a directory in `content/projects/`. There, you can create a `_index.md` file with the following front matter:
```toml
title = "Projects"
sort_by = "weight"
template = "cards.html"
insert_anchor_links = "left"
[extra]
show_reading_time = false
quick_navigation_buttons = true
```
- The `title` is the title of the page.
- `sort_by` determines how the projects are sorted. You can sort by "date", "update_date", "title", "title_bytes", "weight", "slug" or "none".
- `template = "cards.html"` sets the template to render the projects page.
- `insert_anchor_links = "left"` adds anchor links to headers.
- `show_reading_time = false` hides the [reading time](#reading-time).
- `quick_navigation_buttons = true` shows the [quick navigation buttons](#quick-navigation-buttons) are shown.
Alongside the `_index.md` file, you can create a file for each project. For example, this is the front matter for the [tabi project page](/projects/tabi/):
```toml
title = "tabi"
description = "A fast, lightweight, and modern Zola theme with multi-language support."
weight = 1
[extra]
local_image = "img/tabi.webp"
```
- `title` is the title of the project.
- `description` is the description of the project.
- `weight` determines the order in which the projects are shown. The lower the weight, the higher the project will appear.
- `local_image` is the path to the image of the project. This image is shown on the projects page.
When a user clicks on the image or title of a project, they will be taken to the project's page. If you'd rather have users go to an external link, you can set `link_to = "https://example.com` in the `[extra]` section of the project's `.md` file.
The individual project's page is rendered with the default template, unless you set another one, e.g. `template = "info-page.html"`.
### Archive
Adding an archive page is similar to adding a projects page. You can create a directory in `content/archive/`. There, you can create a `_index.md` file with the following front matter:
```toml
title = "Archive"
template = "archive.html"
```
By default, the archive will list posts located in `/blog/`. If you'd like to change this, you can set `section_path = "/another-path/"` in the `[extra]` section of the `_index.md` file. Make sure to include the trailing slash.
### Tags
tabi has built-in support for tags. To enable them, simply add the taxonomy to your `config.toml`:
```toml
taxonomies = [{name = "tags", feed = true}]
```
You can then add tags to your posts by adding them to the `tags` array in the front matter of your post. For example:
```toml,hl_lines=05-06
title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
date = 2007-04-26
description = "Lessons learned from beet farming and paper sales."
[taxonomies]
tags = ["personal", "beets"]
```
### About Page
If you'd like to have a non-article page for an "About" section, a "Contact" or "Copyright" page, etc., you can use the `info-page.html` template.
First, create a directory inside `content/` with any name you like. For example, `content/pages/`. Then, create a `_index.md` file inside that directory. The file should look like this:
```markdown
+++
render = false
insert_anchor_links = "left"
+++
```
- `render = false` tells Zola not to render the section.
- `insert_anchor_links = "left"` adds anchor links to headers. This is optional.
Inside the directory, you can create any number of `.md` files.
In this demo, the [about](about/) page uses the `info-page.html` template. The front matter is as follows:
```toml
title = "About"
template = "info-page.html"
path = "about"
```
Notice how the `path` is set to `about`. Zola will place the page at `$base_url/about/`. If you'd like to have the page available at `/contact/`, you'd set `path = "contact"`.
---
## SEO
tabi takes care of most of the SEO for you (like Open Graph protocol tags, description, color-scheme…), but there are a few things you can customise.
### Favicon
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The favicon is the small icon that appears in the browser tab. You can set it in `config.toml` with `favicon = "img/favicon.png"`.
### Emoji Favicon
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
You can also set an emoji as your favicon with `favicon_emoji`. For example, `favicon_emoji = "👾"`.
Note: Some browsers don't support emoji favicons. See the compatibility table in [caniuse](https://caniuse.com/link-icon-svg).
### Canonical URL
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ❌ | ❌ |
The canonical URL is a way to indicate to search engines what the preferred URL is for your website content. This is useful for SEO and avoiding duplicate content issues.
By default, the canonical URL is the URL of the page you're on. However, you can override this by setting `canonical_url` in the front matter of your page or section.
If you have a site with an identical structure and matching content, you can set `base_canonical_url` in your `config.toml`. The canonical URL will be crafted by replacing the `$base_url` of the current URL with the `$base_canonical_url` you set.
For example, if you set `base_canonical_url = "https://example.com"`, the canonical URL of the page `$base_url/blog/post1` will be `https://example.com/blog/post1`. This is useful if you have a site with multiple domains that share the same content.
**Note**: to ensure that the canonical URL is correct, it's probably best to set `canonical_url` individually for each page.
### Social media cards
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Social media cards are the images that are displayed when you share a link on social media:
![A screenshot of WhatsApp showing a link with a social media card](/img/with_social_media_card.webp)
You can set the social media image with `social_media_card = "img/social_media_card.png"`.
You can specify both relative and absolute paths.
- **Relative Path**: Place the image in the same folder as your blog post and specify its name. For example, `social_media_card = "relative_image.png"`.
- **Absolute Path**: Put the image in a specific folder and specify the path from the root. For example, `social_media_card = "/img/absolute_image.png"`.
If both relative and absolute paths are valid, the relative path will take precedence.
Since it follows the [hierarchy](#settings-hierarchy), if it's not set on a page, but is set on a section, the section's image will be used. If it's not set on a page or section, but is set in `config.toml`, the global image will be used.
**Protip**: automate their creation with a [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [From Bashful to Social Butterfly: Automating Link Previews for Zola Sites](https://osc.garden/blog/automating-social-media-cards-zola/).
---
## Navigation
### Navigation Bar
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The navigation bar is the bar at the top of the page that contains the site title and the navigation menu. You can customise which items appear by setting `menu` in `config.toml`. For example:
```toml
menu = [
{ name = "blog", url = "blog", trailing_slash = true },
{ name = "archive", url = "archive", trailing_slash = true },
{ name = "tags", url = "tags", trailing_slash = true },
{ name = "projects", url = "projects", trailing_slash = true },
{ name = "about", url = "about", trailing_slash = true },
]
```
### Quick Navigation Buttons
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you're not on mobile. They look like this:
{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp" alt="Quick navigation buttons") }}
The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page.
To enable them, set `quick_navigation_buttons = true`.
### Table of Contents
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
Enable the table of contents right below the post's title and metadata with `toc = true`.
Read more about the table of contents and how to customise it by reading [the docs](/blog/toc/).
### Footnote Backlinks
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Setting `footnote_backlinks = true` will add backlinks to the footnotes of your posts, like this:
{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp" alt="Footnote backlinks", full_width=true) }}
When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced.
---
## Usability
### Copy Button on Code Blocks
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Setting `copy_button = true` will add a small copy button to the top right of code blocks, like this:
{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }}
### KaTeX Support
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with `katex = true`. See what it looks like in tabi [here](/blog/markdown/#katex).
### Custom Font Subset
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset.
You can create a custom subset tailored to your site, save it as `static/custom_subset.css`, and have it load with `custom_subset = true`.
For more information, including instructions on how to create a custom subset, see the [docs](/blog/custom-font-subset/).
### Full Content in Feed
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
By default, the Atom feed only contains the summary/description of your posts. You can include the entire posts' content by setting `full_content_in_feed = true` in `config.toml`.
---
## Comments {#adding-comments}
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ❌ | ✅ | ❌ | ✅ |
To enable comments on an individual page, set the name of the system you want to enable to `true` in the front matter. For example, `utterances = true`.
To enable a system globally (on all pages), set `enabled_for_all_posts = true` in the correct section of your `config.toml` (e.g. inside `[extra.giscus]`).
Read [the docs](/blog/comments/) for more information on the available systems and their setup.
---
## Footer Icons
### Social Media Icons
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
You can add social media icons to the footer with `socials`, which takes a list of social media objects. For example:
```toml
socials = [
{ name = "github", url = "https://github.com/welpo/", icon = "github" },
{ name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
{ name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
{ name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
{ name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
]
```
The icons are from Font Awesome. To see a list of all the available icons, take a look at the [`static/social_icons` directory](https://github.com/welpo/tabi/tree/main/static/social_icons).
### Feed Icon
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
You can add a link to your RSS/Atom feed to the footer with `feed_icon = true`.
---
## Metadata
### Copyright
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
To add a copyright notice to your site, set `copyright`:
```toml
copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
```
`$CURRENT_YEAR` will be replaced by the current year, and `$SEPARATOR` will be replaced by the [`separator` variable](#custom-separator). Markdown is rendered. The example above:
{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Copyright section", full_width=true) }}
If you have a multilingual site and want to set different copyright notices for different languages, you can:
1. Set `translate_copyright = true` in `config.toml`.
2. Add a `copyright` key to the `i18n` files. See the [documentation](/blog/faq-languages/#how-do-i-customise-or-override-a-specific-text-string-on-my-website).
### Reading Time
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ❌ |
You can enable or hide the reading time of a post with `show_reading_time`. If you set it to `true`, it will be displayed in the post's metadata, like this:
{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
Since it follows [the hierarchy](#settings-hierarchy), you can enable it or hide it for specific pages or sections. For example, this demo sets `show_reading_time = false` in the [projects](https://welpo.github.io/tabi/projects/) section's [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.md?plain=1), so their individual posts don't show the reading time.
### Date Format
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
tabi has two date formats: `long_date_format` and `short_date_format`. The short format is used in a post's metadata, while the long format is used when listing posts (i.e. on the [blog section](/blog/) or the [main page](/)).
The default is "6th July 2049" for both formats in English. For other languages, the defaut is `"%d %B %Y"` for the long format and `"%-d %b %Y"` for the short format.
In Zola, time formatting syntax is inspired fom strftime. A full reference is available in the [chrono docs](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
### Custom Separator
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The separator appears in various places: in the title tag, between the metadata of a post…
The default separator is a bullet point (`•`), but you can change by setting something like `separator = "|"`.
### Title Tag Order
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
The title tag is the text that appears in the browser tab. By default, it's the site title followed by the page title. For example, the title tag of the blog section is "~/tabi • Blog".
By setting `invert_title_order = true`, you can invert the order of the site title and page title in the browser tab. For example, the title tag of the blog section would become "Blog • ~/tabi".
---
## Security
### Encoded Email
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ✅ |
To protect your email address from spambots, you can encode it in the footer. You can do this by setting `email` to a base64 encoded version of your email address[^2]. For example, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` is the base64 encoded version of "mail@example.com".
If you don't want to encode your email yourself, tabi can encode it for you if you set `encode_plaintext_email = true`. This allows you to set a plaintext email on the config. Note that this only protects your email address on your site, not in public repositories.
If the email is encoded (either by you or by tabi), users with JavaScript disabled will not see the email icon.
### CSP (Content Security Policy)
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ❌ | ❌ | ✅ | ❌ | ❌ |
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.
tabi has a default CSP that allows for remote images and videos, as well as YouTube and Vimeo embeds. You can customise it with `allowed_domains`, which takes a list of CSP directives. This is the default CSP:
```toml
allowed_domains = [
{ directive = "font-src", domains = ["'self'", "data:"] },
{ directive = "img-src", domains = ["'self'", "https://*", "data:"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'"] },
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]
```
See the [CSP documentation page](/blog/security/) for more information.
---
[^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/).
[^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.

47
content/projects/tabi.ca.md
Unescape Escape View File

@ -5,10 +5,11 @@ weight = 1
[extra]
local_image = "img/tabi.webp"
canonical_url = "https://osc.garden/ca/projects/tabi/"
social_media_card = "img/social_cards/ca_projects_tabi.jpg"
+++
[**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en característiques per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid.
[**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en funcionalitat per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid.
{{ full_width_image(src="img/light_dark_tabi.webp", alt="Modes clar i fosc de tabi") }}
@ -16,24 +17,32 @@ social_media_card = "img/social_cards/ca_projects_tabi.jpg"
## Característiques
- [Suport multilingüe complet](https://welpo.github.io/tabi/ca/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Afegeix tants idiomes com vulguis.
- [Estableix qualsevol idioma com a predeterminat](https://welpo.github.io/tabi/ca/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Configura el teu lloc en xinès, espanyol, francès, hindi... o qualsevol [altre idioma compatible](https://github.com/welpo/tabi/tree/main/i18n). La interfície del tema es traduirà en conseqüència.
- Temes clars i foscos. S'adapta a la configuració del sistema operatiu, amb un interruptor a la barra de navegació.
- Suport per a [comentaris utilitzant giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/ca/blog/comments/).
- Puntuació perfecta a Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO).
- Suport de [KaTeX](https://katex.org/).
- Tot el JavaScript es pot [deshabilitar completament](https://welpo.github.io/tabi/ca/blog/javascript/).
- [Aspectes personalitzables](https://welpo.github.io/tabi/ca/blog/customise-tabi/).
- [Feed estilitzat](https://welpo.github.io/tabi/ca/atom.xml).
- [Pàgina de projectes](https://welpo.github.io/tabi/ca/projects/).
- [Pàgina d'arxiu](https://welpo.github.io/tabi/ca/archive/).
- [Taula de continguts](https://welpo.github.io/tabi/ca/blog/toc/).
- Etiquetes.
- Enllaços socials.
- Disseny responsiu.
- Ressaltat sintàctic del codi.
- [Capçaleres de seguretat personalitzables](https://welpo.github.io/tabi/ca/blog/security/).
- [Shortcodes personalitzats](https://welpo.github.io/tabi/ca/blog/shortcodes/).
- [X] [Suport multilingüe complet](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-gestiona-tabi-el-suport-multilingue). Afegeix tants idiomes com vulguis.
- [X] [Estableix qualsevol idioma com a predeterminat](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-estableixo-la-llengua-predeterminada-del-meu-lloc). Configura el teu lloc en xinès, espanyol, francès, hindi… o qualsevol [altre idioma compatible](https://github.com/welpo/tabi/tree/main/i18n). La interfície del tema es traduirà en conseqüència.
- [X] Temes clars i foscos. S'adapta a la configuració del sistema operatiu, amb un interruptor a la barra de navegació.
- [X] Suport per a [comentaris usant giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/ca/blog/comments/).
- [X] Puntuació perfecta en Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO).
- [X] [Integració amb repositoris remots](https://welpo.github.io/tabi/ca/mastering-tabi-settings/#integracio-amb-repositoris-git) a GitHub, GitLab, Gitea i Codeberg per a l'historial de commits i mostrar el codi font del lloc.
- [X] [Targetes per a xarxes socials](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#targetes-per-a-xarxes-socials).
- [X] Suport de [KaTeX](https://katex.org/).
- [X] Tot el JavaScript es pot [deshabilitar completament](https://welpo.github.io/tabi/ca/blog/javascript/).
- [X] [Skins personalitzables](https://welpo.github.io/tabi/ca/blog/customise-tabi/).
- [X] [Feed estilitzat](https://welpo.github.io/tabi/ca/atom.xml).
- [X] [Botons de navegació ràpida](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#botons-de-navegacio-rapida).
- [X] [Enllaços de retrocés per a notes al peu](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#enllacos-de-retorn-a-les-notes-a-peu-de-pagina).
- [X] [Botó de copiar per a blocs de codi](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#boto-de-copiar-en-blocs-de-codi).
- [X] [URL canòniques personalitzables](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#url-canonica).
- [X] [Pàgina de projectes](https://welpo.github.io/tabi/ca/projects/).
- [X] [Pàgina d'arxiu](https://welpo.github.io/tabi/ca/archive/).
- [X] [Taula de continguts personalitzable](https://welpo.github.io/tabi/ca/blog/toc/).
- [X] [Codificació de correu](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#correu-electronic-codificat) per a protecció contra spam.
- [X] [Etiquetes](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#etiquetes).
- [X] [Enllaços socials](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#icones-de-xarxes-socials).
- [X] [Avís de drets d'autor personalitzat](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#copyright).
- [X] Disseny responsive.
- [X] Ressaltat de sintaxi de codi amb colors basats en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
- [X] [Capçaleres de seguretat personalitzables](https://welpo.github.io/tabi/ca/blog/security/).
- [X] [Shortcodes personalitzats](https://welpo.github.io/tabi/ca/blog/shortcodes/).
## Pràctiques de desenvolupament

45
content/projects/tabi.es.md
Unescape Escape View File

@ -5,6 +5,7 @@ weight = 1
[extra]
local_image = "img/tabi.webp"
canonical_url = "https://osc.garden/es/projects/tabi/"
social_media_card = "img/social_cards/es_projects_tabi.jpg"
+++
@ -16,24 +17,32 @@ social_media_card = "img/social_cards/es_projects_tabi.jpg"
## Características
- [Soporte multilingüe completo](https://welpo.github.io/tabi/es/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Añade tantos idiomas como desees.
- [Establece cualquier idioma como predeterminado](https://welpo.github.io/tabi/es/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Configura tu sitio en chino, español, francés, hindi… o cualquier [otro idioma compatible](https://github.com/welpo/tabi/tree/main/i18n). La interfaz del tema se traducirá en consecuencia.
- Temas claros y oscuros. Se adapta a la configuración del sistema operativo, con un interruptor en la barra de navegación.
- Soporte para [comentarios usando giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/es/blog/comments/).
- Puntuación perfecta en Lighthouse (Rendimiento, Accesibilidad, Mejores Prácticas y SEO).
- Soporte de [KaTeX](https://katex.org/).
- Todo el JavaScript se puede [deshabilitar completamente](https://welpo.github.io/tabi/es/blog/javascript/).
- [Skins personalizables](https://welpo.github.io/tabi/es/blog/customise-tabi/).
- [Feed estilizado](https://welpo.github.io/tabi/es/atom.xml).
- [Página de proyectos](https://welpo.github.io/tabi/es/projects/).
- [Página de archivo](https://welpo.github.io/tabi/es/archive/).
- [Tabla de contenido](https://welpo.github.io/tabi/es/blog/toc/).
- Etiquetas.
- Enlaces sociales.
- Diseño responsive.
- Resaltado sintáctico de código.
- [Cabeceras de seguridad personalizables](https://welpo.github.io/tabi/es/blog/security/).
- [Shortcodes personalizados](https://welpo.github.io/tabi/es/blog/shortcodes/).
- [X] [Soporte multilingüe completo](https://welpo.github.io/tabi/es/blog/faq-languages/#como-gestiona-tabi-el-soporte-multilingue). Añade tantos idiomas como desees.
- [X] [Establece cualquier idioma como predeterminado](https://welpo.github.io/tabi/es/blog/faq-languages/#como-establezco-el-idioma-predeterminado-de-mi-sitio). Configura tu sitio en chino, español, francés, hindi… o cualquier [otro idioma compatible](https://github.com/welpo/tabi/tree/main/i18n). La interfaz del tema se traducirá en consecuencia.
- [X] Temas claros y oscuros. Se adapta a la configuración del sistema operativo, con un interruptor en la barra de navegación.
- [X] Soporte para [comentarios usando giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/es/blog/comments/).
- [X] Puntuación perfecta en Lighthouse (Rendimiento, Accesibilidad, Mejores Prácticas y SEO).
- [X] [Integración con repositorios remotos](https://welpo.github.io/tabi/es/mastering-tabi-settings/#integracion-con-repositorios-git) en GitHub, GitLab, Gitea y Codeberg para el historial de commits y mostrar el código fuente del sitio.
- [X] [Tarjetas para redes sociales](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tarjetas-para-redes-sociales).
- [X] Soporte de [KaTeX](https://katex.org/).
- [X] Todo el JavaScript se puede [deshabilitar completamente](https://welpo.github.io/tabi/es/blog/javascript/).
- [X] [Skins personalizables](https://welpo.github.io/tabi/es/blog/customise-tabi/).
- [X] [Feed estilizado](https://welpo.github.io/tabi/es/atom.xml).
- [X] [Botones de navegación rápida](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#botones-de-navegacion-rapida).
- [X] [Enlaces de retroceso para notas al pie](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlaces-de-retorno-en-notas-al-pie).
- [X] [Botón de copiar para bloques de código](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#boton-de-copiar-en-bloques-de-codigo).
- [X] [URL canónicas personalizables](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#url-canonica).
- [X] [Página de proyectos](https://welpo.github.io/tabi/es/projects/).
- [X] [Página de archivo](https://welpo.github.io/tabi/es/archive/).
- [X] [Tabla de contenidos personalizable](https://welpo.github.io/tabi/es/blog/toc/).
- [X] [Codificación de correo](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#encoded-email) para protección contra spam.
- [X] [Etiquetas](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tags).
- [X] [Enlaces sociales](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iconos-de-redes-sociales).
- [X] [Aviso de derechos de autor personalizado](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#copyright).
- [X] Diseño responsive.
- [X] Resaltado de sintaxis de código con colores basados en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
- [X] [Cabeceras de seguridad personalizables](https://welpo.github.io/tabi/es/blog/security/).
- [X] [Shortcodes personalizados](https://welpo.github.io/tabi/es/blog/shortcodes/).
## Prácticas de desarrollo

45
content/projects/tabi.md
Unescape Escape View File

@ -5,6 +5,7 @@ weight = 1
[extra]
local_image = "img/tabi.webp"
canonical_url = "https://osc.garden/projects/tabi/"
social_media_card = "img/social_cards/projects_tabi.jpg"
+++
@ -16,24 +17,32 @@ social_media_card = "img/social_cards/projects_tabi.jpg"
## Features
- [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish.
- [Set any language as default](https://welpo.github.io/tabi/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Set your base site to Chinese, Spanish, French, Hindi… or any [other supported language](https://github.com/welpo/tabi/tree/main/i18n). The theme's interface will be translated accordingly.
- Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
- Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
- Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
- [KaTeX](https://katex.org/) support.
- All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/).
- [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
- [Stylized feed](https://welpo.github.io/tabi/atom.xml).
- [Projects page](https://welpo.github.io/tabi/projects/).
- [Archive page](https://welpo.github.io/tabi/archive/).
- [Table of Contents](https://welpo.github.io/tabi/blog/toc/).
- Tags.
- Social links.
- Responsive design.
- Code syntax highlighting.
- [Customizable secure headers](https://welpo.github.io/tabi/blog/security/).
- [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/).
- [X] [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish.
- [X] [Set any language as default](https://welpo.github.io/tabi/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Set your base site to Chinese, Spanish, French, Hindi… or any [other supported language](/i18n). The theme's interface will be translated accordingly.
- [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
- [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
- [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
- [X] [Integration with remote repositories](https://welpo.github.io/tabi/mastering-tabi-settings/#git-repository-integration) on GitHub, GitLab, Gitea & Codeberg for commit history and showing the site source.
- [X] [Social media cards](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards).
- [X] [KaTeX](https://katex.org/) support for mathematical notation.
- [X] All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/).
- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
- [X] [Stylized feed](https://welpo.github.io/tabi/atom.xml).
- [X] [Quick navigation buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons).
- [X] [Footnote backlinks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footnote-backlinks).
- [X] [Copy button for code blocks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks).
- [X] [Custom canonical URLs](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url).
- [X] [Projects page](https://welpo.github.io/tabi/projects/).
- [X] [Archive page](https://welpo.github.io/tabi/archive/).
- [X] [Customizable Table of Contents](https://welpo.github.io/tabi/blog/toc/).
- [X] [Mail encoding](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email) for spam protection.
- [X] [Tags](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags).
- [X] [Social links](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons).
- [X] [Custom copyright notice](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright).
- [X] Responsive design.
- [X] Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
- [X] [Customizable secure headers](https://welpo.github.io/tabi/blog/security/).
- [X] [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/).
## Development Practices

BIN
static/img/browser_theme_colour_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/img/browser_theme_colour_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/img/commit_history_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/img/commit_history_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
static/img/copy_button_on_code_blocks_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/img/copy_button_on_code_blocks_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/img/copyright_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/img/copyright_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/img/footnote_backlinks_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
static/img/footnote_backlinks_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
static/img/header_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/img/header_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
static/img/quick_navigation_buttons_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/img/quick_navigation_buttons_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/img/see_changes_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/img/see_changes_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/img/site_source_dark.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/img/site_source_light.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/img/with_social_media_card.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

19
theme.toml
Unescape Escape View File

@ -19,6 +19,9 @@ homepage = "https://osc.garden"
# be merged with user data, some kind of prefix or nesting is preferable
# Use snake_casing to be consistent with the rest of Zola
[extra]
# Check out the documentation (or the comments below) to learn how to customise tabi:
# https://welpo.github.io/tabi/blog/mastering-tabi-settings/
# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
# Also enables automatic switching based on user's OS-level theme settings.
# If disabled, your site will only use the theme specified in the `default_theme` variable.
@ -67,34 +70,34 @@ remote_repository_git_platform = "auto" # Defaults to "auto".
# Branch in the repo hosting the Zola site.
remote_repository_branch = "main" # Defaults to "main".
# Show a link to the commit history of updated posts, right next to the last updated date.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
show_remote_changes = true # Defaults to true.
# Show a link to the repository of the site, right next to the "Powered by Zola & tabi" text.
show_remote_source = true # Defaults to true.
# Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
copy_button = true
# Show the reading time of a page.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
show_reading_time = true
# Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
footnote_backlinks = false
# Enable KaTeX for all posts.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
katex = false
# Quick navigation buttons.
# Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
quick_navigation_buttons = false
# Add a Table of Contents to all posts, right below the title and metadata.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
# toc = false
# Date format used when listing posts (main page, /blog section, tag posts list…)
@ -120,7 +123,7 @@ invert_title_order = false
# favicon_emoji = "🌱"
# Path to the fallback image for social media cards (the preview image shown when sharing a link on WhatsApp, LinkedIn…).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
# Learn how to create these images in batch and automatically:
# https://osc.garden/blog/automating-social-media-cards-zola/
# social_media_card = "img/social_cards/index.jpg"

Write Preview
Loading…
Cancel
Save