tabi/es/blog/mastering-tabi-settings/index.html
2025-11-22 16:30:18 +00:00

140 lines
No EOL
197 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=es><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Domina la configuración de tabi: guía completa</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=3716ab3457d2dd050b3c" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Descubre las múltiples maneras en que puedes personalizar tabi." name=description><meta content="Descubre las múltiples maneras en que puedes personalizar tabi." property=og:description><meta content="Domina la configuración de tabi: guía completa" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg?h=e97c96a84451b325c467" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg?h=e97c96a84451b325c467" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/ hreflang=en rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/ hreflang=es rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/ hreflang=ca rel=alternate><meta content=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunrStemmerSupport.min.js></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunr.es.min.js></script><body><a href=#main-content id=skip-link>Saltar al contenido</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/es/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/archive/>archivo </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/tags/>etiquetas </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/projects/>proyectos </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Haz clic o usa $SHORTCUT para abrir la búsqueda" class="search-icon interactive-icon" title="Haz clic o usa $SHORTCUT para abrir la búsqueda" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Selección de idioma" title="Selección de idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Español<a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/mastering-tabi-settings/ lang=ar role=menuitem>العربية</a><a aria-label=English href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/ lang=en role=menuitem>English</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/ lang=ca role=menuitem>Català</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Cambiar a modo oscuro" title="Cambiar a modo oscuro/claro" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restablecer modo a configuración predeterminada" class="theme-resetter arrow" title="Restablecer modo a configuración predeterminada" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Domina la configuración de tabi: guía completa</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/></a><ul class=meta><li><time class=dt-published datetime=2023-09-18>18 sep 2023</time><li title="6263 palabras"><span aria-hidden=true class=separator></span>32 mins de lectura<li class=tag><span aria-hidden=true class=separator></span>Etiquetas: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/funcionalidad/>funcionalidad</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/tutorial/>tutorial</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/preguntas-frecuentes/>preguntas frecuentes</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-08-07>Actualizado el 7 ago 2025</time><li><span aria-hidden=true class=separator></span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/mastering-tabi-settings/index.es.md>Ver cambios</a></ul><p class=p-summary hidden>Descubre las múltiples maneras en que puedes personalizar tabi.<section class="e-content body"><p>Esta es la guía completa sobre la configuración en tabi. Si tienes alguna pregunta, puedes <a class=external href=https://github.com/welpo/tabi/issues/new>abrir un issue en GitHub</a> o <a class=external href=https://github.com/welpo/tabi/discussions>inciar una discusión</a>.<details><summary><b>Tabla de contenido</b></summary> <div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>Jerarquía de configuración</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#busqueda>Búsqueda</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#consideraciones-para-usuarios-de-zola-0-17-x>Consideraciones para usuarios de Zola 0.17.X</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#detalles-de-implementacion>Detalles de implementación</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-multilingue>Soporte multilingüe</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#apariencia>Apariencia</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pagina-principal>Página principal</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#cabecera>Cabecera</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#listando-publicaciones-recientes>Listando publicaciones recientes</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#listado-de-proyectos>Listado de proyectos</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#interruptor-de-modo-claro-y-oscuro>Interruptor de modo claro y oscuro</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#modo-predeterminado-claro-oscuro>Modo predeterminado (claro/oscuro)</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pieles-personalizadas>Pieles personalizadas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#fuente-sans-serif-paloseco>Fuente sans serif (paloseco)</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indicador-de-enlaces-externos>Indicador de enlaces externos</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#estilos-css-personalizados>Estilos CSS personalizados</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#color-del-tema-del-navegador>Color del tema del navegador</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#etiquetas-compactas>Etiquetas compactas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#orden-de-las-etiquetas>Orden de las etiquetas</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#series>Series</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlace-para-saltar-a-las-publicaciones>Enlace para saltar a las publicaciones</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indexacion-de-paginas-de-series>Indexación de páginas de series</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#integracion-con-repositorios-git>Integración con repositorios Git</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#paginas>Páginas</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#proyectos>Proyectos</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#filtrar-proyectos>Filtrar proyectos</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#archivo>Archivo</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#etiquetas>Etiquetas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pagina-acerca-de>Página acerca de</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#seo>SEO</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#favicon>Favicon</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#favicon-de-emoji>Favicon de emoji</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#url-canonica>URL canónica</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tarjetas-para-redes-sociales>Tarjetas para redes sociales</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#creador-del-fediverso>Creador del fediverso</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#navegacion>Navegación</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#barra-de-navegacion>Barra de navegación</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#botones-de-navegacion-rapida>Botones de navegación rápida</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#table-de-contenido>Table de contenido</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlace-a-los-articulos-anterior-y-siguiente>Enlace a los artículos anterior y siguiente</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlaces-de-retorno-en-notas-al-pie>Enlaces de retorno en notas al pie</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#usabilidad>Usabilidad</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#boton-de-copiar-en-bloques-de-codigo>Botón de copiar en bloques de código</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#nombres-de-bloques-de-codigo-clicables>Nombres de bloques de código clicables</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#forzar-bloques-de-codigo-de-izquierda-a-derecha>Forzar bloques de código de izquierda a derecha</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-para-katex>Soporte para KaTeX</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-para-mermaid>Soporte para Mermaid</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#subconjunto-de-fuente-personalizada>Subconjunto de fuente personalizada</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#contenido-completo-en-el-feed>Contenido completo en el feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#ocultar-contenido-del-feed>Ocultar contenido del feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#añadir-comentarios>Comentarios</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iine>Botones de iine</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#analisis-web>Análisis web</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pie-de-pagina>Pie de página</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iconos-de-redes-sociales>Iconos de redes sociales</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#icono-de-feed>Icono de feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#menu-de-pie-de-pagina>Menú de pie de página</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#copyright>Copyright</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#metadatos>Metadatos</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#mostrar-autoria>Mostrar autoría</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tiempo-de-lectura>Tiempo de lectura</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#mostrar-la-fecha>Mostrar la fecha</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#formato-de-fecha>Formato de fecha</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#formatos-de-fecha-por-idioma>Formatos de fecha por idioma</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#separador-personalizado>Separador personalizado</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#orden-del-titulo>Orden del título</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#seguridad>Seguridad</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#correo-electronico-codificado>Correo electrónico codificado</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#csp-content-security-policy>CSP (Content Security Policy)</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indieweb>Indieweb</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#webmentions>Webmentions</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#h-card-representativa>h-card representativa</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#extendiendo-elementos-html-en-tabi>Extendiendo elementos HTML en tabi</a></ul></div></details><h2 id=jerarquia-de-configuracion><a aria-label="Anchor link for: jerarquia-de-configuracion" class="header-anchor no-hover-padding" href=#jerarquia-de-configuracion><span aria-hidden=true class=link-icon></span></a> Jerarquía de configuración</h2><p>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:<ol><li><strong>Configuraciones globales</strong>: Estas son las configuraciones que se aplican a todo tu sitio. Se establecen en <code>config.toml</code>.<li><strong>Configuraciones de sección</strong>: Estas son las configuraciones que se aplican a una sección de tu sitio (por ejemplo, <code>/blog</code> o <code>/projects</code>). Se establecen en la metainformación del archivo <code>_index.md</code> de la sección.<li><strong>Configuración de la página «padre»</strong>: Para páginas anidadas (páginas dentro de páginas), estas son las configuraciones de la página que las contiene.<li><strong>Configuraciones de página</strong>: Estas son las configuraciones que se aplican a una sola página. Se establecen en la metainformación de la página.</ol><p>En todos los casos, las opciones de tabi se establecen en la sección <code>[extra]</code>.<p>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 <code>página > página padre/sección > config.toml</code>.<hr><h2 id=busqueda><a aria-label="Anchor link for: busqueda" class="header-anchor no-hover-padding" href=#busqueda><span aria-hidden=true class=link-icon></span></a> Búsqueda</h2><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>tabi soporta búsqueda local accesible y multilingüe con <a class=external href=http://elasticlunr.com/>Elasticlunr</a>. Para activarla, necesitas:<ol><li>Establecer un <code>default_language</code> en <code>config.toml</code>.<li>Establecer <code>build_search_index = true</code>.<li>Opcionalmente, configurar la sección <code>[search]</code>.</ol><p>Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">base_url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://example.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">default_language</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>en<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">build_search_index</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">search</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">index_format</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>elasticlunr_json<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> O el menos eficiente "elasticlunr_javascript".</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">include_title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">include_description</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">include_path</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">include_content</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><p><strong>Nota</strong>: para soporte de búsqueda en Chino/Japonés, necesitas usar una <a class=external href=https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55>build personalizada de Zola</a>.<h3 id=consideraciones-para-usuarios-de-zola-0-17-x><a aria-label="Anchor link for: consideraciones-para-usuarios-de-zola-0-17-x" class="header-anchor no-hover-padding" href=#consideraciones-para-usuarios-de-zola-0-17-x><span aria-hidden=true class=link-icon></span></a> Consideraciones para usuarios de Zola 0.17.X</h3><p>Zola 0.17.X no proporciona acceso a la variable <code>search.index_format</code> (<a class=external href=https://github.com/getzola/zola/issues/2165>reporte del bug</a>). Al usar tabi, se asume el uso del índice JSON, que es más eficiente. Sin embargo, debido a <a class=external href=https://github.com/getzola/zola/issues/2193>otro bug</a> solucionado en 0.18.0, el índice JSON para sitios multilingües no se genera correctamente.<p>Los usuarios con versiones de Zola anteriores a 0.18.0 que quieran usar el índice JavaScript necesitan establecer la variable <code>index_format</code> en dos lugares:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">search</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">index_format</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>elasticlunr_javascript<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">index_format</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>elasticlunr_javascript<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Esto asegura que tabi cargue los archivos correctos. Recomendamos actualizar a Zola 0.18.0 o posterior para una funcionalidad óptima.<h3 id=detalles-de-implementacion><a aria-label="Anchor link for: detalles-de-implementacion" class="header-anchor no-hover-padding" href=#detalles-de-implementacion><span aria-hidden=true class=link-icon></span></a> Detalles de implementación</h3><p>Para detalles técnicos sobre la implementación de la búsqueda en tabi, incluyendo cuándo se carga el índice, características de accesibilidad y otros detalles, consulta el <a class=external href=https://github.com/welpo/tabi/pull/250>Pull Request #250</a>.<hr><h2 id=soporte-multilingue><a aria-label="Anchor link for: soporte-multilingue" class="header-anchor no-hover-padding" href=#soporte-multilingue><span aria-hidden=true class=link-icon></span></a> Soporte multilingüe</h2><p>tabi ofrece soporte multilingüe completo para tu sitio Zola, desde configurar un idioma predeterminado hasta añadir todos los que desees. Consulta la <a href=https://welpo.github.io/tabi/es/blog/faq-languages/>preguntas frecuentes sobre idiomas</a> para más información.<hr><h2 id=apariencia><a aria-label="Anchor link for: apariencia" class="header-anchor no-hover-padding" href=#apariencia><span aria-hidden=true class=link-icon></span></a> Apariencia</h2><h3 id=pagina-principal><a aria-label="Anchor link for: pagina-principal" class="header-anchor no-hover-padding" href=#pagina-principal><span aria-hidden=true class=link-icon></span></a> Página principal</h3><p>La <a href=/>página principal</a> de esta demo tiene un encabezado con una imagen, un título y una descripción:</p><img alt="Encabezado de la página principal" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/header_light.webp?h=fd4a8c167eabd93f4a61" class=img-light loading=lazy><img alt="Encabezado de la página principal" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/header_dark.webp?h=f8b65eedf799bdfbe437" class=img-dark loading=lazy><h4 id=cabecera><a aria-label="Anchor link for: cabecera" class="header-anchor no-hover-padding" href=#cabecera><span aria-hidden=true class=link-icon></span></a> Cabecera</h4><p>Para configurar la imagen y el título, puedes usar la variable <code>header</code> en el front matter del archivo <code>_index.md</code> de la sección. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">header</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>¡Hola! Soy tabi~<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>blog/mastering-tabi-settings/img/main.webp<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img_alt</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Óscar Fernández, el autor del tema<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span>
</span></code></pre><p>La descripción es contenido Markdown normal, escrito fuera del front matter.<h4 id=listando-publicaciones-recientes><a aria-label="Anchor link for: listando-publicaciones-recientes" class="header-anchor no-hover-padding" href=#listando-publicaciones-recientes><span aria-hidden=true class=link-icon></span></a> Listando publicaciones recientes</h4><p>Para mostrar publicaciones en la página principal, primero debes decidir de dónde se servirán: de la ruta raíz (<code>/</code>) o de un subdirectorio (por ejemplo, <code>/blog</code>).<p><strong>Opción A: Servir publicaciones desde la ruta raíz (<code>/</code>)</strong><p>Configura <code>paginate_by</code> en el front matter de tu archivo <code>content/_index.md</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Últimas publicaciones<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">sort_by</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>date<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">paginate_by</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">5</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Muestra 5 publicaciones por página.</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">header</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>¡Hola! Soy tabi~<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>img/main.webp<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img_alt</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Tu nombre<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span>
</span></code></pre><div class="admonition note"><div class="admonition-icon admonition-icon-note"></div><div class=admonition-content><strong class=admonition-title>NOTE</strong><p>La configuración <code>paginate_by</code> va en el front matter principal, no en la sección <code>[extra]</code>.</div></div><p><strong>Opción B: Servir publicaciones desde un subdirectorio (por ejemplo, <code>/blog</code>)</strong><p>Utiliza <code>section_path</code> en la sección <code>[extra]</code> de tu archivo <code>content/_index.md</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Últimas publicaciones<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">sort_by</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>date<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> No configures `paginate_by` aquí.</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">header</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>¡Hola! Soy tabi~<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>img/main.webp<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">img_alt</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Tu nombre<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">section_path</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>blog/_index.md<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Dónde encontrar tus publicaciones.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">max_posts</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">5</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Muestra hasta 5 publicaciones en la página principal.</span>
</span></code></pre><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>ALERTA</strong><p>No configures <code>paginate_by</code> y <code>section_path</code> a la vez. Estas configuraciones son mutuamente excluyentes y usarlas juntas puede resultar en que no se muestren publicaciones.</div></div><p>Notas adicionales:<ul><li>El <code>title</code> en el front matter establece el título que aparece sobre las publicaciones.<li>Usa la ruta completa al archivo <code>_index.md</code> de la sección para <code>section_path</code>. Usar <code>section_path = "blog/"</code> no funcionará.</ul><h5 id=fijar-publicaciones><a aria-label="Anchor link for: fijar-publicaciones" class="header-anchor no-hover-padding" href=#fijar-publicaciones><span aria-hidden=true class=link-icon></span></a> Fijar publicaciones</h5><p>Puedes fijar publicaciones para mantenerlas en la parte superior de la página principal. En esta demo, esta publicación está fijada, por lo que aparece primera con un icono y etiqueta de “fijada”:<div class=full-width><img alt="Entrada fijada" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/pinned_post_light.webp?h=6a9c0434f8e7b0b66d5f" class=img-light loading=lazy><img alt="Entrada fijada" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/pinned_post_dark.webp?h=0fe472212c3888878db7" class=img-dark loading=lazy></div><p>Las publicaciones fijadas se muestran primero, manteniendo su orden relativo según el <code>sort_by</code> de la sección, seguidas por el resto de las publicaciones.<p>Para fijar una publicación, añade lo siguiente a su front matter:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">pinned</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p>Este ajuste solo afecta a las páginas principales del sitio (como <code>/</code>, <code>/es/</code>, <code>/fr/</code>). Otras secciones como <code>blog/</code>, <code>tags/</code> o <code>archive/</code> muestran las publicaciones en su orden habitual.</div></div><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Cuando se utiliza la paginación (<code>paginate_by</code>), las publicaciones destacadas pueden aparecer dos veces: una vez en la parte superior de la primera página, y otra en su posición cronológica normal en páginas posteriores.</div></div><h5 id=mostrar-la-fecha-de-los-articulos-en-el-listado><a aria-label="Anchor link for: mostrar-la-fecha-de-los-articulos-en-el-listado" class="header-anchor no-hover-padding" href=#mostrar-la-fecha-de-los-articulos-en-el-listado><span aria-hidden=true class=link-icon></span></a> Mostrar la fecha de los artículos en el listado</h5><p>Por defecto, cuando se listan los artículos, se muestra la fecha de creación. Puedes configurar qué fecha(s) mostrar usando la opción <code>post_listing_date</code>. Configuraciones disponibles:<ul><li><code>date</code>: Muestra solo la fecha de publicación original del artículo (opción por defecto).<li><code>updated</code>: Muestra solo la fecha de la última actualización del artículo. Si no hay fecha de actualización, muestra la fecha de publicación original.<li><code>both</code>: Muestra tanto la fecha de publicación original como la fecha de la última actualización.</ul><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>Esta configuración sigue la jerarquía: puedes establecer un valor global en <code>config.toml</code> o configurarlo para secciones específicas en su archivo <code>_index.md</code>. En ambos casos, añádelo a la sección <code>[extra]</code>.</div></div><h4 id=listado-de-proyectos><a aria-label="Anchor link for: listado-de-proyectos" class="header-anchor no-hover-padding" href=#listado-de-proyectos><span aria-hidden=true class=link-icon></span></a> Listado de proyectos</h4><p>Puedes mostrar una selección de proyectos en tu página principal. Para hacer esto, primero necesitarás configurar el directorio <code>projects</code>.<p>Una vez hecho esto, configura la ruta a los proyectos en la sección <code>[extra]</code> de tu archivo <code>_index.md</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">projects_path</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>projects/_index.md<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Esto mostrará los 3 proyectos de mayor prioridad (con menor peso; el mismo orden que en Proyectos). Para mostrar más o menos proyectos, puedes establecer <code>max_projects</code> en <code>[extra]</code>.<p>Por defecto, la sección de proyectos se mostrará en la parte inferior de la página principal, bajo los posts. Si prefieres que aparezca en la parte superior, establece <code>show_projects_first = true</code>.<h3 id=interruptor-de-modo-claro-y-oscuro><a aria-label="Anchor link for: interruptor-de-modo-claro-y-oscuro" class="header-anchor no-hover-padding" href=#interruptor-de-modo-claro-y-oscuro><span aria-hidden=true class=link-icon></span></a> Interruptor de modo claro y oscuro</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>El interruptor de modo claro y oscuro (el icono de luna/sol en la esquina superior derecha) puede habilitarse configurando <code>theme_switcher = true</code> en <code>config.toml</code>.<h3 id=modo-predeterminado-claro-oscuro><a aria-label="Anchor link for: modo-predeterminado-claro-oscuro" class="header-anchor no-hover-padding" href=#modo-predeterminado-claro-oscuro><span aria-hidden=true class=link-icon></span></a> Modo predeterminado (claro/oscuro)</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>El tema predeterminado puede especificarse con la variable <code>default_theme</code>, que acepta <code>"dark"</code> o <code>"light"</code>. Si no lo especificas, el tema predeterminado será el tema del sistema.<h3 id=pieles-personalizadas><a aria-label="Anchor link for: pieles-personalizadas" class="header-anchor no-hover-padding" href=#pieles-personalizadas><span aria-hidden=true class=link-icon></span></a> Pieles personalizadas</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Las pieles de tabi cambian el color principal del sitio. Puedes configurar la piel en <code>config.toml</code> con <code>skin = "nombre_de_la_piel"</code>. Por ejemplo, <code>skin = "lavender"</code> se ve así (haz clic para cambiar entre modo claro y oscuro):<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-10648 type=checkbox><label class=image-label for=toggle-img-10648><div class=image-default><img alt="piel lavender en modo claro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_light.webp?h=bc19bff6623d41e30062" loading=lazy></div> <div class=image-toggled><img alt="piel lavender en modo oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_dark.webp?h=b3551cd0429844a258f9" loading=lazy></div></label></div><p>Explora las pieles disponibles y aprende cómo crear la tuya propia consultando <a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#skins>la documentación</a>.<h3 id=fuente-sans-serif-paloseco><a aria-label="Anchor link for: fuente-sans-serif-paloseco" class="header-anchor no-hover-padding" href=#fuente-sans-serif-paloseco><span aria-hidden=true class=link-icon></span></a> Fuente sans serif (paloseco)</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>tabi utiliza una fuente serif para los párrafos de los artículos (la que estás viendo ahora). Puedes cambiar a una fuente sans serif (la que ves en los encabezados/menú) en todo tu sitio configurando <code>override_serif_with_sans = true</code> en <code>config.toml</code>.<p>Haz clic en la imagen para comparar las fuentes:<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-74482 type=checkbox><label class=image-label for=toggle-img-74482><div class=image-default><img alt="Fuente serif" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/serif.webp?h=617377b8947f3e5b36a5" loading=lazy></div> <div class=image-toggled><img alt="Fuente sans-serif" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/sans-serif.webp?h=2681391a75bfd6310843" loading=lazy></div></label></div><h3 id=indicador-de-enlaces-externos><a aria-label="Anchor link for: indicador-de-enlaces-externos" class="header-anchor no-hover-padding" href=#indicador-de-enlaces-externos><span aria-hidden=true class=link-icon></span></a> Indicador de enlaces externos</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue Jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p>Requiere Zola 0.20.0 o posterior.</div></div><p>Si deseas añadir un icono a los enlaces externos, configura la sección <code>[markdown]</code> (no <code>[extra]</code>) en tu <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">markdown</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">external_links_class</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>external<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Esto añadirá un pequeño icono junto a los enlaces externos:<div class=full-width><img alt="Icono de enlace externo" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/external_link_light.webp?h=64dd0a1a6f4c5122865e" class=img-light loading=lazy><img alt="Icono de enlace externo" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/external_link_dark.webp?h=2a45251e8e76795b2ad6" class=img-dark loading=lazy></div><h3 id=estilos-css-personalizados><a aria-label="Anchor link for: estilos-css-personalizados" class="header-anchor no-hover-padding" href=#estilos-css-personalizados><span aria-hidden=true class=link-icon></span></a> Estilos CSS personalizados</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes cargar estilos CSS personalizados para todo el sitio o en páginas específicas utilizando <code>stylesheets</code>, que acepta una lista de rutas hacia archivos CSS. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">stylesheets</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>css/custom.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>css/another.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><h3 id=color-del-tema-del-navegador><a aria-label="Anchor link for: color-del-tema-del-navegador" class="header-anchor no-hover-padding" href=#color-del-tema-del-navegador><span aria-hidden=true class=link-icon></span></a> Color del tema del navegador</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>El color del tema del navegador es el color que aparece en la barra de pestañas del navegador:</p><img alt="pestañas con un tema de navegador de color" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/browser_theme_color_light.webp?h=e38d77767e51f3fb6232" class=img-light loading=lazy><img alt="pestañas con un tema de navegador de color" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp?h=d741cdd4ee3c4913284f" class=img-dark loading=lazy><p>Puedes establecerlo en <code>config.toml</code> como <code>browser_theme_color = "#087e96"</code>. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con <code>browser_theme_color = ["#ffffff", "#000000"]</code>. El primer color es para el modo claro, el segundo para el oscuro.<p>Esta variable acepta cualquier color CSS válido, así que puedes usar palabras clave (por ejemplo, <code>blue</code>), códigos hexadecimales (por ejemplo, <code>#087e96</code>) o valores RGB/HSL (por ejemplo, <code>rgb(8, 126, 150)</code>).<h3 id=etiquetas-compactas><a aria-label="Anchor link for: etiquetas-compactas" class="header-anchor no-hover-padding" href=#etiquetas-compactas><span aria-hidden=true class=link-icon></span></a> Etiquetas compactas</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, la <a href=/es/tags>página de etiquetas</a> muestra las etiquetas así:<p><a href=#>NombreEtiqueta</a> — n publicación[es]<p>Establecer <code>compact_tags = true</code> mostrará las mismas de este modo:<p><a href=#>NombreEtiqueta</a> <sup>n</sup><h3 id=orden-de-las-etiquetas><a aria-label="Anchor link for: orden-de-las-etiquetas" class="header-anchor no-hover-padding" href=#orden-de-las-etiquetas><span aria-hidden=true class=link-icon></span></a> Orden de las etiquetas</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, la <a href=/es/tags>página de etiquetas</a> ordena las etiquetas alfabéticamente, dada la configuración predeterminada de <code>tag_sorting = "name"</code>. Si configuras <code>tag_sorting = "frequency"</code>, se ordenarán según el número de publicaciones (de mayor a menor).<hr><h2 id=series><a aria-label="Anchor link for: series" class="header-anchor no-hover-padding" href=#series><span aria-hidden=true class=link-icon></span></a> Series</h2><p>Para una explicación detallada, consulta la <a href=https://welpo.github.io/tabi/es/blog/series/>documentación de series</a>.<h3 id=enlace-para-saltar-a-las-publicaciones><a aria-label="Anchor link for: enlace-para-saltar-a-las-publicaciones" class="header-anchor no-hover-padding" href=#enlace-para-saltar-a-las-publicaciones><span aria-hidden=true class=link-icon></span></a> Enlace para saltar a las publicaciones</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, aparece automáticamente un enlace “Saltar a publicaciones” junto al título de la serie cuando una serie tiene un contenido de más de 2000 caracteres:<div class=full-width><img alt="enlace para saltar a las publicaciones de la serie" src="https://welpo.github.io/tabi/blog/series/img/jump_to_series_posts_light.webp?h=36a55aa8486a48dcad54" class=img-light loading=lazy><img alt="enlace para saltar a las publicaciones de la serie" src="https://welpo.github.io/tabi/blog/series/img/jump_to_series_posts_dark.webp?h=b2050110d2b4ad3f8768" class=img-dark loading=lazy></div><p>Establece <code>show_jump_to_posts = true</code> para forzar la activación de la función y <code>show_jump_to_posts = false</code> para desactivarla.<h3 id=indexacion-de-paginas-de-series><a aria-label="Anchor link for: indexacion-de-paginas-de-series" class="header-anchor no-hover-padding" href=#indexacion-de-paginas-de-series><span aria-hidden=true class=link-icon></span></a> Indexación de páginas de series</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, las páginas de series se indexan (usando una indexación basada en 1) según el <code>sort_by</code> de la sección de series.<p>Establece <code>post_listing_index_reversed = true</code> para invertir el índice.<hr><h2 id=integracion-con-repositorios-git><a aria-label="Anchor link for: integracion-con-repositorios-git" class="header-anchor no-hover-padding" href=#integracion-con-repositorios-git><span aria-hidden=true class=link-icon></span></a> Integración con repositorios Git</h2><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>❓: <code>show_remote_source</code> sí sigue <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>la jerarquía</a> y puede configurarse en una página, sección o globalmente. El resto de las configuraciones solo pueden establecerse en <code>config.toml</code>.<p>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:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">remote_repository_url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://github.com/welpo/tabi<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">remote_repository_git_platform</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>auto<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">remote_repository_branch</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>main<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_remote_changes</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_remote_source</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><p>Esto habilita dos funciones:<ol><li><code>show_remote_source = true</code> añade un enlace al código fuente de tu sitio (tu <code>remote_repository_url</code>) que se mostrará en el pie de página:</ol><img alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/site_source_light.webp?h=74f40235aee4d653e751" class=img-light loading=lazy><img alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/site_source_dark.webp?h=693e5d39020685105021" class=img-dark loading=lazy><ol><li><code>show_remote_changes = true</code> añade un enlace «Ver cambios ↗» al historial de commits del artículo actualizado, al lado de la fecha de última actualización <sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup>:</ol><img alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_light.webp?h=615119d982424267b55f" class=img-light loading=lazy><img alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_dark.webp?h=b000b03652037b84eee4" class=img-dark loading=lazy><p>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:<div class=full-width><img alt="Historial de commits de un artículo" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/commit_history_light.webp?h=154a2997684117c8aa60" class=img-light loading=lazy><img alt="Historial de commits de un artículo" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/commit_history_dark.webp?h=57bb5c5d83f6442ba666" class=img-dark loading=lazy></div><hr><h2 id=paginas><a aria-label="Anchor link for: paginas" class="header-anchor no-hover-padding" href=#paginas><span aria-hidden=true class=link-icon></span></a> Páginas</h2><h3 id=proyectos><a aria-label="Anchor link for: proyectos" class="header-anchor no-hover-padding" href=#proyectos><span aria-hidden=true class=link-icon></span></a> Proyectos</h3><p>tabi tiene una plantilla integrada para proyectos. Para habilitarla, puedes crear un directorio en <code>content/projects/</code>. Allí, puedes crear un archivo <code>_index.md</code> con el siguiente contenido en el bloque de metadatos:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Proyectos<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">sort_by</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>weight<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">template</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>cards.html<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">insert_anchor_links</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>left<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_reading_time</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">quick_navigation_buttons</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><ul><li><code>title</code> es el título de la página.<li><code>sort_by</code> determina cómo se ordenan los proyectos. Puedes ordenar por «date», «update_date», «title», «title_bytes», «weight», «slug» o «none».<li><code>template = "cards.html"</code> establece la plantilla para renderizar la página de proyectos.<li><code>insert_anchor_links = "left"</code> añade enlaces ancla a los encabezados.<li><code>show_reading_time = false</code> oculta el tiempo estimado de lectura.<li><code>quick_navigation_buttons = true</code> muestra los botones de navegación rápida.</ul><p>Junto al archivo <code>_index.md</code>, puedes crear un archivo para cada proyecto. Por ejemplo, este es el bloque de metadatos para la página del proyecto <a href=https://welpo.github.io/tabi/es/projects/tabi/>tabi</a>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>tabi<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">description</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Un tema de Zola rápido, ligero y moderno con soporte multilingüe.<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">weight</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">1</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">local_image</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>img/tabi.webp<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><ul><li><code>title</code> es el título del proyecto.<li><code>description</code> es la descripción del proyecto.<li><code>weight</code> determina el orden en el que se muestran los proyectos. Cuanto menor sea el peso, más arriba aparecerá el proyecto.<li><code>local_image</code> es la ruta de la imagen del proyecto. Esta imagen se muestra en la página de proyectos.</ul><p>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 <code>link_to = "https://example.com"</code> en la sección <code>[extra]</code> del archivo <code>.md</code> del proyecto.<p>La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, <code>template = "info-page.html"</code>.<h4 id=filtrar-proyectos><a aria-label="Anchor link for: filtrar-proyectos" class="header-anchor no-hover-padding" href=#filtrar-proyectos><span aria-hidden=true class=link-icon></span></a> Filtrar proyectos</h4><p>Si agregas etiquetas a tus proyectos, verás un filtro de etiquetas:<div class=full-width><img alt="Página de proyectos con filtro de etiquetas" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp?h=60577452655a137490e2" class=img-light loading=lazy><img alt="Página de proyectos con filtro de etiquetas" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp?h=a40d6b40f5688a9d44bf" class=img-dark loading=lazy></div><p>El sistema de filtrado de etiquetas utiliza mejora progresiva:<ul><li>Sin JavaScript: Las etiquetas enlazan directamente a páginas de etiquetas dedicadas (por ejemplo, <code>/tags/nombre-etiqueta</code>).<li>Con JavaScript: Filtrado instantáneo, sincronización de URL (#nombre-etiqueta) y navegación por teclado.</ul><p>Para desactivar esta función, establece <code>enable_cards_tag_filtering = false</code> en la sección <code>[extra]</code> del archivo <code>projects/_index.md</code> o en <code>config.toml</code>.<div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>Para filtrar proyectos por etiquetas, necesitas establecer etiquetas en el front matter de cada proyecto. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>nombre del proyecto<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">weight</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">40</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">taxonomies</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">tags</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>etiqueta uno<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>etiqueta 2<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>tercera etiqueta<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre></div></div><h3 id=archivo><a aria-label="Anchor link for: archivo" class="header-anchor no-hover-padding" href=#archivo><span aria-hidden=true class=link-icon></span></a> Archivo</h3><p>Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en <code>content/archive/</code>. Allí, puedes crear un archivo <code>_index.md</code> con el siguiente encabezado:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Archivo<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">template</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>archive.html<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Por defecto, el archivo mostrará las publicaciones ubicadas en <code>blog/</code>. Para personalizar esto, puedes modificar la sección <code>[extra]</code> del archivo <code>_index.md</code>:<ul><li><p><strong>Para una sola ruta</strong>: Establece <code>section_path = "tu-ruta/"</code> para listar publicaciones de un directorio específico. Asegúrate de incluir la barra inclinada al final.</p><li><p><strong>Para múltiples rutas</strong>: Si deseas agregar publicaciones de varios directorios, <code>section_path</code> puede especificarse como una lista de rutas. Por ejemplo:</p> <pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">section_path</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>blog/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>notas/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>ruta-tres/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre></ul><p>El archivo muestra las publicaciones en orden cronológico inverso (las más recientes primero). Puedes invertir este orden estableciendo <code>archive_reverse = true</code> en la sección <code>[extra]</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">archive_reverse</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> muestra las publicaciones más antiguas primero</span>
</span></code></pre><div class="admonition note"><div class="admonition-icon admonition-icon-note"></div><div class=admonition-content><strong class=admonition-title>nota</strong><p>La página de Archivo sólo listará publicaciones que tengan fecha en su encabezado.</div></div><h3 id=etiquetas><a aria-label="Anchor link for: etiquetas" class="header-anchor no-hover-padding" href=#etiquetas><span aria-hidden=true class=link-icon></span></a> Etiquetas</h3><p>tabi tiene soporte integrado para etiquetas. Para habilitarlas, simplemente añade la taxonomía a tu <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">taxonomies</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>tags<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">feed</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>Luego, puedes añadir etiquetas a tus publicaciones agregándolas al array <code>tags</code> en el bloque de metadatos de tu publicación. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Los molinos de viento de mi vida: reflexiones de un escudero<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">date</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-other z-datetime z-toml">1605-01-16</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">description</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida.<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml">
</span><mark><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">taxonomies</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span></mark><mark><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">tags</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>personal<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>reflexiones<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></mark></code></pre><h3 id=pagina-acerca-de><a aria-label="Anchor link for: pagina-acerca-de" class="header-anchor no-hover-padding" href=#pagina-acerca-de><span aria-hidden=true class=link-icon></span></a> Página acerca de</h3><p>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 <code>info-page.html</code>.<p>Primero, crea un directorio dentro de <code>content/</code> con el nombre que prefieras. Por ejemplo, <code>content/pages/</code>. Luego, crea un archivo <code>_index.md</code> dentro de ese directorio. El archivo debería verse así:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">render = false
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">insert_anchor_links = "left"
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span></code></pre><ul><li><code>render = false</code> indica a Zola que no renderice la sección.<li><code>insert_anchor_links = "left"</code> añade enlaces ancla a los encabezados. Esto es opcional.</ul><p>Dentro del directorio, puedes crear cualquier cantidad de archivos <code>.md</code>.<p>En esta demo, la página <a href=/es/about/>Sobre mí</a> utiliza la plantilla <code>info-page.html</code>. El bloque de metadatos es el siguiente:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Sobre mí<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">template</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>info-page.html<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">path</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>about<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Fíjate cómo se establece <code>path = "about"</code>. Zola colocará la página en <code>$base_url/about/</code>. Si deseas que la página esté disponible en <code>/contacto/</code>, tendrías que establecer <code>path = "contacto"</code>.<p>La plantilla <code>info-page.html</code> también se puede utilizar para crear lading pages en la ruta raíz (<code>"/"</code>). Para hacerlo, el archivo <code>content/_index.md</code> debería verse así:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">title = "Título de la página"
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">template = "info-page.html"
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Contenido con Markdown.
</span></span></code></pre><hr><h2 id=seo><a aria-label="Anchor link for: seo" class="header-anchor no-hover-padding" href=#seo><span aria-hidden=true class=link-icon></span></a> SEO</h2><p>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.<h3 id=favicon><a aria-label="Anchor link for: favicon" class="header-anchor no-hover-padding" href=#favicon><span aria-hidden=true class=link-icon></span></a> Favicon</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>El favicon es el pequeño icono que aparece en la pestaña del navegador. Puedes establecerlo en <code>config.toml</code> con <code>favicon = "img/favicon.png"</code>.<h3 id=favicon-de-emoji><a aria-label="Anchor link for: favicon-de-emoji" class="header-anchor no-hover-padding" href=#favicon-de-emoji><span aria-hidden=true class=link-icon></span></a> Favicon de emoji</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>También puedes establecer un emoji como tu favicon con <code>favicon_emoji</code>. Por ejemplo, <code>favicon_emoji = "👾"</code>.<p>Nota: Algunos navegadores no admiten favicons de emoji. Consulta la tabla de compatibilidad en <a class=external href=https://caniuse.com/link-icon-svg>caniuse</a>.<h3 id=url-canonica><a aria-label="Anchor link for: url-canonica" class="header-anchor no-hover-padding" href=#url-canonica><span aria-hidden=true class=link-icon></span></a> URL canónica</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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.<p>Por defecto, la URL canónica es la URL de la página en la que te encuentras. Sin embargo, puedes cambiar esto configurando <code>canonical_url</code> en el front matter de tu página o sección.<p>Si tienes un sitio con una estructura idéntica y contenido coincidente, puedes configurar <code>base_canonical_url</code> en tu <code>config.toml</code>. La URL canónica se creará reemplazando el <code>$base_url</code> de la URL actual con el <code>$base_canonical_url</code> que establezcas.<p>Por ejemplo, si configuras <code>base_canonical_url = "https://example.com"</code>, la URL canónica de la página <code>$base_url/blog/post1</code> será <code>https://example.com/blog/post1</code>. Esto es útil si tienes un sitio con varios dominios que comparten el mismo contenido.<p><strong>Nota</strong>: para asegurarte de que la URL canónica sea correcta, probablemente sea mejor configurar <code>canonical_url</code> individualmente para cada página.<h3 id=tarjetas-para-redes-sociales><a aria-label="Anchor link for: tarjetas-para-redes-sociales" class="header-anchor no-hover-padding" href=#tarjetas-para-redes-sociales><span aria-hidden=true class=link-icon></span></a> Tarjetas para redes sociales</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Las tarjetas para redes sociales son las imágenes que se muestran cuando compartes un enlace en redes sociales:</p><img alt="Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/with_social_media_card.webp?h=067eb79a2fa1a54ffdc6" class=dimmable-image height=440 loading=lazy width=439><p>Puedes establecer la imagen para redes sociales con <code>social_media_card = "img/social_media_card.png"</code>.<p>Puedes especificar rutas tanto relativas como absolutas.<ul><li><p><strong>Ruta relativa</strong>: Coloca la imagen en la misma carpeta que tu entrada de blog y especifica su nombre. Por ejemplo, <code>social_media_card = "relative_image.png"</code>.</p><li><p><strong>Ruta absoluta</strong>: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, <code>social_media_card = "img/absolute_image.png"</code>.</p></ul><p>Si ambas rutas, relativa y absoluta, son válidas, la ruta relativa tendrá prioridad.<p>Dado que sigue la <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>jerarquía</a>, 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 <code>config.toml</code>, se usará la imagen global.<div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>CONSEJO</strong><p>Automatiza su creación con un <a class=external href=https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola>script</a>: <a class=external href=https://osc.garden/es/blog/automating-social-media-cards-zola/>Automatizando las vistas previas de los enlaces con Zola</a>.</div></div><h3 id=creador-del-fediverso><a aria-label="Anchor link for: creador-del-fediverso" class="header-anchor no-hover-padding" href=#creador-del-fediverso><span aria-hidden=true class=link-icon></span></a> Creador del fediverso</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes mostrar tu perfil del fediverso en las vistas previas de enlaces de Mastodon configurando la variable <code>fediverse_creator</code> en tu <code>config.toml</code>. Por ejemplo, para @username@example.com, usa:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">fediverse_creator</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">handle</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>username<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domain</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>example.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span>
</span></code></pre><hr><h2 id=navegacion><a aria-label="Anchor link for: navegacion" class="header-anchor no-hover-padding" href=#navegacion><span aria-hidden=true class=link-icon></span></a> Navegación</h2><h3 id=barra-de-navegacion><a aria-label="Anchor link for: barra-de-navegacion" class="header-anchor no-hover-padding" href=#barra-de-navegacion><span aria-hidden=true class=link-icon></span></a> Barra de navegación</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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 <code>menu</code> en <code>config.toml</code>.<p>Soporta links relativos para páginas internas y links absolutos para enlaces externos. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">menu</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>blog<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>blog<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>archivo<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>archive<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>etiquetas<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>tags<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>proyectos<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>projects<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>acerca de<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>about<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>github<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://github.com/welpo/tabi<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><h3 id=botones-de-navegacion-rapida><a aria-label="Anchor link for: botones-de-navegacion-rapida" class="header-anchor no-hover-padding" href=#botones-de-navegacion-rapida><span aria-hidden=true class=link-icon></span></a> Botones de navegación rápida</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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í:</p><img alt="Botones de navegación rápida" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp?h=dd381236eabee5581eaa" class=img-light loading=lazy><img alt="Botones de navegación rápida" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp?h=5e5e7d2504aab0b9a104" class=img-dark loading=lazy><p>Para activarlos, establece <code>quick_navigation_buttons = true</code>.<h3 id=table-de-contenido><a aria-label="Anchor link for: table-de-contenido" class="header-anchor no-hover-padding" href=#table-de-contenido><span aria-hidden=true class=link-icon></span></a> Table de contenido</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Habilita el índice de contenidos justo debajo del título y metadatos del artículo con <code>toc = true</code>.<p>Para saber más sobre cómo personalizarlo, consulta <a href=https://welpo.github.io/tabi/es/blog/toc/>la documentación sobre la Tabla de contenido</a>.<h3 id=enlace-a-los-articulos-anterior-y-siguiente><a aria-label="Anchor link for: enlace-a-los-articulos-anterior-y-siguiente" class="header-anchor no-hover-padding" href=#enlace-a-los-articulos-anterior-y-siguiente><span aria-hidden=true class=link-icon></span></a> Enlace a los artículos anterior y siguiente</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Muestra enlaces a los artículos anterior y siguiente en la parte inferior de los posts. Se ve así:<div class=full-width><img alt="Enlaces a los artículos anterior y siguiente" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp?h=13a1c61619d1f136e7c5" class=img-light loading=lazy><img alt="Enlaces a los artículos anterior y siguiente" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp?h=6745eb3a9b5e268a26e1" class=img-dark loading=lazy></div><p>Para activar esta función, configura <code>show_previous_next_article_links = true</code> y asegúrate de que tu sección tiene <code>sort_by</code> (por ejemplo, <code>sort_by = "date"</code>).<p>Por defecto, los artículos siguientes estarán en el lado izquierdo de la página y los artículos anteriores en el lado derecho. Para invertir el orden (artículos siguientes en el lado derecho y artículos anteriores en el lado izquierdo), establece <code>invert_previous_next_article_links = true</code>.<p>Por defecto, esta sección de navegación tendrá el ancho completo del sitio (igual que la barra de navegación de la parte superior). Para hacerla más estrecha, coincidiendo con el ancho del artículo, establece <code>previous_next_article_links_full_width = false</code>.<p>Todas estas configuraciones siguen la jerarquía.<h3 id=enlaces-de-retorno-en-notas-al-pie><a aria-label="Anchor link for: enlaces-de-retorno-en-notas-al-pie" class="header-anchor no-hover-padding" href=#enlaces-de-retorno-en-notas-al-pie><span aria-hidden=true class=link-icon></span></a> Enlaces de retorno en notas al pie</h3><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>ADVERTENCIA DE DEPRECACIÓN</strong><p>Zola v0.19.0 y posterior puede hacer esto de forma nativa. Establece <code>bottom_footnotes = true</code> en la sección <code>[markdown]</code> de tu configuración.</div></div><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Establecer <code>footnote_backlinks = true</code> añadirá enlaces de retorno a las notas al pie de tus publicaciones, como este:<div class=full-width><img alt="Enlaces de retorno en notas al pie" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp?h=8ed45b97e03cedda3ed2" class=img-light loading=lazy><img alt="Enlaces de retorno en notas al pie" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp?h=9ba9f7115e6a8b10cad4" class=img-dark loading=lazy></div><p>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.<hr><h2 id=usabilidad><a aria-label="Anchor link for: usabilidad" class="header-anchor no-hover-padding" href=#usabilidad><span aria-hidden=true class=link-icon></span></a> Usabilidad</h2><h3 id=boton-de-copiar-en-bloques-de-codigo><a aria-label="Anchor link for: boton-de-copiar-en-bloques-de-codigo" class="header-anchor no-hover-padding" href=#boton-de-copiar-en-bloques-de-codigo><span aria-hidden=true class=link-icon></span></a> Botón de copiar en bloques de código</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Establecer <code>copy_button = true</code> añadirá un pequeño botón de copiar en la parte superior derecha de los bloques de código, como este:<div class=full-width><img alt="Botón de copiar en bloques de código" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp?h=a32845d6fbed8b7166e5" class=img-light loading=lazy><img alt="Botón de copiar en bloques de código" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp?h=81b4d21b182bea0f9e91" class=img-dark loading=lazy></div><h3 id=nombres-de-bloques-de-codigo-clicables><a aria-label="Anchor link for: nombres-de-bloques-de-codigo-clicables" class="header-anchor no-hover-padding" href=#nombres-de-bloques-de-codigo-clicables><span aria-hidden=true class=link-icon></span></a> Nombres de bloques de código clicables</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Establece <code>code_block_name_links = true</code> para habilitan los enlaces clickables en los nombres de bloques de código. Consulta la <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#mostrar-ruta-o-url>documentación</a> para ver ejemplos y uso.<h3 id=forzar-bloques-de-codigo-de-izquierda-a-derecha><a aria-label="Anchor link for: forzar-bloques-de-codigo-de-izquierda-a-derecha" class="header-anchor no-hover-padding" href=#forzar-bloques-de-codigo-de-izquierda-a-derecha><span aria-hidden=true class=link-icon></span></a> Forzar bloques de código de izquierda a derecha</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, los bloques de código se renderizan de izquierda a derecha, independientemente de la dirección general del texto. Establece <code>force_codeblock_ltr = false</code> para permitir que los bloques de código sigan la dirección del documento. Útil para idiomas de derecha a izquierda que necesitan bloques de código de derecha a izquierda.<h3 id=soporte-para-katex><a aria-label="Anchor link for: soporte-para-katex" class="header-anchor no-hover-padding" href=#soporte-para-katex><span aria-hidden=true class=link-icon></span></a> Soporte para KaTeX</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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 <code>katex = true</code>. Mira cómo se ve en tabi <a href=/es/blog/markdown/#katex>aquí</a>.<h3 id=soporte-para-mermaid><a aria-label="Anchor link for: soporte-para-mermaid" class="header-anchor no-hover-padding" href=#soporte-para-mermaid><span aria-hidden=true class=link-icon></span></a> Soporte para Mermaid</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p><a class=external href=https://github.com/mermaid-js/mermaid>Mermaid</a> es una herramienta de diagramación y gráficos basada en JavaScript. Puedes activarla con <code>mermaid = true</code>.<p>Por defecto, la biblioteca Mermaid se sirve localmente. Si prefieres usar un CDN, establece <code>serve_local_mermaid = false</code> en <code>config.toml</code>. El uso de un CDN servirá la versión más reciente de Mermaid; la opción local servirá la versión incluida con tabi.<p>Consulta la <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid>documentación de Mermaid</a> para instrucciones de uso y ejemplos.<h3 id=subconjunto-de-fuente-personalizada><a aria-label="Anchor link for: subconjunto-de-fuente-personalizada" class="header-anchor no-hover-padding" href=#subconjunto-de-fuente-personalizada><span aria-hidden=true class=link-icon></span></a> Subconjunto de fuente personalizada</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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, o desactivarlo por completo si no estás usando una fuente personalizada en tu tema.<p>Puedes crear un subconjunto personalizado adaptado a tu sitio, guardarlo como <code>static/custom_subset.css</code>, y hacer que se cargue con <code>custom_subset = true</code>.<p>Para desactivar el subconjunto, puedes usar <code>enable_subset = false</code>.<p>Para obtener más información, incluyendo instrucciones sobre cómo crear un subconjunto personalizado, consulta la <a href=https://welpo.github.io/tabi/es/blog/custom-font-subset/>documentación</a>.<h3 id=contenido-completo-en-el-feed><a aria-label="Anchor link for: contenido-completo-en-el-feed" class="header-anchor no-hover-padding" href=#contenido-completo-en-el-feed><span aria-hidden=true class=link-icon></span></a> Contenido completo en el feed</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, el feed Atom solo contiene el resumen/descripción de tus publicaciones. Puedes incluir el contenido completo de las publicaciones estableciendo <code>full_content_in_feed = true</code> en <code>config.toml</code>.<h3 id=ocultar-contenido-del-feed><a aria-label="Anchor link for: ocultar-contenido-del-feed" class="header-anchor no-hover-padding" href=#ocultar-contenido-del-feed><span aria-hidden=true class=link-icon></span></a> Ocultar contenido del feed</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes controlar cómo aparece el contenido en los feeds usando dos configuraciones:<ul><li><code>hide_from_feed = true</code>: Oculta el contenido de todos los feeds (feed principal, feeds de sección y feeds de etiquetas)<li><code>hide_from_main_feed = true</code>: Oculta el contenido solo del feed principal mientras lo mantiene visible en los feeds de sección y de etiquetas</ul><h3 id=añadir-comentarios><a aria-label="Anchor link for: añadir-comentarios" class="header-anchor no-hover-padding" href=#añadir-comentarios><span aria-hidden=true class=link-icon></span></a> Comentarios</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Para activar los comentarios en una página, establece el nombre del sistema como <code>true</code> en el front matter. Por ejemplo, <code>utterances = true</code>.<p>Si quieres activar los comentarios de forma global, puedes hacerlo estableciendo <code>enabled_for_all_posts = true</code> en la sección apropiada de tu <code>config.toml</code> (por ejemplo, en <code>[extra.giscus]</code>).<p>Si has activado un sistema globalmente, pero quieres desactivarlo en una página específica, puedes hacerlo estableciendo el nombre del sistema como <code>false</code> en el front matter. Por ejemplo, <code>utterances = false</code>.<p>Lee la <a href=https://welpo.github.io/tabi/es/blog/comments/>documentación</a> para obtener más información sobre los sistemas disponibles y su configuración.<h3 id=iine><a aria-label="Anchor link for: iine" class="header-anchor no-hover-padding" href=#iine><span aria-hidden=true class=link-icon></span></a> Botones de iine</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>tabi soporta botones de <a class=external href=https://iine.to/>iine</a> para mostrar apreciación anónima por tu contenido. Estos botones centrados en la privacidad funcionan sin JavaScript y no rastrean usuarios.<p>Para activar los botones iine globalmente:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">iine</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><p>Puedes personalizar el icono usado en los botones (esta configuración sigue la jerarquía):<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">iine_icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>thumbs_up<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Opciones: "heart", "thumbs_up", "upvote", o cualquier emoji</span>
</span></code></pre><p>Para sitios multilingües, puedes unificar los conteos de likes entre versiones en diferentes idiomas del mismo contenido (configuración solo de config; valor predeterminado: <code>true</code>):<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">iine_unified_languages</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Los likes en /es/blog/hello/ cuentan hacia /blog/hello/</span>
</span></code></pre><p>También puedes activar los botones iine en páginas o secciones individuales estableciendo <code>iine = true</code> en su front matter, o personalizar el icono con <code>iine_icon = "🚀"</code>.<h3 id=analisis-web><a aria-label="Anchor link for: analisis-web" class="header-anchor no-hover-padding" href=#analisis-web><span aria-hidden=true class=link-icon></span></a> Análisis web</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue Jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>tabi ofrece soporte para 3 sistemas de análisis web que respetan la privacidad: <a class=external href=https://plausible.io/>Plausible</a>, <a class=external href=https://www.goatcounter.com/>GoatCounter</a> y <a class=external href=https://umami.is/>Umami</a>.<p>Puedes configurarlos en la sección <code>[extra.analytics]</code> de tu archivo <code>config.toml</code>.<ul><li><p><code>service</code>: el servicio a utilizar. Las opciones disponibles son <code>"goatcounter"</code>, <code>"umami"</code>, y <code>"plausible"</code>.</p><li><p><code>id</code>: el identificador único para tu servicio de análisis. Esto varía según el servicio:</p> <ul><li>Para GoatCounter, es el código elegido durante el registro. Instancias auto-alojadas de GoatCounter no requieren este campo.<li>Para Umami, es la ID del sitio web.<li>Para Plausible, es el nombre de dominio.</ul><li><p><code>self_hosted_url</code>. Opcional. Utiliza este campo para especificar la URL si tienes una instancia auto-alojada. La URL base variará según tu configuración particular. Algunos ejemplos:</p> <ul><li>Para GoatCounter: <code>"https://stats.example.com"</code><li>Para Umami: <code>"https://umami.example.com"</code><li>Para Plausible: <code>"https://plausible.example.com"</code></ul><li><p><code>do_not_track</code>: (sólo para Umami) opcional. Cuando se establece en <code>true</code>, se desactiva el seguimiento para los usuarios cuyos navegadores envían un encabezado “Do Not Track”.</p></ul><p>Un ejemplo de configuración para GoatCounter no auto-alojada sería:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">analytics</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">service</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>goatcounter<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">id</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>tabi<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">self_hosted_url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><hr><h2 id=pie-de-pagina><a aria-label="Anchor link for: pie-de-pagina" class="header-anchor no-hover-padding" href=#pie-de-pagina><span aria-hidden=true class=link-icon></span></a> Pie de página</h2><h3 id=iconos-de-redes-sociales><a aria-label="Anchor link for: iconos-de-redes-sociales" class="header-anchor no-hover-padding" href=#iconos-de-redes-sociales><span aria-hidden=true class=link-icon></span></a> Iconos de redes sociales</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes añadir iconos de redes sociales al pie de página con <code>socials</code>, que acepta una lista de objetos de redes sociales. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">socials</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>github<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://github.com/welpo/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>github<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>soundcloud<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://soundcloud.com/oskerwyld<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>soundcloud<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>instagram<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://instagram.com/oskerwyld<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>instagram<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>youtube<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://youtube.com/@oskerwyld<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>youtube<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>spotify<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">icon</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>spotify<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>Para ver una lista de todos los iconos integrados, echa un vistazo al directorio <a class=external href=https://github.com/welpo/tabi/tree/main/static/social_icons><code>static/social_icons</code> en GitHub</a>.<p>¿Echas en falta algún icono? Si crees que sería una buena adición a tabi, no dudes en <a href="https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=" class=external>abrir un issue</a> o enviar un pull request (<a class=external href=https://github.com/welpo/tabi/pull/333>ejemplo</a>).<p>Para usar un icono personalizado, puedes añadirlo al directorio <code>static/social_icons</code> de tu sitio. Por ejemplo, si añades <code>custom.svg</code>, puedes referenciarlo así:<pre class=z-code><code><span class="z-text z-plain">{ name = "custom", url = "https://example.com", icon = "custom" }
</span></code></pre><div class="admonition note"><div class="admonition-icon admonition-icon-note"></div><div class=admonition-content><strong class=admonition-title>NOTA</strong><p>Todos los enlaces sociales incluyen el <a class=external href=https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me>atributo</a> <code>rel='me'</code>. Esto ayuda a los motores de búsqueda y servicios web a verificar que las cuentas de redes sociales te pertenecen.</div></div><h3 id=icono-de-feed><a aria-label="Anchor link for: icono-de-feed" class="header-anchor no-hover-padding" href=#icono-de-feed><span aria-hidden=true class=link-icon></span></a> Icono de feed</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes añadir un enlace a tu feed RSS/Atom en el pie de página con <code>feed_icon = true</code>.<p>Nota para usuarios de Zola 0.19.X: cuando hay dos nombres de archivo en <code>feed_filenames</code>, solo se enlazará el primero en el pie de página.<h3 id=menu-de-pie-de-pagina><a aria-label="Anchor link for: menu-de-pie-de-pagina" class="header-anchor no-hover-padding" href=#menu-de-pie-de-pagina><span aria-hidden=true class=link-icon></span></a> Menú de pie de página</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes añadir un menú al pie de página con <code>footer_menu</code>, que acepta una lista de elementos de menú. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">footer_menu</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>about<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>about<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>privacy<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>privacy<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>sitemap.xml<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>sitemap<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span><span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://example.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">name</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>external link<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">trailing_slash</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><h3 id=copyright><a aria-label="Anchor link for: copyright" class="header-anchor no-hover-padding" href=#copyright><span aria-hidden=true class=link-icon></span></a> Copyright</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Para añadir una mención sobre los derechos de autor a tu sitio web, configura <code>copyright</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">copyright</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>© $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.<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><ul><li><code>$TITLE</code> será reemplazado por la variable <code>title</code> configurada en <code>config.toml</code><li><code>$CURRENT_YEAR</code> será reemplazado por el año actual<li><code>$AUTHOR</code> será reemplazado por la variable <code>author</code><li><code>$SEPARATOR</code> será reemplazado por la <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#separador-personalizado>variable <code>separator</code></a>.</ul><p>Se procesará el texto en Markdown. Por ejemplo, la configuració de arriba:<div class=full-width><img alt="Sección de derechos de autor" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copyright_light.webp?h=b67d2136955cb3b232d2" class=img-light loading=lazy><img alt="Sección de derechos de autor" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copyright_dark.webp?h=632bc1c5ab6409bfbc88" class=img-dark loading=lazy></div><p>Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de derechos de autor para diferentes idiomas, añade la traducción correspondiente a <code>copyright_translations.{código_de_idioma}</code> para cada idioma que quieras dar soporte. El código de idioma debe coincidir con el <a class=external href=https://welpo.github.io/tabi/es/blog/faq-languages/#que-son-estos-codigos-de-dos-letras>código de idioma de tabi</a>. Por ejemplo:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">copyright_translations</span><span class="z-punctuation z-separator z-key z-toml">.</span><span class="z-entity z-name z-tag z-toml">es</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><hr><h2 id=metadatos><a aria-label="Anchor link for: metadatos" class="header-anchor no-hover-padding" href=#metadatos><span aria-hidden=true class=link-icon></span></a> Metadatos</h2><h3 id=mostrar-autoria><a aria-label="Anchor link for: mostrar-autoria" class="header-anchor no-hover-padding" href=#mostrar-autoria><span aria-hidden=true class=link-icon></span></a> Mostrar autoría</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Para mostrar la autoría de un artículo, usa <code>show_author = true</code>.<p>Esto mostrará lxs autorxs establecidxs en la variable <code>authors = []</code> en el front matter del artículo. Si esto no está disponible, se usará <code>author = ""</code> en <code>config.toml</code>.<h3 id=tiempo-de-lectura><a aria-label="Anchor link for: tiempo-de-lectura" class="header-anchor no-hover-padding" href=#tiempo-de-lectura><span aria-hidden=true class=link-icon></span></a> Tiempo de lectura</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Respeta jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Puedes activar o desactivar el tiempo estimado de lectura de un artículo con <code>show_reading_time</code>. Si lo estableces en <code>true</code>, se mostrará en los metadatos del artículo, así:</p><img alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_light.webp?h=615119d982424267b55f" class=img-light loading=lazy><img alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_dark.webp?h=b000b03652037b84eee4" class=img-dark loading=lazy><p>Dado que sigue <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>la jerarquía</a>, puedes activarlo o desactivarlo para páginas o secciones específicas. Por ejemplo, esta demo desactiva <code>show_reading_time = false</code> en la sección <a class=external href=https://welpo.github.io/tabi/es/projects/>proyectos</a> en el archivo <a href="https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1" class=external><code>_index.md</code></a>, por lo que sus publicaciones individuales no muestran el tiempo de lectura.<h3 id=mostrar-la-fecha><a aria-label="Anchor link for: mostrar-la-fecha" class="header-anchor no-hover-padding" href=#mostrar-la-fecha><span aria-hidden=true class=link-icon></span></a> Mostrar la fecha</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, la fecha se muestra debajo del título de la publicación. Puedes ocultarla con <code>show_date = false</code>. Esta configuración sigue <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>la jerarquía</a>.<h3 id=formato-de-fecha><a aria-label="Anchor link for: formato-de-fecha" class="header-anchor no-hover-padding" href=#formato-de-fecha><span aria-hidden=true class=link-icon></span></a> Formato de fecha</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>tabi tiene tres formatos de fecha: <code>long_date_format</code>, <code>short_date_format</code> y <code>archive_date_format</code>. 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 <a href=/es/blog/>sección de blog</a> o en la <a href=/es/>página principal</a>). El formato de archivo se usa para mostrar el día y el mes en la página de archivo.<p>Por defecto es “6th July 2049” para los formatos corto y largo en inglés. Para otros idiomas, el predeterminado es <code>"%d %B %Y"</code> para el formato largo y <code>"%-d %b %Y"</code> para el formato corto. El formato de archivo predeterminado universal es <code>"%d %b"</code>.<p>En Zola, la sintaxis para el formateo de tiempo está inspirada en strftime. Una referencia completa está disponible en la <a class=external href=https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html>documentación de chrono</a>.<h4 id=formatos-de-fecha-por-idioma><a aria-label="Anchor link for: formatos-de-fecha-por-idioma" class="header-anchor no-hover-padding" href=#formatos-de-fecha-por-idioma><span aria-hidden=true class=link-icon></span></a> Formatos de fecha por idioma</h4><p>Puedes personalizar los formatos de fecha para idiomas específicos usando la matriz <code>date_formats</code> en <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">date_formats</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lang</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>es<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">long</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%d de %B de %Y<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">short</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%-d %b %Y<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">archive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%d de %b<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lang</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>de<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">long</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%d. %B %Y<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">short</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%d.%m.%Y<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">archive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>%d. %b<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>Esto permite que diferentes idiomas usen formatos de fecha culturalmente apropiados (por ejemplo, “6 de julio de 2049” en español o “6. Juli 2049” en alemán).<h3 id=separador-personalizado><a aria-label="Anchor link for: separador-personalizado" class="header-anchor no-hover-padding" href=#separador-personalizado><span aria-hidden=true class=link-icon></span></a> Separador personalizado</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>El separador aparece en varios lugares: en el título del navegador, entre los metadatos de una publicación…<p>El separador por defecto es un punto de viñeta (<code></code>), pero puedes cambiarlo configurando algo como <code>separator = "|"</code>.<h3 id=orden-del-titulo><a aria-label="Anchor link for: orden-del-titulo" class="header-anchor no-hover-padding" href=#orden-del-titulo><span aria-hidden=true class=link-icon></span></a> Orden del título</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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».<p>Al configurar <code>invert_title_order = true</code>, 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».<hr><h2 id=seguridad><a aria-label="Anchor link for: seguridad" class="header-anchor no-hover-padding" href=#seguridad><span aria-hidden=true class=link-icon></span></a> Seguridad</h2><h3 id=correo-electronico-codificado><a aria-label="Anchor link for: correo-electronico-codificado" class="header-anchor no-hover-padding" href=#correo-electronico-codificado><span aria-hidden=true class=link-icon></span></a> Correo electrónico codificado</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Para proteger tu dirección de correo electrónico de los spambots, puedes codificarla en el pie de página. Puedes hacer esto estableciendo <code>email</code> en una versión codificada en base64 de tu dirección de correo electrónico<sup class=footnote-reference id=fr-2-1><a href=#fn-2>2</a></sup>. Por ejemplo, <code>email = "bWFpbEBleGFtcGxlLmNvbQ=="</code> es la versión codificada en base64 de “mail@example.com”.<p>Si no quieres codificar tu correo electrónico tú mismo, tabi puede hacerlo por ti si configuras <code>encode_plaintext_email = true</code>. 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.<p>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.<h3 id=csp-content-security-policy><a aria-label="Anchor link for: csp-content-security-policy" class="header-anchor no-hover-padding" href=#csp-content-security-policy><span aria-hidden=true class=link-icon></span></a> CSP (Content Security Policy)</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>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.<p>tabi tiene una CSP predeterminada que permite imágenes y vídeos remotos, así como incrustaciones de YouTube y Vimeo. Puedes personalizarla con <code>allowed_domains</code>, que toma una lista de directivas de CSP. Esta es la CSP predeterminada:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">allowed_domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>font-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>data:<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>img-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://*<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>data:<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>script-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>style-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>'self'<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"> <span class="z-punctuation z-definition z-inline-table z-begin z-toml">{</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">directive</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>frame-src<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-inline-table z-toml">,</span> <span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domains</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>player.vimeo.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://www.youtube-nocookie.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-punctuation z-definition z-inline-table z-end z-toml">}</span><span class="z-punctuation z-separator z-array z-toml">,</span>
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span></code></pre><p>Esta función está habilitada por defecto. Para deshabilitarla (y permitir todo), configura <code>enable_csp = false</code> en una página, sección o globalmente. La opción <code>enable_csp</code> sigue <a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>la jerarquía</a>.<p>Para obtener más información, consulta la <a href=https://welpo.github.io/tabi/es/blog/security/>página de documentación de CSP</a>.<hr><h2 id=indieweb><a aria-label="Anchor link for: indieweb" class="header-anchor no-hover-padding" href=#indieweb><span aria-hidden=true class=link-icon></span></a> Indieweb</h2><h3 id=webmentions><a aria-label="Anchor link for: webmentions" class="header-anchor no-hover-padding" href=#webmentions><span aria-hidden=true class=link-icon></span></a> Webmentions</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue la jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Como se describe en el estándar W3C recomendado, <a class=external href=https://www.w3.org/TR/webmention/#abstract-p-1>Webmention</a> es una manera sencilla de notificar cualquier URL cuando la mencionas en tu sitio web. Desde la perspectiva del receptor, es una forma de solicitar notificaciones cuando otros sitios web la mencionan.<p>Para sitios web estáticos, <a class=external href=https://webmention.io/>webmention.io</a> aloja un punto final de webmention que se puede utilizar para recibir webmentions. Esta función recupera las webmentions almacenadas en webmention.io y las muestra para una página. Necesitarás configurar una cuenta para tu sitio web en webmention.io. Cuando habilites la función, anunciará tu punto final de webmention.io y mostrará las webmentions para cualquier página.<p>Habilita las webmentions para tu sitio web agregando lo siguiente a tu archivo <code>config.toml</code>.<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">webmentions</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enable</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Especifica el dominio registrado con webmention.io.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">domain</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>www.example.com<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>❓: Para desactivar las webmentions para una sección o página específica, establece <code>webmentions = false</code> en la sección <code>[extra]</code> del front matter de esa sección o página.<p>La sección de webmentions se ve así:<div class=full-width><img alt="Captura de pantalla de webmentions mostrando reposts, me gusta, marcadores y comentarios" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/webmention_light.webp?h=172ea81db2f223f3f7a5" class=img-light loading=lazy><img alt="Captura de pantalla de webmentions mostrando reposts, me gusta, marcadores y comentarios" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/webmention_dark.webp?h=817252126f1495cad050" class=img-dark loading=lazy></div><h3 id=h-card-representativa><a aria-label="Anchor link for: h-card-representativa" class="header-anchor no-hover-padding" href=#h-card-representativa><span aria-hidden=true class=link-icon></span></a> h-card representativa</h3><table><thead><tr><th style=text-align:center>Página<th style=text-align:center>Sección<th style=text-align:center><code>config.toml</code><th style=text-align:center>Sigue Jerarquía<th style=text-align:center>Requiere JavaScript<tbody><tr><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center><td style=text-align:center></table><p>Por defecto, tabi añade una <a class=external href=https://microformats.org/wiki/h-card>h-card</a> representativa <strong>oculta</strong> a la página de inicio. Aunque es invisible para los visitantes, está disponible para los analizadores de microformatos. Puedes comprobar la validez de la tarjeta con la herramienta <a class=external href=https://indiewebify.me/validate-h-card/>Indiewebify.me</a>.<p>Para desactivar la h-card, establece <code>enable = false</code> en la sección <code>[extra.hcard]</code> de <code>config.toml</code>.<p>La h-card predeterminada incluye tu nombre, la URL del sitio web y los enlaces a redes sociales.<p>Puedes establecer una imagen de perfil y una pequeña biografía con los ajustes <code>avatar</code> y <code>biography</code>.<p>Todas las demás <a class=external href=https://microformats.org/wiki/h-card#Properties>propiedades de h-card</a> se pueden añadir listándolas en la sección <code>[extra.hcard]</code> del archivo de configuración. Simplemente reemplaza todos los caracteres <code>-</code> por <code>_</code>.<hr><h2 id=extendiendo-elementos-html-en-tabi><a aria-label="Anchor link for: extendiendo-elementos-html-en-tabi" class="header-anchor no-hover-padding" href=#extendiendo-elementos-html-en-tabi><span aria-hidden=true class=link-icon></span></a> Extendiendo elementos HTML en tabi</h2><p>Algunos elementos HTML en tabi pueden extenderse para admitir casos de uso adicionales, como agregar JavaScript personalizado para comportamientos en todo el sitio al final de la etiqueta <code>&lt;body></code> o incluir contenido adicional al final del elemento <code>&lt;head></code> que no esté soportado por otras configuraciones de tabi.<p>Consulta la tabla a continuación para ver los elementos que pueden extenderse:<table><thead><tr><th style=text-align:center>Elemento<th style=text-align:center>Plantilla<tbody><tr><td style=text-align:center><code>&lt;head></code><td style=text-align:center><code>templates/tabi/extend_head.html</code><tr><td style=text-align:center><code>&lt;body></code><td style=text-align:center><code>templates/tabi/extend_body.html</code></table><p>No hay configuraciones explícitas que debas establecer para tu sitio o páginas. Simplemente crea el archivo de plantilla correspondiente para tu sitio, y tabi lo incluirá automáticamente.<hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo <code>updated</code>. Aquí tienes una guía para eso: <a class=external href=https://osc.garden/es/blog/zola-date-git-hook/>Zola Git Hook: actualizando las fechas de las publicaciones</a>. <a href=#fr-1-1></a></p><li id=fn-2><p>Para codificar tu correo electrónico en base64 puedes utilizar <a class=external href=https://www.base64encode.org/>herramientas en línea</a> o, en tu terminal, ejecutar: <code>printf 'mail@example.com' | base64</code> <a href=#fr-2-1></a></p></ol></section></section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/mastering-tabi-settings/><button aria-label="Me gusta esta publicación" title="Me gusta esta publicación" class=iine-button data-icon=thumbs_up data-slug=/blog/mastering-tabi-settings/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Siguiente href=https://welpo.github.io/tabi/es/blog/series/><span class=arrow></span> Siguiente</a><p aria-hidden=true id=left_title>Guía completa sobre series</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/es/blog/faq-languages/>Anterior <span class=arrow></span></a><p aria-hidden=true id=right_title>¿Lost in Translation? Explora las capacidades multilingües de tabi</div></nav></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Mostrar/ocultar la tabla de contenidos" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#jerarquia-de-configuracion>Jerarquía de configuración</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#busqueda>Búsqueda</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#consideraciones-para-usuarios-de-zola-0-17-x>Consideraciones para usuarios de Zola 0.17.X</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#detalles-de-implementacion>Detalles de implementación</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-multilingue>Soporte multilingüe</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#apariencia>Apariencia</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pagina-principal>Página principal</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#cabecera>Cabecera</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#listando-publicaciones-recientes>Listando publicaciones recientes</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#listado-de-proyectos>Listado de proyectos</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#interruptor-de-modo-claro-y-oscuro>Interruptor de modo claro y oscuro</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#modo-predeterminado-claro-oscuro>Modo predeterminado (claro/oscuro)</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pieles-personalizadas>Pieles personalizadas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#fuente-sans-serif-paloseco>Fuente sans serif (paloseco)</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indicador-de-enlaces-externos>Indicador de enlaces externos</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#estilos-css-personalizados>Estilos CSS personalizados</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#color-del-tema-del-navegador>Color del tema del navegador</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#etiquetas-compactas>Etiquetas compactas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#orden-de-las-etiquetas>Orden de las etiquetas</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#series>Series</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlace-para-saltar-a-las-publicaciones>Enlace para saltar a las publicaciones</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indexacion-de-paginas-de-series>Indexación de páginas de series</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#integracion-con-repositorios-git>Integración con repositorios Git</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#paginas>Páginas</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#proyectos>Proyectos</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#filtrar-proyectos>Filtrar proyectos</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#archivo>Archivo</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#etiquetas>Etiquetas</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pagina-acerca-de>Página acerca de</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#seo>SEO</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#favicon>Favicon</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#favicon-de-emoji>Favicon de emoji</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#url-canonica>URL canónica</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tarjetas-para-redes-sociales>Tarjetas para redes sociales</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#creador-del-fediverso>Creador del fediverso</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#navegacion>Navegación</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#barra-de-navegacion>Barra de navegación</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#botones-de-navegacion-rapida>Botones de navegación rápida</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#table-de-contenido>Table de contenido</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlace-a-los-articulos-anterior-y-siguiente>Enlace a los artículos anterior y siguiente</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlaces-de-retorno-en-notas-al-pie>Enlaces de retorno en notas al pie</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#usabilidad>Usabilidad</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#boton-de-copiar-en-bloques-de-codigo>Botón de copiar en bloques de código</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#nombres-de-bloques-de-codigo-clicables>Nombres de bloques de código clicables</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#forzar-bloques-de-codigo-de-izquierda-a-derecha>Forzar bloques de código de izquierda a derecha</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-para-katex>Soporte para KaTeX</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#soporte-para-mermaid>Soporte para Mermaid</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#subconjunto-de-fuente-personalizada>Subconjunto de fuente personalizada</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#contenido-completo-en-el-feed>Contenido completo en el feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#ocultar-contenido-del-feed>Ocultar contenido del feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#añadir-comentarios>Comentarios</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iine>Botones de iine</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#analisis-web>Análisis web</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#pie-de-pagina>Pie de página</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iconos-de-redes-sociales>Iconos de redes sociales</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#icono-de-feed>Icono de feed</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#menu-de-pie-de-pagina>Menú de pie de página</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#copyright>Copyright</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#metadatos>Metadatos</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#mostrar-autoria>Mostrar autoría</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tiempo-de-lectura>Tiempo de lectura</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#mostrar-la-fecha>Mostrar la fecha</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#formato-de-fecha>Formato de fecha</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#formatos-de-fecha-por-idioma>Formatos de fecha por idioma</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#separador-personalizado>Separador personalizado</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#orden-del-titulo>Orden del título</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#seguridad>Seguridad</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#correo-electronico-codificado>Correo electrónico codificado</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#csp-content-security-policy>CSP (Content Security Policy)</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#indieweb>Indieweb</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#webmentions>Webmentions</a><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#h-card-representativa>h-card representativa</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#extendiendo-elementos-html-en-tabi>Extendiendo elementos HTML en tabi</a></ul></div></div></div><a title="Ir al inicio de la página" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><span class=hidden id=copy-success> Copiado! </span><span class=hidden id=copy-init> Copiar código al portapapeles </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/es/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/about/> sobre mí </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/privacy/> política de privacidad </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadísticas del sitio </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del sitio </a></ul> </small></nav><div class=credits><small> Impulsado por <a href=https://www.getzola.org>Zola</a> y <a href=https://github.com/welpo/tabi>tabi</a><a href=https://github.com/welpo/tabi> Código del sitio </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Buscar</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Buscar… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Borrar búsqueda" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No hay resultados</span><span id=one_results> $NUMBER resultado</span><span id=many_results> $NUMBER resultados</span><span id=two_results> $NUMBER resultados</span><span id=few_results> $NUMBER resultados</span></div><div id=results role=listbox></div></div></div></div></footer>