deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-11 07:46:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/blog/mastering-tabi-settings/index.html
GitHub Actions c713324763 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-09-14 10:36:08 +00:00

141 lines
No EOL
189 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.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><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 • Mastering tabi Settings: A Comprehensive Guide</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=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Discover the many ways you can customise your tabi site." name=description><meta content="Discover the many ways you can customise your tabi site." property=og:description><meta content="Mastering tabi Settings: A Comprehensive Guide" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg?h=23a27f210744e2608778" 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/blog_mastering_tabi_settings.jpg?h=23a27f210744e2608778" 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=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/ hreflang=ca 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=https://welpo.github.io/tabi/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><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" 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="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/ lang=ca role=menuitem>Català</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/mastering-tabi-settings/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">Mastering tabi Settings: A Comprehensive Guide</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/></a><ul class=meta><li><time class=dt-published datetime=2023-09-18>18th Sep 2023</time><li title="6007 words"><span aria-hidden=true class=separator>•</span>31 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/faq/>FAQ</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-08-07>Updated on 7th Aug 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.md>See changes</a></ul><p class=p-summary hidden>Discover the many ways you can customise your tabi site.<section class="e-content body"><p>This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to <a class=external href=https://github.com/welpo/tabi/issues/new>open an issue on GitHub</a> or <a class=external href=https://github.com/welpo/tabi/discussions>start a discussion</a>.<details><summary><b>Table of Contents</b></summary> <div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>Settings Hierarchy</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search>Search</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#considerations-for-zola-0-17-x-users>Considerations for Zola 0.17.X Users</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#implementation-details>Implementation Details</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#multilingual-support>Multilingual Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#appearance>Appearance</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#home-page>Home Page</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#heading>Heading</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#listing-recent-posts>Listing Recent Posts</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#listing-projects>Listing Projects</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#light-and-dark-mode-switcher>Light and Dark Mode Switcher</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#default-light-dark-mode>Default (Light/Dark) Mode</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-skins>Custom Skins</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#sans-serif-font>Sans-serif Font</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#external-link-indicator>External Link Indicator</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-css>Custom CSS</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#browser-theme-colour>Browser Theme Colour</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#compact-tags>Compact Tags</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags-sorting>Tags Sorting</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#series>Series</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#jump-to-posts-link>Jump to posts link</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#series-pages-indexation>Series pages indexation</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#git-repository-integration>Git Repository Integration</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#pages>Pages</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#projects>Projects</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#filtering-projects>Filtering Projects</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#archive>Archive</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags>Tags</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#about-page>About Page</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#seo>SEO</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#favicon>Favicon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#emoji-favicon>Emoji Favicon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url>Canonical URL</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards>Social media cards</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#fediverse-creator>Fediverse Creator</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#navigation>Navigation</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#navigation-bar>Navigation Bar</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons>Quick Navigation Buttons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#table-of-contents>Table of Contents</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#previous-and-next-article-links>Previous and Next Article Links</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footnote-backlinks>Footnote Backlinks</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#usability>Usability</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks>Copy Button on Code Blocks</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#clickable-code-block-names>Clickable Code Block Names</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#force-code-blocks-ltr>Force Code Blocks LTR</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#katex-support>KaTeX Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#mermaid-support>Mermaid Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-font-subset>Custom Font Subset</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#full-content-in-feed>Full Content in Feed</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#hiding-content-from-feed>Hiding Content from Feed</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#adding-comments>Comments</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#iine>iine Like Buttons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#analytics>Analytics</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footer>Footer</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons>Social Media Icons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#feed-icon>Feed Icon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footer-menu>Footer Menu</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright>Copyright</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#metadata>Metadata</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#show-author>Show author</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#reading-time>Reading Time</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#show-date>Show Date</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#date-format>Date Format</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#per-language-date-formats>Per-language date formats</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-separator>Custom Separator</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#title-tag-order>Title Tag Order</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#security>Security</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email>Encoded Email</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#csp-content-security-policy>CSP (Content Security Policy)</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#indieweb>Indieweb</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions>Webmentions</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#representative-h-card>Representative h-card</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#extending-html-elements-in-tabi>Extending HTML Elements in tabi</a></ul></div></details><h2 id=settings-hierarchy><a aria-label="Anchor link for: settings-hierarchy" class="header-anchor no-hover-padding" href=#settings-hierarchy><span aria-hidden=true class=link-icon></span></a> Settings Hierarchy</h2><p>tabi has a hierarchy that allows you to customise your site at different levels. The hierarchy (from low to high priority) is as follows:<ol><li><strong>Global settings</strong>: These are the settings that apply to your entire site. They are set in <code>config.toml</code>.<li><strong>Section settings</strong>: These are the settings that apply to a section of your site (e.g.<code>/blog</code> or <code>/projects</code>). They are set in the front matter of the <code>_index.md</code> file of the section.<li><strong>Parent page settings</strong>: For nested pages (pages within pages), these are the settings from the parent page.<li><strong>Page settings</strong>: These are the settings that apply to a single page. They are set in the front matter of the page.</ol><p>In all cases, tabi’s settings are set in the <code>[extra]</code> section.<p>For settings which follow this hierarchy, the value set on a page overrides the value for a section, which overrides the global value. In short: the more specific the setting, the higher priority it has, or <code>page > parent page/section > config.toml</code>.<hr><h2 id=search><a aria-label="Anchor link for: search" class="header-anchor no-hover-padding" href=#search><span aria-hidden=true class=link-icon></span></a> Search</h2><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 supports accessible, local multi-lingual search with <a class=external href=http://elasticlunr.com/>Elasticlunr</a>. To enable it, you need to:<ol><li>Set a <code>default_language</code> in <code>config.toml</code>.<li>Set <code>build_search_index = true</code>.<li>Optionally, configure the <code>[search]</code>.</ol><p>Here’s an example configuration:<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> Or the less efficient "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>Note</strong>: for Chinese/Japanese search support, you need to use a <a class=external href=https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55>custom Zola build</a>.<h3 id=considerations-for-zola-0-17-x-users><a aria-label="Anchor link for: considerations-for-zola-0-17-x-users" class="header-anchor no-hover-padding" href=#considerations-for-zola-0-17-x-users><span aria-hidden=true class=link-icon></span></a> Considerations for Zola 0.17.X Users</h3><p>Zola 0.17.X doesn’t provide access to the <code>search.index_format</code> variable (<a class=external href=https://github.com/getzola/zola/issues/2165>bug report</a>). When using tabi, this variable defaults to the more efficient JSON index. However, due to <a class=external href=https://github.com/getzola/zola/issues/2193>another bug</a> fixed in 0.18.0, the JSON index for multi-language sites is not generated correctly.<p>Users with Zola versions prior to 0.18.0 who want to use the JavaScript index need to set the <code>index_format</code> variable in two places:<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>This ensures tabi loads the right files. We recommend upgrading to Zola 0.18.0 or later for optimal functionality.<h3 id=implementation-details><a aria-label="Anchor link for: implementation-details" class="header-anchor no-hover-padding" href=#implementation-details><span aria-hidden=true class=link-icon></span></a> Implementation Details</h3><p>For technical details about the search implementation in tabi, including when the index loads, accessibility features, and other specifics, see the <a class=external href=https://github.com/welpo/tabi/pull/250>Pull Request #250</a>.<hr><h2 id=multilingual-support><a aria-label="Anchor link for: multilingual-support" class="header-anchor no-hover-padding" href=#multilingual-support><span aria-hidden=true class=link-icon></span></a> Multilingual Support</h2><p>tabi offers comprehensive multilingual support for your Zola site, from setting a default language to adding as many as you wish. Refer to the <a href=https://welpo.github.io/tabi/blog/faq-languages/>multilingual FAQ</a> for more information.<hr><h2 id=appearance><a aria-label="Anchor link for: appearance" class="header-anchor no-hover-padding" href=#appearance><span aria-hidden=true class=link-icon></span></a> Appearance</h2><h3 id=home-page><a aria-label="Anchor link for: home-page" class="header-anchor no-hover-padding" href=#home-page><span aria-hidden=true class=link-icon></span></a> Home Page</h3><p>The <a href=/>main page</a> of this demo has a header with an image, a title and description:</p><img alt="Main page header" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/header_light.webp?h=fd4a8c167eabd93f4a61" class=img-light loading=lazy><img alt="Main page header" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/header_dark.webp?h=f8b65eedf799bdfbe437" class=img-dark loading=lazy><h4 id=heading><a aria-label="Anchor link for: heading" class="header-anchor no-hover-padding" href=#heading><span aria-hidden=true class=link-icon></span></a> Heading</h4><p>To set the image and title, you can use the <code>header</code> variable in the front matter of the section’s <code>_index.md</code> file. For example:<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>Hello! I'm 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>Óscar Fernández, the theme's author<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>The description is regular Markdown content, set outside the front matter.<h4 id=listing-recent-posts><a aria-label="Anchor link for: listing-recent-posts" class="header-anchor no-hover-padding" href=#listing-recent-posts><span aria-hidden=true class=link-icon></span></a> Listing Recent Posts</h4><p>To show posts on your main page, you first need to decide where these posts will be served from: the root path (<code>/</code>) or a subdirectory (e.g., <code>/blog</code>).<p><strong>Option A: Serve posts from the root path (<code>/</code>)</strong><p>Set <code>paginate_by</code> in the front matter of your <code>content/_index.md</code> file:<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>Latest posts<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> Show 5 posts per page.</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>Hello! I'm 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>Your Name<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>The <code>paginate_by</code> setting goes in the main front matter, not in the <code>[extra]</code> section.</div></div><p><strong>Option B: Serve posts from a subdirectory (e.g., <code>/blog</code>)</strong><p>Use <code>section_path</code> in the <code>[extra]</code> section of your <code>content/_index.md</code> file:<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>Latest posts<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> Do not set `paginate_by` here.</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>Hello! I'm 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>Your Name<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> Where to find your posts.</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> Show up to 5 posts on the main page.</span>
</span></code></pre><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Do not set both <code>paginate_by</code> and <code>section_path</code>. These settings are mutually exclusive and using both may result in no posts being displayed.</div></div><p>Additional notes:<ul><li>The <code>title</code> in the front matter sets the header that appears above the posts.<li>Use the full path to the section’s <code>_index.md</code> file for <code>section_path</code>. Using <code>section_path = "blog/"</code> will not work.</ul><h5 id=pinning-posts><a aria-label="Anchor link for: pinning-posts" class="header-anchor no-hover-padding" href=#pinning-posts><span aria-hidden=true class=link-icon></span></a> Pinning Posts</h5><p>You can pin posts to keep them at the top of the main page listing. In this demo, this post is pinned, so it appears first with a “pinned” icon and label:<div class=full-width><img alt="Pinned post" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/pinned_post_light.webp?h=6a9c0434f8e7b0b66d5f" class=img-light loading=lazy><img alt="Pinned post" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/pinned_post_dark.webp?h=0fe472212c3888878db7" class=img-dark loading=lazy></div><p>Pinned posts are shown first, maintaining their relative order of the section’s <code>sort_by</code>, followed by regular posts.<p>To pin a post, add the following to its 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>This setting only affects your site’s main pages (like <code>/</code>, <code>/es/</code>, <code>/fr/</code>). Other sections like <code>blog/</code>, <code>tags/</code>, or <code>archive/</code> show posts in their normal order.</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>When using pagination (<code>paginate_by</code>), pinned posts may appear twice: once on top of page 1, and again in their normal chronological position on subsequent pages.</div></div><h5 id=display-the-date-of-posts-in-listing><a aria-label="Anchor link for: display-the-date-of-posts-in-listing" class="header-anchor no-hover-padding" href=#display-the-date-of-posts-in-listing><span aria-hidden=true class=link-icon></span></a> Display the Date of Posts in Listing</h5><p>By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the <code>post_listing_date</code> option. Available settings:<ul><li><code>date</code>: Show only the original date of the post (default).<li><code>updated</code>: Show only the last updated date of the post. If there is no last updated date, it shows the original date.<li><code>both</code>: Show both the original date and the last updated date.</ul><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">post_listing_date</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></code></pre><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>This setting follows the hierarchy: you can set a global value in <code>config.toml</code> or override it for specific sections in their <code>_index.md</code> file. In both cases, add it to the <code>[extra]</code> section.</div></div><h4 id=listing-projects><a aria-label="Anchor link for: listing-projects" class="header-anchor no-hover-padding" href=#listing-projects><span aria-hidden=true class=link-icon></span></a> Listing Projects</h4><p>You can showcase a selection of projects on your main page. To do this, you’ll need to set up the <code>projects</code> directory first.<p>Once that’s done, you configure the path to the projects in the <code>[extra]</code> section of your <code>_index.md</code> file:<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>By default, this will show the 3 projects with the highest priority (smallest weight; same sorting as Projects page). To show more or fewer projects, you can set <code>max_projects</code> in the <code>[extra]</code> section.<p>By default, the featured projects will be shown after the posts. If you want to show the projects before the posts, set <code>show_projects_first = true</code>.<h3 id=light-and-dark-mode-switcher><a aria-label="Anchor link for: light-and-dark-mode-switcher" class="header-anchor no-hover-padding" href=#light-and-dark-mode-switcher><span aria-hidden=true class=link-icon></span></a> Light and Dark Mode Switcher</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The light and dark mode switcher (the moon/sun icon on the top right) can be enabled by setting <code>theme_switcher = true</code> in <code>config.toml</code>.<h3 id=default-light-dark-mode><a aria-label="Anchor link for: default-light-dark-mode" class="header-anchor no-hover-padding" href=#default-light-dark-mode><span aria-hidden=true class=link-icon></span></a> Default (Light/Dark) Mode</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The default theme can be specified with the <code>default_theme</code> variable, which accepts either <code>"dark"</code> or <code>"light"</code>. If you don’t set it, the default theme will be the one set in the user’s browser.<h3 id=custom-skins><a aria-label="Anchor link for: custom-skins" class="header-anchor no-hover-padding" href=#custom-skins><span aria-hidden=true class=link-icon></span></a> Custom Skins</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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’s skins change the main colour of the site. You can set the skin in <code>config.toml</code> with <code>skin = "skin_name"</code>. For example, <code>skin = "lavender"</code> looks like this (click to switch between light and dark mode):<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-23268 type=checkbox><label class=image-label for=toggle-img-23268><div class=image-default><img alt="lavender skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_light.webp?h=bc19bff6623d41e30062" loading=lazy></div> <div class=image-toggled><img alt="lavender skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_dark.webp?h=b3551cd0429844a258f9" loading=lazy></div></label></div><p>Explore the available skins and learn how to create your own reading <a href=https://welpo.github.io/tabi/blog/customise-tabi/#skins>the documentation</a>.<h3 id=sans-serif-font><a aria-label="Anchor link for: sans-serif-font" class="header-anchor no-hover-padding" href=#sans-serif-font><span aria-hidden=true class=link-icon></span></a> Sans-serif Font</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 uses a serif font for article paragraphs (the one you’re seeing now). You can switch to using a sans-serif font (the one on the headers/menu) throughout your entire site by setting <code>override_serif_with_sans = true</code> in your <code>config.toml</code>.<p>Click on the image below to compare the two looks:<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-61838 type=checkbox><label class=image-label for=toggle-img-61838><div class=image-default><img alt="Serif font" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/serif.webp?h=617377b8947f3e5b36a5" loading=lazy></div> <div class=image-toggled><img alt="Sans-serif font" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/sans-serif.webp?h=2681391a75bfd6310843" loading=lazy></div></label></div><h3 id=external-link-indicator><a aria-label="Anchor link for: external-link-indicator" class="header-anchor no-hover-padding" href=#external-link-indicator><span aria-hidden=true class=link-icon></span></a> External Link Indicator</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Requires Zola 0.20.0 or later.</div></div><p>If you’d like to add an icon to external links, configure the <code>[markdown]</code> (not <code>[extra]</code>) section in your <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>This will add a small icon next to external links:<div class=full-width><img alt="External link icon" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/external_link_light.webp?h=64dd0a1a6f4c5122865e" class=img-light loading=lazy><img alt="External link icon" 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=custom-css><a aria-label="Anchor link for: custom-css" class="header-anchor no-hover-padding" href=#custom-css><span aria-hidden=true class=link-icon></span></a> Custom CSS</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can load custom CSS for the entire site or on specific pages with <code>stylesheets</code>, which takes a list of paths to CSS files. For example:<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=browser-theme-colour><a aria-label="Anchor link for: browser-theme-colour" class="header-anchor no-hover-padding" href=#browser-theme-colour><span aria-hidden=true class=link-icon></span></a> Browser Theme Colour</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The browser theme colour is the colour that appears in the browser’s tab bar:</p><img alt="tabi with a coloured browser theme" 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="tabi with a coloured browser theme" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp?h=d741cdd4ee3c4913284f" class=img-dark loading=lazy><p>You can set it in <code>config.toml</code> like <code>browser_theme_color = "#087e96"</code>. If you’d like different colours for dark/light mode, you can set an array of colours with <code>browser_theme_color = ["#ffffff", "#000000"]</code>. The first colour will be used for light mode, the second for dark mode.<p>This variable accepts any valid CSS colour, so you can use keywords (e.g. <code>blue</code>), hex codes (e.g. <code>#087e96</code>) or RGB/HSL values (e.g. <code>rgb(8, 126, 150)</code>).<h3 id=compact-tags><a aria-label="Anchor link for: compact-tags" class="header-anchor no-hover-padding" href=#compact-tags><span aria-hidden=true class=link-icon></span></a> Compact Tags</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, the <a href=/tags>tags page</a> displays tags as:<p><a href=#>TagName</a> — n post[s]<p>Setting <code>compact_tags = true</code> will display them as:<p><a href=#>TagName</a> <sup>n</sup><h3 id=tags-sorting><a aria-label="Anchor link for: tags-sorting" class="header-anchor no-hover-padding" href=#tags-sorting><span aria-hidden=true class=link-icon></span></a> Tags Sorting</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, the <a href=/tags>tags page</a> sorts tags alphabetically, given the default setting of <code>tag_sorting = "name"</code>.<p>Setting <code>tag_sorting = "frequency"</code> will sort them by number-of-posts (descending).<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>For a detailed explanation of the series feature, see the <a href=https://welpo.github.io/tabi/blog/series/>series documentation</a>.<h3 id=jump-to-posts-link><a aria-label="Anchor link for: jump-to-posts-link" class="header-anchor no-hover-padding" href=#jump-to-posts-link><span aria-hidden=true class=link-icon></span></a> Jump to posts link</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, a “Jump to posts” link automatically appears next to the series title when a series has a content over 2000 characters:<div class=full-width><img alt="jump to series posts link" src="https://welpo.github.io/tabi/blog/series/img/jump_to_series_posts_light.webp?h=36a55aa8486a48dcad54" class=img-light loading=lazy><img alt="jump to series posts link" src="https://welpo.github.io/tabi/blog/series/img/jump_to_series_posts_dark.webp?h=b2050110d2b4ad3f8768" class=img-dark loading=lazy></div><p>Set <code>show_jump_to_posts = true</code> to force the feature on and <code>show_jump_to_posts = false</code> to force it off.<h3 id=series-pages-indexation><a aria-label="Anchor link for: series-pages-indexation" class="header-anchor no-hover-padding" href=#series-pages-indexation><span aria-hidden=true class=link-icon></span></a> Series pages indexation</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, series page are indexed (using a 1-based indexing) as per the series section <code>sort_by</code>.<p>Set <code>post_listing_index_reversed = true</code> to reverse this index.<hr><h2 id=git-repository-integration><a aria-label="Anchor link for: git-repository-integration" class="header-anchor no-hover-padding" href=#git-repository-integration><span aria-hidden=true class=link-icon></span></a> Git Repository Integration</h2><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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> does follow <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>the hierarchy</a> and can be set on a page, section or globally. The rest of the settings can only be set in <code>config.toml</code>.<p>These settings allow you to link your tabi website with a public Git repository in GitHub, GitLab, Gitea or Codeberg. Example settings:<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>This enables two features:<ol><li><code>show_remote_source = true</code> adds a link to the source code of your site (your <code>remote_repository_url</code>) will be displayed on the footer:</ol><img alt="Page footer, showing a 'Site source' link" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/site_source_light.webp?h=74f40235aee4d653e751" class=img-light loading=lazy><img alt="Page footer, showing a 'Site source' link" 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> adds a “See changes ↗” link to the commit history of updated posts, next to the last updated date <sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup>:</ol><img alt="Post title and metadata, showing a 'See changes' link" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_light.webp?h=615119d982424267b55f" class=img-light loading=lazy><img alt="Post title and metadata, showing a 'See changes' link" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_dark.webp?h=b000b03652037b84eee4" class=img-dark loading=lazy><p>Clicking on this link will take you to the commit history of the post, where you can see the changes made to it:<div class=full-width><img alt="Commit history of a post" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/commit_history_light.webp?h=154a2997684117c8aa60" class=img-light loading=lazy><img alt="Commit history of a post" 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=pages><a aria-label="Anchor link for: pages" class="header-anchor no-hover-padding" href=#pages><span aria-hidden=true class=link-icon></span></a> Pages</h2><h3 id=projects><a aria-label="Anchor link for: projects" class="header-anchor no-hover-padding" href=#projects><span aria-hidden=true class=link-icon></span></a> Projects</h3><p>tabi has a built-in projects (cards) template. To enable it, you can create a directory in <code>content/projects/</code>. There, you can create a <code>_index.md</code> file with the following 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-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>Projects<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>The <code>title</code> is the title of the page.<li><code>sort_by</code> determines how the projects are sorted. You can sort by “date”, “update_date”, “title”, “title_bytes”, “weight”, “slug” or “none”.<li><code>template = "cards.html"</code> sets the template to render the projects page.<li><code>insert_anchor_links = "left"</code> adds anchor links to headers.<li><code>show_reading_time = false</code> hides the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#reading-time>reading time</a>.<li><code>quick_navigation_buttons = true</code> shows the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons>quick navigation buttons</a> are shown.</ul><p>Alongside the <code>_index.md</code> file, you can create a file for each project. For example, this is the front matter for the <a href=https://welpo.github.io/tabi/projects/tabi/>tabi project page</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>A feature-rich modern Zola theme with first-class multi-language support.<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> is the title of the project.<li><code>description</code> is the description of the project.<li><code>weight</code> determines the order in which the projects are shown. The lower the weight, the higher the project will appear.<li><code>local_image</code> is the path to the image of the project. This image is shown on the projects page.</ul><p>When a user clicks on the image or title of a project, they will be taken to the project’s page. If you’d rather have users go to an external link, you can set <code>link_to = "https://example.com</code> in the <code>[extra]</code> section of the project’s <code>.md</code> file.<p>The individual project’s page is rendered with the default template, unless you set another one, e.g. <code>template = "info-page.html"</code>.<h4 id=filtering-projects><a aria-label="Anchor link for: filtering-projects" class="header-anchor no-hover-padding" href=#filtering-projects><span aria-hidden=true class=link-icon></span></a> Filtering Projects</h4><p>If you add tags to your projects, you will see a tag filter:<div class=full-width><img alt="Projects page with tag filter" 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="Projects page with tag filter" 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>The tag filtering system uses progressive enhancement:<ul><li>Without JavaScript: Tags link directly to dedicated tag pages (e.g. <code>/tags/tag-name</code>)<li>With JavaScript: Instant filtering, URL syncing (#tag-name), and keyboard navigation</ul><p>To disable this feature, set <code>enable_cards_tag_filtering = false</code> in the <code>[extra]</code> section of the <code>projects/_index.md</code> file or in <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>To filter projects by tags, you need to set tags in the front matter of each project. For example:<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>project name<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>tag one<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>tag 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>third tag<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=archive><a aria-label="Anchor link for: archive" class="header-anchor no-hover-padding" href=#archive><span aria-hidden=true class=link-icon></span></a> Archive</h3><p>Adding an archive page is similar to adding a projects page. You can create a directory in <code>content/archive/</code>. There, you can create a <code>_index.md</code> file with the following 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-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>Archive<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>By default, the archive will list posts located in <code>blog/</code>. To customise this, you can modify the <code>[extra]</code> section of the <code>_index.md</code> file:<ul><li><p><strong>For a single source path</strong>: Set <code>section_path = "your-path/"</code> to list posts from a specific directory. Make sure to include the trailing slash.</p><li><p><strong>For multiple source paths</strong>: If you want to aggregate posts from various directories, <code>section_path</code> can be specified as a list of paths. For example:</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>notes/<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>path-three/<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>The archive displays posts in reverse chronological order (newest first). You can reverse this order by setting <code>archive_reverse = true</code> in the <code>[extra]</code> section:<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> displays oldest posts first.</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>The Archive page will only list posts that have a date in their front matter.</div></div><h3 id=tags><a aria-label="Anchor link for: tags" class="header-anchor no-hover-padding" href=#tags><span aria-hidden=true class=link-icon></span></a> Tags</h3><p>tabi has built-in support for tags. To enable them, simply add the taxonomy to your <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>You can then add tags to your posts by adding them to the <code>tags</code> array in the front matter of your post. For example:<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>Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life<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">2007-04-26</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>Lessons learned from beet farming and paper sales.<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>beets<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=about-page><a aria-label="Anchor link for: about-page" class="header-anchor no-hover-padding" href=#about-page><span aria-hidden=true class=link-icon></span></a> About Page</h3><p>If you’d like to have a non-article page for an “About” section, a “Contact” or “Copyright” page, etc., you can use the <code>info-page.html</code> template.<p>First, create a directory inside <code>content/</code> with any name you like. For example, <code>content/pages/</code>. Then, create a <code>_index.md</code> file inside that directory. The file should look like this:<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> tells Zola not to render the section.<li><code>insert_anchor_links = "left"</code> adds anchor links to headers. This is optional.</ul><p>Inside the directory, you can create any number of <code>.md</code> files.<p>In this demo, the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/about/>about</a> page uses the <code>info-page.html</code> template. The front matter is as follows:<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>About<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>Notice how the <code>path</code> is set to <code>about</code>. Zola will place the page at <code>$base_url/about/</code>. If you’d like to have the page available at <code>/contact/</code>, you’d set <code>path = "contact"</code>.<p>The <code>info-page.html</code> template can also be used to create landing pages at the path root (<code>"/"</code>). To do that, the <code>content/_index.md</code> file should look like this:<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 = "Landing Page Title"
</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">Place your landing page Markdown content here.
</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 takes care of most of the SEO for you (like Open Graph protocol tags, description, color-scheme…), but there are a few things you can customise.<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>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The favicon is the small icon that appears in the browser tab. You can set it in <code>config.toml</code> with <code>favicon = "img/favicon.png"</code>.<h3 id=emoji-favicon><a aria-label="Anchor link for: emoji-favicon" class="header-anchor no-hover-padding" href=#emoji-favicon><span aria-hidden=true class=link-icon></span></a> Emoji Favicon</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can also set an emoji as your favicon with <code>favicon_emoji</code>. For example, <code>favicon_emoji = "👾"</code>.<p>Note: Some browsers don’t support emoji favicons. See the compatibility table in <a class=external href=https://caniuse.com/link-icon-svg>caniuse</a>.<h3 id=canonical-url><a aria-label="Anchor link for: canonical-url" class="header-anchor no-hover-padding" href=#canonical-url><span aria-hidden=true class=link-icon></span></a> Canonical URL</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The canonical URL is a way to indicate to search engines what the preferred URL is for your website content. This is useful for SEO and avoiding duplicate content issues.<p>By default, the canonical URL is the URL of the page you’re on. However, you can override this by setting <code>canonical_url</code> in the front matter of your page or section.<p>If you have a site with an identical structure and matching content, you can set <code>base_canonical_url</code> in your <code>config.toml</code>. The canonical URL will be crafted by replacing the <code>$base_url</code> of the current URL with the <code>$base_canonical_url</code> you set.<p>For example, if you set <code>base_canonical_url = "https://example.com"</code>, the canonical URL of the page <code>$base_url/blog/post1</code> will be <code>https://example.com/blog/post1</code>. This is useful if you have a site with multiple domains that share the same content.<p><strong>Note</strong>: to ensure that the canonical URL is correct, it’s probably best to set <code>canonical_url</code> individually for each page.<h3 id=social-media-cards><a aria-label="Anchor link for: social-media-cards" class="header-anchor no-hover-padding" href=#social-media-cards><span aria-hidden=true class=link-icon></span></a> Social media cards</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Social media cards are the images that are displayed when you share a link on social media:</p><img alt="A screenshot of WhatsApp showing a link with a social media card" 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>You can set the social media image with <code>social_media_card = "img/social_media_card.png"</code>.<p>You can specify both relative and absolute paths.<ul><li><p><strong>Relative Path</strong>: Place the image in the same folder as your blog post and specify its name. For example, <code>social_media_card = "relative_image.png"</code>.</p><li><p><strong>Absolute Path</strong>: Put the image in a specific folder and specify the path from the root. For example, <code>social_media_card = "/img/absolute_image.png"</code>.</p></ul><p>If both relative and absolute paths are valid, the relative path will take precedence.<p>Since it follows the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>hierarchy</a>, if it’s not set on a page, but is set on a section, the section’s image will be used. If it’s not set on a page or section, but is set in <code>config.toml</code>, the global image will be used.<div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>PROTIP</strong><p>Automate their creation with a <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/blog/automating-social-media-cards-zola/>Automating Link Previews for Zola Sites</a>.</div></div><h3 id=fediverse-creator><a aria-label="Anchor link for: fediverse-creator" class="header-anchor no-hover-padding" href=#fediverse-creator><span aria-hidden=true class=link-icon></span></a> Fediverse Creator</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can highlight your fediverse profile in Mastodon link previews by setting the <code>fediverse_creator</code> variable in your <code>config.toml</code>. For example, for @username@example.com, use:<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><p>This adds metadata to your HTML, allowing Mastodon to display the author’s fediverse profile when your content is shared.<hr><h2 id=navigation><a aria-label="Anchor link for: navigation" class="header-anchor no-hover-padding" href=#navigation><span aria-hidden=true class=link-icon></span></a> Navigation</h2><h3 id=navigation-bar><a aria-label="Anchor link for: navigation-bar" class="header-anchor no-hover-padding" href=#navigation-bar><span aria-hidden=true class=link-icon></span></a> Navigation Bar</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The navigation bar is the bar at the top of the page that contains the site title and the navigation menu. You can customise which items appear by setting <code>menu</code> in <code>config.toml</code>.<p>The menu supports both relative URLs for internal pages and absolute URLs for external links. For example:<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>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">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>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">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>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">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>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">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=quick-navigation-buttons><a aria-label="Anchor link for: quick-navigation-buttons" class="header-anchor no-hover-padding" href=#quick-navigation-buttons><span aria-hidden=true class=link-icon></span></a> Quick Navigation Buttons</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you’re not on mobile. They look like this:</p><img alt="Quick navigation buttons" 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="Quick navigation buttons" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp?h=5e5e7d2504aab0b9a104" class=img-dark loading=lazy><p>The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page.<p>To enable them, set <code>quick_navigation_buttons = true</code>.<h3 id=table-of-contents><a aria-label="Anchor link for: table-of-contents" class="header-anchor no-hover-padding" href=#table-of-contents><span aria-hidden=true class=link-icon></span></a> Table of Contents</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Enable the table of contents right below the post’s title and metadata with <code>toc = true</code>.<p>Read more about the table of contents and how to customise it by reading <a href=https://welpo.github.io/tabi/blog/toc/>the docs</a>.<h3 id=previous-and-next-article-links><a aria-label="Anchor link for: previous-and-next-article-links" class="header-anchor no-hover-padding" href=#previous-and-next-article-links><span aria-hidden=true class=link-icon></span></a> Previous and Next Article Links</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Displays links to the previous and next articles at the bottom of posts. It looks like this:<div class=full-width><img alt="Previous and next article links" 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="Previous and next article links" 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>To activate this feature, set <code>show_previous_next_article_links = true</code> and ensure your section has a <code>sort_by</code> value (e.g. <code>sort_by = "date"</code>).<p>By default, next articles will be on the left side of the page and previous articles will be on the right side. To reverse the order (next articles on the right and previous articles on the left), set <code>invert_previous_next_article_links = true</code>.<p>By default, this navigation section will have the full width of the site (same as the navigation bar at the top). To make it narrower, matching the article width, set <code>previous_next_article_links_full_width = false</code>.<p>All of these settings follow the hierarchy.<h3 id=footnote-backlinks><a aria-label="Anchor link for: footnote-backlinks" class="header-anchor no-hover-padding" href=#footnote-backlinks><span aria-hidden=true class=link-icon></span></a> Footnote Backlinks</h3><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>DEPRECATION WARNING</strong><p>Zola v0.19.0 and later can do this natively. Set <code>bottom_footnotes = true</code> in your config’s <code>[markdown]</code> section.</div></div><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Setting <code>footnote_backlinks = true</code> will add backlinks to the footnotes of your posts, like this:<div class=full-width><img alt="Footnote backlinks" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp?h=8ed45b97e03cedda3ed2" class=img-light loading=lazy><img alt="Footnote backlinks" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp?h=9ba9f7115e6a8b10cad4" class=img-dark loading=lazy></div><p>When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced.<hr><h2 id=usability><a aria-label="Anchor link for: usability" class="header-anchor no-hover-padding" href=#usability><span aria-hidden=true class=link-icon></span></a> Usability</h2><h3 id=copy-button-on-code-blocks><a aria-label="Anchor link for: copy-button-on-code-blocks" class="header-anchor no-hover-padding" href=#copy-button-on-code-blocks><span aria-hidden=true class=link-icon></span></a> Copy Button on Code Blocks</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Setting <code>copy_button = true</code> will add a small copy button to the top right of code blocks, like this:<div class=full-width><img alt="Copy button on code blocks" 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="Copy button on code blocks" 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=clickable-code-block-names><a aria-label="Anchor link for: clickable-code-block-names" class="header-anchor no-hover-padding" href=#clickable-code-block-names><span aria-hidden=true class=link-icon></span></a> Clickable Code Block Names</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Setting <code>code_block_name_links = true</code> enables URLs in code block names to become clickable links. Check out the <a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path>documentation</a> for examples and usage.<h3 id=force-code-blocks-ltr><a aria-label="Anchor link for: force-code-blocks-ltr" class="header-anchor no-hover-padding" href=#force-code-blocks-ltr><span aria-hidden=true class=link-icon></span></a> Force Code Blocks LTR</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, code blocks are rendered left-to-right, regardless of the overall text direction. Set <code>force_codeblock_ltr = false</code> to allow code blocks to follow the document’s text direction. Useful for RTL languages needing RTL code blocks.<h3 id=katex-support><a aria-label="Anchor link for: katex-support" class="header-anchor no-hover-padding" href=#katex-support><span aria-hidden=true class=link-icon></span></a> KaTeX Support</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with <code>katex = true</code>. See what it looks like in tabi <a href=/blog/markdown/#katex>here</a>.<h3 id=mermaid-support><a aria-label="Anchor link for: mermaid-support" class="header-anchor no-hover-padding" href=#mermaid-support><span aria-hidden=true class=link-icon></span></a> Mermaid Support</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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> is a JavaScript-based diagramming and charting tool. You can enable it with <code>mermaid = true</code>.<p>By default, the Mermaid library is served locally. If you prefer to use a CDN, set <code>serve_local_mermaid = false</code> in <code>config.toml</code>. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi.<p>See the <a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams>Mermaid documentation</a> for usage instructions and examples.<h3 id=custom-font-subset><a aria-label="Anchor link for: custom-font-subset" class="header-anchor no-hover-padding" href=#custom-font-subset><span aria-hidden=true class=link-icon></span></a> Custom Font Subset</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it’s a good idea to try and minimise the size of this subset, or disable it completely if you’re not using a custom font in your skin.<p>You can create a custom subset tailored to your site, save it as <code>static/custom_subset.css</code>, and have it load with <code>custom_subset = true</code>. Disabling the subset can be done with <code>enable_subset = false</code>.<p>For more information, including instructions on how to create a custom subset, see the <a href=https://welpo.github.io/tabi/blog/custom-font-subset/>docs</a>.<h3 id=full-content-in-feed><a aria-label="Anchor link for: full-content-in-feed" class="header-anchor no-hover-padding" href=#full-content-in-feed><span aria-hidden=true class=link-icon></span></a> Full Content in Feed</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, the Atom feed only contains the summary/description of your posts. You can include the entire posts’ content by setting <code>full_content_in_feed = true</code> in <code>config.toml</code>.<h3 id=hiding-content-from-feed><a aria-label="Anchor link for: hiding-content-from-feed" class="header-anchor no-hover-padding" href=#hiding-content-from-feed><span aria-hidden=true class=link-icon></span></a> Hiding Content from Feed</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can control how content appears in your feeds using two settings:<ol><li><code>hide_from_feed = true</code>: Hides content from all feeds (main, section, and tag feeds)<li><code>hide_from_main_feed = true</code>: Hides content only from the main feed while keeping it visible in section and tag feeds</ol><h3 id=adding-comments><a aria-label="Anchor link for: adding-comments" class="header-anchor no-hover-padding" href=#adding-comments><span aria-hidden=true class=link-icon></span></a> Comments</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>To enable comments on an individual page, set the name of the system you want to enable to <code>true</code> in the front matter. For example, <code>utterances = true</code>.<p>To enable a system globally (on all pages), set <code>enabled_for_all_posts = true</code> in the correct section of your <code>config.toml</code> (e.g. inside <code>[extra.giscus]</code>).<p>If you have enabled a system globally, but want to disable it on a specific page, set the name of the system to <code>false</code> in the front matter of that page. For example, <code>utterances = false</code>.<p>Read <a href=https://welpo.github.io/tabi/blog/comments/>the docs</a> for more information on the available systems and their setup.<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> iine Like Buttons</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 supports <a class=external href=https://iine.to/>iine</a> like buttons for anonymous appreciation of your content. These privacy-focused buttons work without JavaScript and don’t track users.<p>To enable iine buttons globally:<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>You can customise the icon used for the buttons (follows the hierarchy):<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> Options: "heart", "thumbs_up", "upvote", or any emoji</span>
</span></code></pre><p>For multilingual sites, you can unify like counts across language versions of the same content (config-only setting; true by default):<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> Likes on /es/blog/hello/ count towards /blog/hello/</span>
</span></code></pre><p>You can also enable iine buttons on individual pages or sections by setting <code>iine = true</code> in their front matter, or override the icon with <code>iine_icon = "🚀"</code>.<h3 id=analytics><a aria-label="Anchor link for: analytics" class="header-anchor no-hover-padding" href=#analytics><span aria-hidden=true class=link-icon></span></a> Analytics</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 supports 3 privacy-friendly analytics systems: <a class=external href=https://plausible.io/>Plausible</a>, <a class=external href=https://www.goatcounter.com/>GoatCounter</a> and <a class=external href=https://umami.is/>Umami</a>.<p>You can set them up in the <code>[extra.analytics]</code> section of your <code>config.toml</code>.<ul><li><p><code>service</code>: Specifies which analytics service to use. Supported options are <code>"goatcounter"</code>, <code>"umami"</code>, and <code>"plausible"</code>.</p><li><p><code>id</code>: The unique identifier for your analytics service. This varies based on the service:</p> <ul><li>For GoatCounter, it’s the code chosen during signup. Self-hosted instances of GoatCounter don’t require this field.<li>For Umami, it’s the website ID.<li>For Plausible, it’s the domain name.</ul><li><p><code>self_hosted_url</code>: Optional. Use this field to specify the URL for self-hosted instances of your chosen analytics service. The base URL differs based on your specific setup. Some examples:</p> <ul><li>For GoatCounter: <code>"https://stats.example.com"</code><li>For Umami: <code>"https://umami.example.com"</code><li>For Plausible: <code>"https://plausible.example.com"</code></ul><li><p><code>do_not_track</code>: (Umami only) Optional. When set to <code>true</code>, the generated tracking script will include the <code>data-do-not-track="true"</code> attribute, which disables tracking for users whose browsers send a “Do Not Track” header.</p></ul><p>An example configuration for non-self-hosted GoatCounter would look like this:<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=footer><a aria-label="Anchor link for: footer" class="header-anchor no-hover-padding" href=#footer><span aria-hidden=true class=link-icon></span></a> Footer</h2><h3 id=social-media-icons><a aria-label="Anchor link for: social-media-icons" class="header-anchor no-hover-padding" href=#social-media-icons><span aria-hidden=true class=link-icon></span></a> Social Media Icons</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can add social media icons to the footer with <code>socials</code>, which takes a list of social media objects. For example:<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>To see a list of all the built-in icons, take a look at the <a class=external href=https://github.com/welpo/tabi/tree/main/static/social_icons><code>static/social_icons</code> directory on GitHub</a>.<p>Missing an icon? If you think it would be a good addition to tabi, feel free to <a href="https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=" class=external>open an issue</a> or submit a pull request (<a class=external href=https://github.com/welpo/tabi/pull/333>example</a>).<p>To use a custom icon, you can add it to your site’s <code>static/social_icons</code> directory. For example, if you add <code>custom.svg</code>, you can reference it like this:<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>NOTE</strong><p>All social links include the <code>rel='me'</code> <a class=external href=https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me>attribute</a>. This helps search engines and web services verify that the social media accounts are owned by you.</div></div><h3 id=feed-icon><a aria-label="Anchor link for: feed-icon" class="header-anchor no-hover-padding" href=#feed-icon><span aria-hidden=true class=link-icon></span></a> Feed Icon</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can add a link to your RSS/Atom feed to the footer with <code>feed_icon = true</code>.<p>Note for Zola 0.19.X users: when there are two filenames in <code>feed_filenames</code>, only the first one will be linked in the footer.<h3 id=footer-menu><a aria-label="Anchor link for: footer-menu" class="header-anchor no-hover-padding" href=#footer-menu><span aria-hidden=true class=link-icon></span></a> Footer Menu</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can add a menu to the footer with <code>footer_menu</code>, which takes a list of menu items. For example:<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>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>To add a copyright notice to your site, set <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><p>You can use the following variables:<ul><li><code>$TITLE</code> will be replaced by <code>title</code> variable set in <code>config.toml</code><li><code>$CURRENT_YEAR</code> will be replaced by the current year<li><code>$AUTHOR</code> will be replaced by the <code>author</code> variable<li><code>$SEPARATOR</code> will be replaced by the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-separator><code>separator</code> variable</a></ul><p>Markdown is rendered. The example above:<div class=full-width><img alt="Copyright section" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copyright_light.webp?h=b67d2136955cb3b232d2" class=img-light loading=lazy><img alt="Copyright section" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/copyright_dark.webp?h=632bc1c5ab6409bfbc88" class=img-dark loading=lazy></div><p>If you have a multilingual site and want to set different copyright notices for different languages, you can add the corresponding translation to <code>copyright_translations.{language_code}</code> for each language you want to support. The language code must match <a class=external href=https://welpo.github.io/tabi/blog/faq-languages/#what-are-these-two-letter-codes>tabi’s language code</a>. For example, for Spanish:<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=metadata><a aria-label="Anchor link for: metadata" class="header-anchor no-hover-padding" href=#metadata><span aria-hidden=true class=link-icon></span></a> Metadata</h2><h3 id=show-author><a aria-label="Anchor link for: show-author" class="header-anchor no-hover-padding" href=#show-author><span aria-hidden=true class=link-icon></span></a> Show author</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>To show the author(s) below the post title, set <code>show_author = true</code>.<p>This will display the authors set on <code>authors = []</code> in the front matter of the post. If this is not available, it will fall back to <code>author = ""</code>in <code>config.toml</code>.<h3 id=reading-time><a aria-label="Anchor link for: reading-time" class="header-anchor no-hover-padding" href=#reading-time><span aria-hidden=true class=link-icon></span></a> Reading Time</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>You can enable or hide the reading time of a post with <code>show_reading_time</code>. If you set it to <code>true</code>, it will be displayed in the post’s metadata, like this:</p><img alt="Post title and metadata, showing a 'See changes' link" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_light.webp?h=615119d982424267b55f" class=img-light loading=lazy><img alt="Post title and metadata, showing a 'See changes' link" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/see_changes_dark.webp?h=b000b03652037b84eee4" class=img-dark loading=lazy><p>Since it follows <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>the hierarchy</a>, you can enable it or hide it for specific pages or sections. For example, this demo sets <code>show_reading_time = false</code> in the <a class=external href=https://welpo.github.io/tabi/projects/>projects</a> section’s <a href="https://github.com/welpo/tabi/blob/main/content/projects/_index.md?plain=1" class=external><code>_index.md</code></a>, so their individual posts don’t show the reading time.<h3 id=show-date><a aria-label="Anchor link for: show-date" class="header-anchor no-hover-padding" href=#show-date><span aria-hidden=true class=link-icon></span></a> Show Date</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, the date is shown below the post title. You can hide it with <code>show_date = false</code>. This setting follows <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>the hierarchy</a>.<h3 id=date-format><a aria-label="Anchor link for: date-format" class="header-anchor no-hover-padding" href=#date-format><span aria-hidden=true class=link-icon></span></a> Date Format</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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 has three date formats: <code>long_date_format</code>, <code>short_date_format</code> and <code>archive_date_format</code>. The short format is used in a post’s metadata, while the long format is used when listing posts (i.e. on the <a href=https://welpo.github.io/tabi/blog/>blog section</a> or the <a href=https://welpo.github.io/tabi/>main page</a>). The archive format is used to display day and month on the archive page.<p>The default is “6th July 2049” for <code>long_date_format</code> and <code>short_date_format</code> in English. For other languages, the defaut is <code>"%d %B %Y"</code> for the long format and <code>"%-d %b %Y"</code> for the short format. The universal default for the archive format is <code>"%d %b"</code>.<p>In Zola, time formatting syntax is inspired fom strftime. A full reference is available in the <a class=external href=https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html>chrono docs</a>.<h4 id=per-language-date-formats><a aria-label="Anchor link for: per-language-date-formats" class="header-anchor no-hover-padding" href=#per-language-date-formats><span aria-hidden=true class=link-icon></span></a> Per-language date formats</h4><p>You can customise date formats for specific languages using the <code>date_formats</code> array in <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>This allows different languages to use culturally appropriate date formatting (e.g. Spanish “3 de febrero de 2024” vs German “3. Februar 2024”).<h3 id=custom-separator><a aria-label="Anchor link for: custom-separator" class="header-anchor no-hover-padding" href=#custom-separator><span aria-hidden=true class=link-icon></span></a> Custom Separator</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The separator appears in various places: in the title tag, between the metadata of a post…<p>The default separator is a bullet point (<code>•</code>), but you can change by setting something like <code>separator = "|"</code>.<h3 id=title-tag-order><a aria-label="Anchor link for: title-tag-order" class="header-anchor no-hover-padding" href=#title-tag-order><span aria-hidden=true class=link-icon></span></a> Title Tag Order</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>The title tag is the text that appears in the browser tab. By default, it’s the site title followed by the page title. For example, the title tag of the blog section is “~/tabi • Blog”.<p>By setting <code>invert_title_order = true</code>, you can invert the order of the site title and page title in the browser tab. For example, the title tag of the blog section would become “Blog • ~/tabi”.<hr><h2 id=security><a aria-label="Anchor link for: security" class="header-anchor no-hover-padding" href=#security><span aria-hidden=true class=link-icon></span></a> Security</h2><h3 id=encoded-email><a aria-label="Anchor link for: encoded-email" class="header-anchor no-hover-padding" href=#encoded-email><span aria-hidden=true class=link-icon></span></a> Encoded Email</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>To protect your email address from spambots, you can encode it in the footer. You can do this by setting <code>email</code> to a base64 encoded version of your email address<sup class=footnote-reference id=fr-2-1><a href=#fn-2>2</a></sup>. For example, <code>email = "bWFpbEBleGFtcGxlLmNvbQ=="</code> is the base64 encoded version of “mail@example.com”.<p>If you don’t want to encode your email yourself, tabi can encode it for you if you set <code>encode_plaintext_email = true</code>. This allows you to set a plaintext email on the config. Note that this only protects your email address on your site, not in public repositories.<p>If the email is encoded (either by you or by tabi), users with JavaScript disabled will not see the email icon.<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>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.<p>tabi has a default CSP that allows for remote images and videos, as well as YouTube and Vimeo embeds. You can customise it with <code>allowed_domains</code>, which takes a list of CSP directives. This is the default CSP:<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>This feature is enabled by default. To disable it (and allow all connections), set <code>enable_csp = false</code> on a page, section or globally. The <code>enable_csp</code> setting follows the <a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy>hierarchy</a>.<p>See the <a href=https://welpo.github.io/tabi/blog/security/>CSP documentation page</a> for more information.<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>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>As described by the recommended W3C standard <a class=external href=https://www.w3.org/TR/webmention/#abstract-p-1>Webmention</a> is a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites mention it.<p>For static sites <a class=external href=https://webmention.io/>webmention.io</a> hosts a webmention endpoint that can be used to receive webmentions. This feature fetches the webmentions stored at webmention.io and displays them for a page. You will need to have setup an account for your website at webmention.io. When you enable the webmention feature it will advertise your webmention.io endpoint and display the webmentions for all posts.<p>Enable webmentions for your site by adding the following to your <code>config.toml</code> file.<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> Specify the domain registered with 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>❓: To disable webmentions for a specific section or page, set <code>webmentions = false</code> in the <code>[extra]</code> section of that section or page’s front matter.<p>The webmentions section looks like this:<div class=full-width><img alt="Webmentions screenshot showing reposts, likes, bookmarks, and comments" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/webmention_light.webp?h=172ea81db2f223f3f7a5" class=img-light loading=lazy><img alt="Webmentions screenshot showing reposts, likes, bookmarks, and comments" src="https://welpo.github.io/tabi/blog/mastering-tabi-settings/img/webmention_dark.webp?h=817252126f1495cad050" class=img-dark loading=lazy></div><h3 id=representative-h-card><a aria-label="Anchor link for: representative-h-card" class="header-anchor no-hover-padding" href=#representative-h-card><span aria-hidden=true class=link-icon></span></a> Representative h-card</h3><table><thead><tr><th style=text-align:center>Page<th style=text-align:center>Section<th style=text-align:center><code>config.toml</code><th style=text-align:center>Follows Hierarchy<th style=text-align:center>Requires 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>By default, tabi adds a <strong>hidden</strong> representative <a class=external href=https://microformats.org/wiki/h-card>h-card</a> to the homepage. While invisible to visitors, it’s available to microformat parsers. You can check the validity of the card with the <a class=external href=https://indiewebify.me/validate-h-card/>Indiewebify.me</a> tool.<p>To disable the h-card, set <code>enable = false</code> in the <code>[extra.hcard]</code> section of <code>config.toml</code>.<p>The default h-card includes your name, website url and social media links.<p>You can set a profile picture and a small bio with the <code>avatar</code> and <code>biography</code> settings.<p>All other <a class=external href=https://microformats.org/wiki/h-card#Properties>h-card properties</a> can be added by listing them under the <code>[extra.hcard]</code>section of the config file. Simply replace all <code>-</code> characters by <code>_</code>.<hr><h2 id=extending-html-elements-in-tabi><a aria-label="Anchor link for: extending-html-elements-in-tabi" class="header-anchor no-hover-padding" href=#extending-html-elements-in-tabi><span aria-hidden=true class=link-icon></span></a> Extending HTML Elements in tabi</h2><p>Some HTML elements in tabi can be extended to support additional use cases such as adding custom JavaScript for site-wide behavior at the end of the <code>&lt;body></code> tag or including additional content at the end of the <code>&lt;head></code> element that is not otherwise supported by other tabi settings.<p>See the table below for elements that can be extended:<table><thead><tr><th style=text-align:center>Element<th style=text-align:center>Template<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>There are no explicit settings to configure for your site or pages. Simply create the relevant template file for your site, and tabi will automatically include it.<hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>If you’re using a remote Git repository, you might want to automate the process of updating the <code>updated</code> field. Here’s a guide for that: <a class=external href=https://osc.garden/blog/zola-date-git-hook/>Zola Git Pre-Commit Hook: Updating Post Dates</a>. <a href=#fr-1-1>↩</a></p><li id=fn-2><p>To encode your email in base64 you can use <a class=external href=https://www.base64encode.org/>online tools</a> or, on your terminal, run: <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="Like this post" title="Like this post" 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=Next href=https://welpo.github.io/tabi/blog/series/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>A Complete Guide to Series</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/faq-languages/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Lost in Translation? Not with tabi’s Multilingual Capabilities</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="Toggle Table of Contents" 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/blog/mastering-tabi-settings/#settings-hierarchy>Settings Hierarchy</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search>Search</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#considerations-for-zola-0-17-x-users>Considerations for Zola 0.17.X Users</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#implementation-details>Implementation Details</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#multilingual-support>Multilingual Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#appearance>Appearance</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#home-page>Home Page</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#heading>Heading</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#listing-recent-posts>Listing Recent Posts</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#listing-projects>Listing Projects</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#light-and-dark-mode-switcher>Light and Dark Mode Switcher</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#default-light-dark-mode>Default (Light/Dark) Mode</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-skins>Custom Skins</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#sans-serif-font>Sans-serif Font</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#external-link-indicator>External Link Indicator</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-css>Custom CSS</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#browser-theme-colour>Browser Theme Colour</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#compact-tags>Compact Tags</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags-sorting>Tags Sorting</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#series>Series</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#jump-to-posts-link>Jump to posts link</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#series-pages-indexation>Series pages indexation</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#git-repository-integration>Git Repository Integration</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#pages>Pages</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#projects>Projects</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#filtering-projects>Filtering Projects</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#archive>Archive</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags>Tags</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#about-page>About Page</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#seo>SEO</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#favicon>Favicon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#emoji-favicon>Emoji Favicon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url>Canonical URL</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards>Social media cards</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#fediverse-creator>Fediverse Creator</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#navigation>Navigation</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#navigation-bar>Navigation Bar</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons>Quick Navigation Buttons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#table-of-contents>Table of Contents</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#previous-and-next-article-links>Previous and Next Article Links</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footnote-backlinks>Footnote Backlinks</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#usability>Usability</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks>Copy Button on Code Blocks</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#clickable-code-block-names>Clickable Code Block Names</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#force-code-blocks-ltr>Force Code Blocks LTR</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#katex-support>KaTeX Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#mermaid-support>Mermaid Support</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-font-subset>Custom Font Subset</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#full-content-in-feed>Full Content in Feed</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#hiding-content-from-feed>Hiding Content from Feed</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#adding-comments>Comments</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#iine>iine Like Buttons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#analytics>Analytics</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footer>Footer</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons>Social Media Icons</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#feed-icon>Feed Icon</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footer-menu>Footer Menu</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright>Copyright</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#metadata>Metadata</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#show-author>Show author</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#reading-time>Reading Time</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#show-date>Show Date</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#date-format>Date Format</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#per-language-date-formats>Per-language date formats</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#custom-separator>Custom Separator</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#title-tag-order>Title Tag Order</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#security>Security</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email>Encoded Email</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#csp-content-security-policy>CSP (Content Security Policy)</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#indieweb>Indieweb</a> <ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions>Webmentions</a><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#representative-h-card>Representative h-card</a></ul><li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#extending-html-elements-in-tabi>Extending HTML Elements in tabi</a></ul></div></div></div><a title="Go to the top of the page" 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> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </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/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/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </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>Search</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=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" 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 results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink