commit c71332476331f6b7b2f955d11d73d28dfe0fe33a Author: GitHub Actions Date: Sun Sep 14 10:36:08 2025 +0000 Deploy welpo/tabi to welpo/tabi:gh-pages diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/404.html b/404.html new file mode 100644 index 0000000..1dd3e89 --- /dev/null +++ b/404.html @@ -0,0 +1,2 @@ + +~/tabi • 404

404

The page you've requested seems to be missing or hasn't been translated into your language yet.
Check the URL for errors or go back to the homepage.

La página que has solicitado parece no existir o aún no se ha traducido a tu idioma.
Revisa la URL en busca de errores o regresa a la página de inicio.

La pàgina que has sol·licitat sembla que no existeix o encara no s'ha traduït al teu idioma.
Comprova l'URL per detectar errors o torna a la pàgina d'inici.

الصفحة غير موجودة أو لم يتم ترجمتها إلى اللغة التي تطلبها.
تحقق من أن الرابط صحيح أو انتقل إلى الصفحة الرئيسية.

\ No newline at end of file diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..d454f57 --- /dev/null +++ b/about/index.html @@ -0,0 +1,2 @@ + +~/tabi • About

About

Welcome to the demo of tabi, a theme for Zola, a fast static site generator.

tabi is the creation of Óscar Fernández (welpo on GitHub), initially designed for his personal site. It is a feature-rich, modern theme that provides sane (and safe) defaults.

Looking for detailed instructions or tips on using tabi? The blog and archive sections feature the theme’s documentation, offering a variety of articles from feature overviews to step-by-step guides.

Features

tabi supports multiple languages, customisable appearance, comment integrations, and much more, all with an emphasis on performance (all JavaScript is optional) and security.

Contributing

Contributions are much appreciated! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests… Check out the Contributing Guidelines to learn how you can help. Thank you!

License

The code is available under the MIT license.

\ No newline at end of file diff --git a/about/social_cards/about.ar.jpg b/about/social_cards/about.ar.jpg new file mode 100644 index 0000000..981ba8f Binary files /dev/null and b/about/social_cards/about.ar.jpg differ diff --git a/ar.jpg b/ar.jpg new file mode 100644 index 0000000..64e77bc Binary files /dev/null and b/ar.jpg differ diff --git a/ar/about/index.html b/ar/about/index.html new file mode 100644 index 0000000..c415b4e --- /dev/null +++ b/ar/about/index.html @@ -0,0 +1,2 @@ + +~/تابي • عني

عني

مرحبًا بكم في العرض التقديمي لتابي، وهو قالب لـZola، مولد المواقع الثابتة السريع.

تابي هو من ابتكار أوسكار فرنانديز (welpo على GitHub)، وقد صُمم في البداية لموقعه الشخصي osc.garden. هو قالب بشكل حديث غني بالميزات يوفر إعدادات افتراضية منطقية وآمنة.

يمكنك العثور على وثائق تشرح طريقة إستخدام تابي في المدونة والأرشيف، سوف تجد بهم مقالات تشرح القالب وتقدم لك نظرة عامة حوله.

الميزات

يركز تابي على الاداء ويدعم تعدد اللغات أي انه يمكن لمدونتك دعم أكثر من لغة، ويمكنك تخصيص مظهرها، ويمكنك تفعيل التعليقات بها أي السماح للأخرين بالتعليق على منشوراتك. و تابي لا يجبر مدونتك على إستخدام جافاسكربت، حيث انها إختيارية ولكنك سوف تفقد المميزات التي تحتاج إليها.

المساهمة

نحن نقدر المساهمات! نرحب بالتبليغ على الأخطاء، وتحسينات الترجمة أو الوثائق (بغض النظر عن حجمها)، واقتراحات الميزات… تحقق من إرشادات المساهمة لمعرفة كيفية المساعدة. شكرًا لك!

الترخيص

الكود متاح بموجب رخصة MIT.

\ No newline at end of file diff --git a/ar/about/social_cards/about.ar.jpg b/ar/about/social_cards/about.ar.jpg new file mode 100644 index 0000000..981ba8f Binary files /dev/null and b/ar/about/social_cards/about.ar.jpg differ diff --git a/ar/ar.jpg b/ar/ar.jpg new file mode 100644 index 0000000..64e77bc Binary files /dev/null and b/ar/ar.jpg differ diff --git a/ar/archive/archive.jpg b/ar/archive/archive.jpg new file mode 100644 index 0000000..fb03554 Binary files /dev/null and b/ar/archive/archive.jpg differ diff --git a/ar/archive/ca_archive.jpg b/ar/archive/ca_archive.jpg new file mode 100644 index 0000000..cd25448 Binary files /dev/null and b/ar/archive/ca_archive.jpg differ diff --git a/ar/archive/es_archive.jpg b/ar/archive/es_archive.jpg new file mode 100644 index 0000000..c95177d Binary files /dev/null and b/ar/archive/es_archive.jpg differ diff --git a/ar/archive/index.html b/ar/archive/index.html new file mode 100644 index 0000000..f8131e3 --- /dev/null +++ b/ar/archive/index.html @@ -0,0 +1,2 @@ + +~/تابي • الأرشيف

الأرشيف

2023
- 31 يناير
  أمثلة على ماركداون

\ No newline at end of file diff --git a/ar/atom.xml b/ar/atom.xml new file mode 100644 index 0000000..f9eb726 --- /dev/null +++ b/ar/atom.xml @@ -0,0 +1,31 @@ + + + + + https://welpo.github.io/tabi + + • + + الخلاصة تجدها هنا، تُسمى أيضًا Atom. اشترك عبر نسخ الرابط إلى برنامج قارئ الخُلاصات الذي تستخدمه. قم بزيارة About Feeds لمعرفة المزيد والبدء. انه مجانا. + زيارة الموقع + المنشورات الأخيرة + تم التحديث في $DATE + + date + ~/تابي + ~/تابي + تابي هو قالب Zola سريع وحديث مع دعم متعدد اللغات و JavaScript اختياري ودرجة Lighthouse مثالية. + + + Zola2024-05-12T00:00:00+00:00https://welpo.github.io/tabi/ar/atom.xml + أمثلة على ماركداون + 2023-01-31T00:00:00+00:00 + 2023-09-01T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ar/blog/markdown/ +

تعرض هذه التدوينة بعض الأمثلة على تنسيق ماركداون، بما في ذلك الجداول، والشِفرات البرمجية والوسوم، والاقتباسات، والهوامش.

+ + diff --git a/ar/blog/blog.jpg b/ar/blog/blog.jpg new file mode 100644 index 0000000..a05a7ea Binary files /dev/null and b/ar/blog/blog.jpg differ diff --git a/ar/blog/ca_blog.jpg b/ar/blog/ca_blog.jpg new file mode 100644 index 0000000..c9c9057 Binary files /dev/null and b/ar/blog/ca_blog.jpg differ diff --git a/ar/blog/es_blog.jpg b/ar/blog/es_blog.jpg new file mode 100644 index 0000000..4c91a6e Binary files /dev/null and b/ar/blog/es_blog.jpg differ diff --git a/ar/blog/index.html b/ar/blog/index.html new file mode 100644 index 0000000..540de84 --- /dev/null +++ b/ar/blog/index.html @@ -0,0 +1,2 @@ + +~/تابي • التدوينات

التدوينات

31 يناير 2023

أمثلة على ماركداون

ماركداون توضيحي

إقرأ المزيد →

\ No newline at end of file diff --git a/ar/blog/markdown/index.html b/ar/blog/markdown/index.html new file mode 100644 index 0000000..a2ec2d7 --- /dev/null +++ b/ar/blog/markdown/index.html @@ -0,0 +1,13 @@ + +~/تابي • أمثلة على ماركداون

أمثلة على ماركداون

31 يناير 2023
الوقت المتوقع للقراءة: دقيقتان
الوسوم:
ماركداون,
توضيحي

تم التحديث في 1 سبتمبر 2023
الإطلاع على التغييرات

ملاحظة عن الاتجاه

يدعم تابي الكتابة من اليمين إلى اليسار (RTL) بشكل كامل، مما يجعله مثالياً للغة العربية.

الشفرات البرمجية والمعادلات الرياضية تبقى من اليسار إلى اليمين كما هو متوقع.

الرياضيات مع $\KaTeX$

$\KaTeX$ هي مكتبة سريعة وسهلة الاستخدام تمكن من عرض الرموز الرياضية باستخدام صيغة LaTeX.

يمكنك استخدام $\KaTeX$ ضمن السطر عن طريق وضع التعبير بين $ أو بين \$ و \$.

على سبيل المثال، $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ سيظهر هكذا: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $

لعرض التعبير في سطر منفصل ومتوسط، ضعه بين $$ أو بين \\[ و \\].

على سبيل المثال، \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] سيظهر هكذا: \[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \]

لتفعيل $\KaTeX$ لتدوينة أو قسم كامل، أضف katex = true داخل قسم [extra] في المقدمة. على سبيل المثال:

title = "تجربة KaTeX"
+date = 2002-11-30
+
+[extra]
+katex = true
+

يمكنك أيضاً تفعيله بشكل عام عن طريق تعيين katex = true في قسم [extra] في ملف config.toml الخاص بك.

لتحسين الأداء والأمان، يتم استضافة ملفات جافا سكريبت و CSS والخطوط الخاصة بـ $\KaTeX$ محلياً.

ملاحظة: بعد تفعيل $\KaTeX$، إذا أردت استخدام $ بدون عرض تعبير رياضي، استخدم شرطة مائلة للخلف قبلها: \$.

جدول

هذا مثال على جدول¹. تتغير ألوانه حسب سمة التدوينة.
الرمز العنصر العدد الذري
H هيدروجين 1
C كربون 6
Fe حديد 26
Au ذهب 79

الرمز	العنصر	العدد الذري
H	هيدروجين	1
C	كربون	6
Fe	حديد	26
Au	ذهب	79

الشِفرات البرمجية

fn main() {
+    println!("مرحباً يا عالم") -> ();
+}
+

من اليمين إلى اليسار

نص قل_مرحباً(نص الاسم) {
+    أرجع تنسيق("مرحباً {الاسم}")؛
+}
+

سطر برمجي

في Rust، تعلن عن متغير متغير باستخدام let mut x = 5، بينما في Python، تستخدم ببساطة x = 5. وبالمثل، لطباعة قيمة في Rust، تستخدم println!("القيمة: {}", x)، ولكن في Python، الأمر بسيط مثل print(f"القيمة: {x}") وفي لغة البرمجة العربية هو مهنة = "صائد فئران"

اقتباس

وابِطُكَ قابِضِ الأَرواحِ يَرمي … بِسَهمِ المَوتِ مِن تَحتِ الثِيابِ
شَرابُكَ في السَرابِ إِذا عَطِشنا … وَخُبزُكَ عِندَ مُنقَطِعِ التُرابِ
— أبو الشمقمق، العصر العباسي

وهذا مثال على الهامش! ↩

\ No newline at end of file diff --git a/ar/blog/markdown/social_cards/blog_markdown.jpg b/ar/blog/markdown/social_cards/blog_markdown.jpg new file mode 100644 index 0000000..98e7a5b Binary files /dev/null and b/ar/blog/markdown/social_cards/blog_markdown.jpg differ diff --git a/ar/blog/markdown/social_cards/ca_blog_markdown.jpg b/ar/blog/markdown/social_cards/ca_blog_markdown.jpg new file mode 100644 index 0000000..a94d2b5 Binary files /dev/null and b/ar/blog/markdown/social_cards/ca_blog_markdown.jpg differ diff --git a/ar/blog/markdown/social_cards/es_blog_markdown.jpg b/ar/blog/markdown/social_cards/es_blog_markdown.jpg new file mode 100644 index 0000000..1034677 Binary files /dev/null and b/ar/blog/markdown/social_cards/es_blog_markdown.jpg differ diff --git a/ar/blog/page/1/index.html b/ar/blog/page/1/index.html new file mode 100644 index 0000000..60a22a5 --- /dev/null +++ b/ar/blog/page/1/index.html @@ -0,0 +1 @@ +Redirect

Click here to be redirected.

\ No newline at end of file diff --git a/ar/ca.jpg b/ar/ca.jpg new file mode 100644 index 0000000..985bb7c Binary files /dev/null and b/ar/ca.jpg differ diff --git a/ar/es.jpg b/ar/es.jpg new file mode 100644 index 0000000..c56f364 Binary files /dev/null and b/ar/es.jpg differ diff --git a/ar/index.html b/ar/index.html new file mode 100644 index 0000000..9119f8c --- /dev/null +++ b/ar/index.html @@ -0,0 +1,2 @@ + +~/تابي

تابي هو قالب Zola سريع وعصري. يهدف ليكون صفحة ومدونة شخصية. يتميز بتقييم مثالي في Lighthouse، وتصميم متجاوب، وسمات داكنة وفاتحة، وشِفرات قصيرة مخصصة، والعديد من المميزات الأخرى.

ملاحظة: هذه الصفحة هي عرض توضيحي لدعم اللغة العربية في تابي. للحصول على التوثيق الكامل، يرجى الرجوع إلى النسخة الإنجليزية.

أخر التدوينات

31 يناير 2023

أمثلة على ماركداون

ماركداون توضيحي

إقرأ المزيد →

المشاريع المميزة

تابي

سمة زولا عصرية غنية بالمميزات مع دعم متميز لتعدد اللغات

\ No newline at end of file diff --git a/ar/index.jpg b/ar/index.jpg new file mode 100644 index 0000000..d8c846d Binary files /dev/null and b/ar/index.jpg differ diff --git a/ar/privacy/index.html b/ar/privacy/index.html new file mode 100644 index 0000000..9309380 --- /dev/null +++ b/ar/privacy/index.html @@ -0,0 +1,2 @@ + +~/تابي • سياسة الخصوصية

سياسة الخصوصية

31 أكتوبر 2023
الوقت المتوقع للقراءة: 3 دقائق

تم التحديث في 12 مايو 2024
الإطلاع على التغييرات

هذه السياسة توضح كيف نقوم بجمع ومعالجة بياناتك على هذا الموقع.

ما البيانات التي نجمعها؟

التصفح العام

أثناء تصفح الموقع، لا يتم جمع أي معلومات شخصية.

التحليلات

لتحسين الموقع، يتم جمع البيانات غير الشخصية التالية:

المرجع: المصدر الذي قادك إلى هذا الموقع.
الرابط المطلوب: الصفحة المحددة التي قمت بزيارتها.
وكيل المستخدم: يحدد المتصفح ونظام التشغيل الذي تستخدمه (مثل “Safari 17.0، Mac OS X”).
اسم البلد: البلد الذي زرت الموقع منه، يتم تحديده بواسطة عنوان IP الخاص بك.
حجم الشاشة: أبعاد شاشة جهازك.
الوقت: الوقت الذي وصلت فيه إلى الموقع.
جلسة التصفح: رمز تعريف مؤقت يتم إنشاؤه من عنوان IP الخاص بك، ومعلومات المتصفح، ورقم عشوائي. يُستخدم هذا للتعرف على جلسة التصفح لمدة 8 ساعات. بعد ذلك، يتم حذف الرمز من الذاكرة ولا يُخزن في أي مكان.

نحن لا نتتبع الزوار عبر الجلسات، ولا نتتبع مدة بقائك في الموقع أو أين تذهب بعد مغادرتك.

كيف نجمع هذه البيانات؟

التحليلات

يتم جمع البيانات غير الشخصية باستخدام نسخة مستضافة ذاتيًا من GoatCounter، وهي منصة مفتوحة المصدر لتحليلات الويب تركز على الخصوصية.

كيف سنستخدم البيانات؟

تُستخدم البيانات المرسلة إلى GitHub لعرض تعليقك على الموقع.

تُستخدم البيانات غير الشخصية لإنشاء إحصائيات حول الموقع، مثل عدد الزوار يوميًا، أو الصفحات والمراجع الأكثر شعبية. تُستخدم هذه البيانات لتحسين هذا الموقع التجريبي وقالب تابي. يمكنك رؤية الإحصائيات الناتجة عن هذه البيانات على صفحة الإحصائيات العامة.

جميع البيانات المجمعة متاحة للجمهور، سواء في شكل تعليقات أو إحصائيات.

نحن لا نستخدم البيانات لأي غرض آخر.

كيف نقوم بتخزين البيانات؟

بيانات التعليقات لا تُخزن بواسطة Giscus، كما هو موضح في سياسة الخصوصية الخاصة بهم. يتم تخزين البيانات على خوادم GitHub. راجع سياسة الخصوصية الخاصة بGitHub.

يتم تخزين بيانات التحليلات على خادم مستضاف بواسطة Vultr. يقع الخادم في باريس، فرنسا.

كم من الوقت سنقوم بتخزين البيانات؟

تُخزن التعليقات إلى أجل غير مسمى، أو حتى تطلب حذفها.

تُخزن باقي البيانات إلى أجل غير مسمى.

ما هي حقوقك في حماية البيانات؟

اعتمادًا على المعالجة والأساس القانوني، هناك عدد من الخيارات المتاحة لك للحفاظ على السيطرة على بياناتك الشخصية:

حق الوصول إلى بياناتك
حق تعديل بياناتك
حق الاعتراض على معالجة بياناتك الشخصية
حق تقييد معالجة بياناتك
حق حذف بياناتك
حق سحب موافقتك

إذا قدمت طلبًا، لدينا شهر واحد للرد عليك. إذا كنت ترغب في ممارسة أي من هذه الحقوق، يرجى الاتصال بنا باستخدام أيقونة البريد الإلكتروني في تذييل الموقع.

الكوكيز

الموقع لا يستخدم الكوكيز.

سياسات الخصوصية لمواقع أخرى

يحتوي هذا الموقع على روابط لمواقع أخرى. تنطبق سياسة الخصوصية هذه فقط على هذا الموقع، لذا إذا قمت بالنقر على رابط لموقع آخر، يجب عليك قراءة سياسة الخصوصية الخاصة بهم.

التغييرات على سياسة الخصوصية

نحن نراجع هذه السياسة بانتظام ونضع أي تحديثات على هذه الصفحة. يمكنك التحقق من تاريخ تحديث هذه السياسة، بالإضافة إلى سجل التغييرات تحت عنوان الصفحة.

كيف تتواصل معنا

إذا كانت لديك أي أسئلة حول سياسة الخصوصية هذه، أو البيانات التي نحتفظ بها عنك، أو إذا كنت ترغب في ممارسة أحد حقوق حماية البيانات الخاصة بك، فلا تتردد في الاتصال بنا باستخدام أيقونة البريد الإلكتروني في تذييل الموقع.

\ No newline at end of file diff --git a/ar/projects/ca_projects.jpg b/ar/projects/ca_projects.jpg new file mode 100644 index 0000000..5de0a33 Binary files /dev/null and b/ar/projects/ca_projects.jpg differ diff --git a/ar/projects/es_projects.jpg b/ar/projects/es_projects.jpg new file mode 100644 index 0000000..ebd9689 Binary files /dev/null and b/ar/projects/es_projects.jpg differ diff --git a/ar/projects/index.html b/ar/projects/index.html new file mode 100644 index 0000000..8482b66 --- /dev/null +++ b/ar/projects/index.html @@ -0,0 +1,2 @@ + +~/تابي • مشاريعي

مشاريعي

تابي

سمة زولا عصرية غنية بالمميزات مع دعم متميز لتعدد اللغات

\ No newline at end of file diff --git a/ar/projects/projects.jpg b/ar/projects/projects.jpg new file mode 100644 index 0000000..dce4ac0 Binary files /dev/null and b/ar/projects/projects.jpg differ diff --git a/ar/projects/tabi/index.html b/ar/projects/tabi/index.html new file mode 100644 index 0000000..a9afb15 --- /dev/null +++ b/ar/projects/tabi/index.html @@ -0,0 +1,2 @@ + +~/تابي • تابي

تابي

تابي هي سمة عصرية غنية بالمميزات لـZola، منشئ مواقع ثابتة سريع.

عرض على GitHub • عرض توضيحي وتوثيق

المميزات

دعم كامل للغة العربية والكتابة من اليمين إلى اليسار
دعم للسلاسل لإنشاء محتوى متسلسل مثل الدروس والدورات
سمتان داكنة وفاتحة، مع التبديل التلقائي حسب إعدادات النظام
دعم التعليقات باستخدام giscus أو utterances أو Hyvor Talk أو Isso
دعم KaTeX للمعادلات الرياضية
دعم Indieweb مع microformats وh-card وwebmentions
دعم Mermaid لإنشاء المخططات
بحث محلي متعدد اللغات
تصميم متجاوب يعمل على جميع الأجهزة
صفحة مشاريع وأرشيف

ممارسات التطوير

الالتزامات التقليدية وGitmoji: تتبع رسائل الالتزام تنسيقات موحدة لتحسين القراءة
تتبع المشكلات: لكل خطأ أو ميزة جديدة تذكرة مخصصة، مرتبطة بأي التزامات برمجية وطلبات سحب ذات صلة
تعليقات شاملة: يتم توثيق التذاكر بالصور ومقاطع الفيديو والأوصاف التفصيلية لتسهيل التواصل الفعال وحل المشكلات
الإحالات المرجعية: نربط جميع التذاكر بالتزامات الشفرة وطلبات السحب أو المشكلات ذات الصلة للتتبع الكامل

تطور المشروع

تم تصميم تابي في الأصل لموقعي الشخصي، osc.garden. على الرغم من أصولها للاستخدام الشخصي، تم تنفيذ أفضل الممارسات منذ البداية لضمان الجودة وقابلية الصيانة. ومنذ ذلك الحين نمت السمة لتجذب مجتمعًا نشطًا من المساهمين على GitHub.

ابدأ رحلة الكتابة مع تابي

لديك شيء تريد قوله. ربما عن تجربتك في تعلم لغة جديدة، أو عن رحلتك في استكشاف فن الفلامنكو، أو عن كيف نجحت في حل مشكلة برمجية في مشروع مفتوح المصدر.

تابي توفر الأساس المثالي لمساحة كتابتك، مما يتيح لك التركيز على كلماتك بينما يهتم Zola وتابي بالجانب التقني. ادخل عالم التدوين مع نظام يجعل كل تدوينة متعة في الكتابة والقراءة. صوتك له قيمة—شاركه مع العالم.

\ No newline at end of file diff --git a/ar/projects/tabi/social_cards/ca_projects_tabi.jpg b/ar/projects/tabi/social_cards/ca_projects_tabi.jpg new file mode 100644 index 0000000..6fec2e6 Binary files /dev/null and b/ar/projects/tabi/social_cards/ca_projects_tabi.jpg differ diff --git a/ar/projects/tabi/social_cards/es_projects_tabi.jpg b/ar/projects/tabi/social_cards/es_projects_tabi.jpg new file mode 100644 index 0000000..4d58e5b Binary files /dev/null and b/ar/projects/tabi/social_cards/es_projects_tabi.jpg differ diff --git a/ar/projects/tabi/social_cards/projects_tabi.jpg b/ar/projects/tabi/social_cards/projects_tabi.jpg new file mode 100644 index 0000000..11f51c8 Binary files /dev/null and b/ar/projects/tabi/social_cards/projects_tabi.jpg differ diff --git a/ar/projects/tabi/tabi.webp b/ar/projects/tabi/tabi.webp new file mode 100644 index 0000000..c05d2a7 Binary files /dev/null and b/ar/projects/tabi/tabi.webp differ diff --git a/ar/tags/index.html b/ar/tags/index.html new file mode 100644 index 0000000..5492ffe --- /dev/null +++ b/ar/tags/index.html @@ -0,0 +1,2 @@ + +~/تابي • الوسوم

جميع الوسوم

\ No newline at end of file diff --git a/ar/tags/jf-skrybt/atom.xml b/ar/tags/jf-skrybt/atom.xml new file mode 100644 index 0000000..d1c8c76 --- /dev/null +++ b/ar/tags/jf-skrybt/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + الخلاصة تجدها هنا، تُسمى أيضًا Atom. اشترك عبر نسخ الرابط إلى برنامج قارئ الخُلاصات الذي تستخدمه. قم بزيارة About Feeds لمعرفة المزيد والبدء. انه مجانا. + زيارة الموقع + المنشورات الأخيرة + تم التحديث في $DATE + + date + جافا سكريبت + ~/تابي - جافا سكريبت + تابي هو قالب Zola سريع وحديث مع دعم متعدد اللغات و JavaScript اختياري ودرجة Lighthouse مثالية. + + + Zolahttps://welpo.github.io/tabi/ar/tags/jf-skrybt/atom.xml + diff --git a/ar/tags/jf-skrybt/index.html b/ar/tags/jf-skrybt/index.html new file mode 100644 index 0000000..cacaa8e --- /dev/null +++ b/ar/tags/jf-skrybt/index.html @@ -0,0 +1,2 @@ + +~/تابي • جافا سكريبت

جافا سكريبت

تابي

ويب جافا سكريبت

سمة زولا عصرية غنية بالمميزات مع دعم متميز لتعدد اللغات

إقرأ المزيد →

← جميع الوسوم

\ No newline at end of file diff --git a/ar/tags/mrkdwn/atom.xml b/ar/tags/mrkdwn/atom.xml new file mode 100644 index 0000000..562fbc8 --- /dev/null +++ b/ar/tags/mrkdwn/atom.xml @@ -0,0 +1,31 @@ + + + + + https://welpo.github.io/tabi + + • + + الخلاصة تجدها هنا، تُسمى أيضًا Atom. اشترك عبر نسخ الرابط إلى برنامج قارئ الخُلاصات الذي تستخدمه. قم بزيارة About Feeds لمعرفة المزيد والبدء. انه مجانا. + زيارة الموقع + المنشورات الأخيرة + تم التحديث في $DATE + + date + ماركداون + ~/تابي - ماركداون + تابي هو قالب Zola سريع وحديث مع دعم متعدد اللغات و JavaScript اختياري ودرجة Lighthouse مثالية. + + + Zola2023-09-01T00:00:00+00:00https://welpo.github.io/tabi/ar/tags/mrkdwn/atom.xml + أمثلة على ماركداون + 2023-01-31T00:00:00+00:00 + 2023-09-01T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ar/blog/markdown/ +

+ + diff --git a/ar/tags/mrkdwn/index.html b/ar/tags/mrkdwn/index.html new file mode 100644 index 0000000..ef8b82a --- /dev/null +++ b/ar/tags/mrkdwn/index.html @@ -0,0 +1,2 @@ + +~/تابي • ماركداون

ماركداون

31 يناير 2023

أمثلة على ماركداون

ماركداون توضيحي

إقرأ المزيد →

← جميع الوسوم

\ No newline at end of file diff --git a/ar/tags/twdyhy/atom.xml b/ar/tags/twdyhy/atom.xml new file mode 100644 index 0000000..9793629 --- /dev/null +++ b/ar/tags/twdyhy/atom.xml @@ -0,0 +1,31 @@ + + + + + https://welpo.github.io/tabi + + • + + الخلاصة تجدها هنا، تُسمى أيضًا Atom. اشترك عبر نسخ الرابط إلى برنامج قارئ الخُلاصات الذي تستخدمه. قم بزيارة About Feeds لمعرفة المزيد والبدء. انه مجانا. + زيارة الموقع + المنشورات الأخيرة + تم التحديث في $DATE + + date + توضيحي + ~/تابي - توضيحي + تابي هو قالب Zola سريع وحديث مع دعم متعدد اللغات و JavaScript اختياري ودرجة Lighthouse مثالية. + + + Zola2023-09-01T00:00:00+00:00https://welpo.github.io/tabi/ar/tags/twdyhy/atom.xml + أمثلة على ماركداون + 2023-01-31T00:00:00+00:00 + 2023-09-01T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ar/blog/markdown/ +

+ + diff --git a/ar/tags/twdyhy/index.html b/ar/tags/twdyhy/index.html new file mode 100644 index 0000000..1c3b782 --- /dev/null +++ b/ar/tags/twdyhy/index.html @@ -0,0 +1,2 @@ + +~/تابي • توضيحي

توضيحي

31 يناير 2023

أمثلة على ماركداون

ماركداون توضيحي

إقرأ المزيد →

← جميع الوسوم

\ No newline at end of file diff --git a/ar/tags/wyb/atom.xml b/ar/tags/wyb/atom.xml new file mode 100644 index 0000000..93ac778 --- /dev/null +++ b/ar/tags/wyb/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + الخلاصة تجدها هنا، تُسمى أيضًا Atom. اشترك عبر نسخ الرابط إلى برنامج قارئ الخُلاصات الذي تستخدمه. قم بزيارة About Feeds لمعرفة المزيد والبدء. انه مجانا. + زيارة الموقع + المنشورات الأخيرة + تم التحديث في $DATE + + date + ويب + ~/تابي - ويب + تابي هو قالب Zola سريع وحديث مع دعم متعدد اللغات و JavaScript اختياري ودرجة Lighthouse مثالية. + + + Zolahttps://welpo.github.io/tabi/ar/tags/wyb/atom.xml + diff --git a/ar/tags/wyb/index.html b/ar/tags/wyb/index.html new file mode 100644 index 0000000..593fa75 --- /dev/null +++ b/ar/tags/wyb/index.html @@ -0,0 +1,2 @@ + +~/تابي • ويب

ويب

تابي

ويب جافا سكريبت

سمة زولا عصرية غنية بالمميزات مع دعم متميز لتعدد اللغات

إقرأ المزيد →

← جميع الوسوم

\ No newline at end of file diff --git a/archive/archive.jpg b/archive/archive.jpg new file mode 100644 index 0000000..fb03554 Binary files /dev/null and b/archive/archive.jpg differ diff --git a/archive/ca_archive.jpg b/archive/ca_archive.jpg new file mode 100644 index 0000000..cd25448 Binary files /dev/null and b/archive/ca_archive.jpg differ diff --git a/archive/es_archive.jpg b/archive/es_archive.jpg new file mode 100644 index 0000000..c95177d Binary files /dev/null and b/archive/es_archive.jpg differ diff --git a/archive/index.html b/archive/index.html new file mode 100644 index 0000000..e79087a --- /dev/null +++ b/archive/index.html @@ -0,0 +1,2 @@ + +~/tabi • Archive

Add comments to your posts with these 4 comment systems

14th Jul 2023
3 min read
Tags:
showcase,
tutorial

Updated on 26th Jul 2023
See changes

tabi currently supports four comment systems: giscus, utterances, Hyvor Talk, and Isso.

giscus and utterances are open-source projects that let you add a comments section to your website using GitHub issues (utterances) or discussions (giscus). They are perfect for static site generators like Zola, since they enable your readers to interact and leave comments on your posts without requiring a traditional backend or database.

As they are based on GitHub, giscus and utterances require users to have a GitHub account and authorize the respective app. Alternatively, visitors can also comment directly on the corresponding GitHub discussion or issue.

Both are great tools for adding comments to your blog, but giscus has a few advantages:

More themes.
Support for reactions.
Comment replies and conversation view.
Safer: utterances requires enabling unsafe inline styles to set the height of the frame; giscus doesn’t.
Multilanguage support: utterances is only available in English; giscus supports over 20 languages.
More active development: giscus’ last commit, as of this post, was a two days ago. utterances’ last commit was over a year ago.

Hyvor Talk is a paid privacy-focused commenting platform. It offers all of the giscus’ advantages, and a few more, like moderation and spam detection.

Isso is an open-source self-hosted commenting system that stores comments in its own database. One of its main advantages is privacy; it does not share user data with third parties. It also has a lightweight and clean interface, making it easy for your visitors to leave comments. Isso also allows anonymous comments, potentially increasing user engagement on your website.

Setup

GitHub based systems

The configuration of both giscus and utterances is quite similar. First, visit the website of the system you want to enable: giscus.app or utteranc.es.

Follow the instructions on the Configuration section of the website, and set it up it to your liking. Then, set the values shown on the Enable giscus/utterances section (the script codeblock) on the proper section of your config.toml: [extra.giscus] or [extra.utterances].

giscus

giscus has a few more settings than utterances:

[extra.giscus]
+enabled_for_all_posts = false
+automatic_loading = true
+repo = "yourGithubUsername/yourRepo"
+repo_id = "YourRepoID"
+category = "Announcements"
+category_id = "YourCategoryID"
+mapping = "slug"
+strict_title_matching = 1  # 1 to enable, 0 to disable.
+enable_reactions = 1  # 1 to enable, 0 to disable.
+comment_box_above_comments = true
+light_theme = "noborder_light"
+dark_theme = "noborder_dark"
+lang = ""  # Leave blank to match the page's language.
+lazy_loading = true
+

utterances

[extra.utterances]
+enabled_for_all_posts = false
+automatic_loading = true
+repo = "yourgithubuser/yourrepo"
+issue_term = "slug"
+label = "💬"
+light_theme = "github-light"
+dark_theme = "photon-dark"
+lazy_loading = true
+

Hyvor Talk

Set up your website from the Hyvor Talk console and fill in the settings in config.toml:

[extra.hyvortalk]
+enabled_for_all_posts = false
+automatic_loading = true
+website_id = "1234"
+page_id_is_slug = true
+lang = ""
+page_author = ""  # Email (or base64 encoded email) of the author.
+lazy_loading = true
+

Isso

To enable Isso, you’ll first need to install and run an Isso server (here’s a useful guide). Then, complete these settings in config.toml:

[extra.isso]
+enabled_for_all_posts = false
+automatic_loading = true
+endpoint_url = "https://example.com/comments/"  # URL to Isso host.
+page_id_is_slug = true
+lang = ""
+max_comments_top = "inf"
+max_comments_nested = "5"
+avatar = true
+voting = true
+page_author_hashes = ""
+lazy_loading = true
+

Common settings

Setting enabled_for_all_posts = true for a comment system will enable it globally.

Alternatively, enable comments on an individual post’s front matter by adding the name of the system (utterances, giscus, hyvortalk, or isso) = true. For example, this is how you would enable giscus:

title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
+date = 2007-04-26
+description = "Lessons learned from beet farming and paper sales."
+
+[taxonomies]
+tags = ["personal", "beets"]
+
+[extra]
+giscus = true
+

If you accidentally enable more than one system, your site will fail to build with an error.

If your site has multiple languages with matching posts (like this demo), and you’d like to share comments between languages, you must use issue_term = "slug" (for giscus and utterances) or page_id_is_slug = true (for Hyvor Talk or Isso). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.

Live example

Below you’ll find the giscus widget using the settings shown above.

\ No newline at end of file diff --git a/blog/comments/social_cards/blog_comments.jpg b/blog/comments/social_cards/blog_comments.jpg new file mode 100644 index 0000000..4047579 Binary files /dev/null and b/blog/comments/social_cards/blog_comments.jpg differ diff --git a/blog/comments/social_cards/ca_blog_comments.jpg b/blog/comments/social_cards/ca_blog_comments.jpg new file mode 100644 index 0000000..06d3294 Binary files /dev/null and b/blog/comments/social_cards/ca_blog_comments.jpg differ diff --git a/blog/comments/social_cards/es_blog_comments.jpg b/blog/comments/social_cards/es_blog_comments.jpg new file mode 100644 index 0000000..b6713fb Binary files /dev/null and b/blog/comments/social_cards/es_blog_comments.jpg differ diff --git a/blog/custom-font-subset/index.html b/blog/custom-font-subset/index.html new file mode 100644 index 0000000..4690ccf --- /dev/null +++ b/blog/custom-font-subset/index.html @@ -0,0 +1,118 @@ + +~/tabi • Optimise loading times with a custom font subset

Optimise loading times with a custom font subset

29th Apr 2023
3 min read
Tags:
showcase,
tutorial

Updated on 12th Jan 2025
See changes

The problem

Custom fonts cause flashing text in Firefox. For a gif and more details, see this issue.

The solution

To fix 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.

By default, there are subset files for English and Spanish characters (with a few symbols). These files are loaded when the Zola page/site is set to that language.

TIP

If you’re using a custom font, either create your custom subset (see below) or disable the built-in subsets completely with enable_subset = false in your config.toml.

Here’s how you can create a custom font subset that only includes the characters used in your header, for maximum efficiency.

Requirements

Install these tools:

Run pip install fonttools brotli to install both.

The script

The script below takes a config.toml file and a font file as input, extracts the necessary characters, creates a subset of the font, and generates a CSS file containing the base64 encoded subset.

#!/usr/bin/env bash
+
+usage() {
+    echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"
+    echo
+    echo "Options:"
+    echo "  --config, -c   Path to the config.toml file."
+    echo "  --font, -f     Path to the font file."
+    echo "  --output, -o   Output path for the generated subset.css file (default: current directory)"
+    echo "  --help, -h     Show this help message and exit"
+}
+
+# Default output is current directory.
+output_path="."
+
+# Parse command line options
+while [ "$#" -gt 0 ]; do
+    case "$1" in
+        --config|-c)
+            config_file="$2"
+            shift 2
+            ;;
+        --font|-f)
+            font_file="$2"
+            shift 2
+            ;;
+        --output|-o)
+            output_path="$2"
+            shift 2
+            ;;
+        --help|-h)
+            usage
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1"
+            usage
+            exit 1
+            ;;
+    esac
+done
+
+# Check if -c and -f options are provided
+if [ -z "$config_file" ]; then
+    echo "Error: --config|-c option is required."
+    usage
+    exit 1
+fi
+
+if [ -z "$font_file" ]; then
+    echo "Error: --font|-f option is required."
+    usage
+    exit 1
+fi
+
+# Check if config and font files exist.
+if [ ! -f "$config_file" ]; then
+    echo "Error: Config file '$config_file' not found."
+    exit 1
+fi
+
+if [ ! -f "$font_file" ]; then
+    echo "Error: Font file '$font_file' not found."
+    exit 1
+fi
+
+# Extract the title and menu names from the config file.
+title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
+menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
+language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
+
+# If the site is multilingual, get the menu translations.
+if [ -n "$language_names" ]; then
+    for menu_name in $menu_names; do
+        # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
+        menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' )
+        # Add the found menu value to the translations string
+        menu_names+="$menu_translation"
+    done
+fi
+
+# Combine the extracted strings.
+combined="$title$menu_names$language_names"
+
+# Get unique characters.
+unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n')
+
+# Create a temporary file for subset.woff2.
+temp_subset=$(mktemp)
+
+# Create the subset.
+pyftsubset "$font_file" \
+    --text="$unique_chars" \
+    --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli
+
+# Remove trailing slash from output path, if present.
+output_path=${output_path%/}
+
+# Base64 encode the temporary subset.woff2 file and create the CSS file.
+base64_encoded_font=$(base64 -i "$temp_subset")
+echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css"
+
+# Remove the temporary subset.woff2 file.
+rm "$temp_subset"
+

Usage

Save the script somewhere like ~/bin/subset_font. Make it executable with chmod +x ~/bin/subset_font.

Now you can run it with the required --config and --font options:

~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2
+

By default, this generates a custom_subset.css file in the current directory. Use -o or --output to specify a different path:

~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output
+

You should place this custom_subset.css file inside the static/ directory.

Automating with Pre-commit Hook

You might change the title or menu options of your site, making the custom subset no longer useful.

To automate the process of creating this file, you can integrate the script into a Git pre-commit hook that checks for changes in the config.toml file, runs the script, and stores the resulting CSS file in the static/ directory of your site.

Create a .git/hooks/pre-commit file in your Git project, if it doesn’t already exist.
Make it executable with chmod +x .git/hooks/pre-commit.
Add the following code to the file:

# Check if config.toml has been modified.
+if git diff --cached --name-only | grep -q "config.toml"; then
+    echo "config.toml modified. Running subset_font…"
+
+    # Call the subset_font script.
+    ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/
+
+    # Add the generated subset.css file to the commit.
+    git add static/custom_subset.css
+fi
+

Make sure to modify the script to match the path where you stored the subset_font script. The config and font paths should work fine with tabi’s default setup.

Now, every time you commit changes to your Git project, the pre-commit hook will check for modifications in the config.toml file and automatically run the subset_font script to update the custom_subset.css file.

By the way, if you’re interested in a way to automatically update the date of your Zola posts or compress your PNG files, check out this post.

If you want to use all scripts at once (compressing PNG files, updating the date, and creating the font subset), combine their code into a single .git/hooks/pre-commit file.

\ No newline at end of file diff --git a/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg b/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg new file mode 100644 index 0000000..7bb8b26 Binary files /dev/null and b/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg differ diff --git a/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg b/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg new file mode 100644 index 0000000..573ff88 Binary files /dev/null and b/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg differ diff --git a/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg b/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg new file mode 100644 index 0000000..8bddf80 Binary files /dev/null and b/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg differ diff --git a/blog/customise-tabi/index.html b/blog/customise-tabi/index.html new file mode 100644 index 0000000..a36cce9 --- /dev/null +++ b/blog/customise-tabi/index.html @@ -0,0 +1,36 @@ + +~/tabi • Customise tabi with skins and a default theme

Customise tabi with skins and a default theme

9th Aug 2023
5 min read
Tags:
showcase,
tutorial

Updated on 12th Sep 2024
See changes

tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins).

Default theme

Use default_theme = "dark" to set the dark theme as the default, or default_theme = "light" to set the light theme as the default.

Setting default_theme = "" (or commenting out the variable) will follow the user’s system preference (light or dark mode).

To permanently set your site to either the dark or light theme, you need to disable the theme switcher in config.toml and set your preferred theme as the default_theme.

For example, to have a permanent dark theme:

[extra]
+theme_switcher = false
+default_theme = "dark"
+

Skins

Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can create your own.

A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme.

Enabling a skin is as easy as setting the skin variable in your config.toml with the name of the skin. For example:

[extra]
+skin = "sakura"
+

Take a look below at the available skins below.

Click on the images to switch between dark and light themes.

Teal

The default skin. If the skin variable is unset (or set to "teal"), this is what tabi looks like:

Lavender

To apply, use skin = "lavender".

Red

Switch to this by setting skin = "red".

Mint

A skin designed by 🅿️.

Activate it with skin = "mint".

Sakura

Inspired by the Japanese cherry blossom season.

To enable this skin, adjust skin = "sakura".

Blue

For this appearance, set skin = "blue".

Indigo Ingot

Indigo for blue (in light theme) and ingot for gold (in dark theme).

To activate this skin, use skin = "indigo_ingot".

Evangelion

Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).

Monochrome

To achieve this look, set skin = "monochrome".

Low contrast orange

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

To use, set skin = "lowcontrast_orange".

Low contrast peach

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

To enable it, specify skin = "lowcontrast_peach".

Low contrast pink

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

For this colourscheme, choose skin = "lowcontrast_pink".

Create your own skin

You’re not just limited to predefined skins. Why not create a look that’s distinctively tailored to your preferences?

You can save your new skin it in either of these two directories:

Inside the theme’s directory: themes/tabi/sass/skins
Inside your main site’s directory: sass/skins (you’ll need to create this folder)

Create a new .scss file (for example, your_skin.scss) in your preferred location. This file needs to have these two variables (this is the default skin, “teal”):

// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+// Apply dark theme variables when dark theme is explicitly set.
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
+

Modify the colours to your taste. Once you’re satisfied, update the skin variable to match your filename.

Remember to consider the accessibility of the colours you choose. Here’s a link that can help you: WebAIM: Contrast Checker. The background of the light theme is #fff, and the dark one is #1f1f1f.

\ No newline at end of file diff --git a/blog/customise-tabi/skins/blue_dark.webp b/blog/customise-tabi/skins/blue_dark.webp new file mode 100644 index 0000000..c8e4d31 Binary files /dev/null and b/blog/customise-tabi/skins/blue_dark.webp differ diff --git a/blog/customise-tabi/skins/blue_light.webp b/blog/customise-tabi/skins/blue_light.webp new file mode 100644 index 0000000..ff49dee Binary files /dev/null and b/blog/customise-tabi/skins/blue_light.webp differ diff --git a/blog/customise-tabi/skins/evangelion_dark.webp b/blog/customise-tabi/skins/evangelion_dark.webp new file mode 100644 index 0000000..2303692 Binary files /dev/null and b/blog/customise-tabi/skins/evangelion_dark.webp differ diff --git a/blog/customise-tabi/skins/evangelion_light.webp b/blog/customise-tabi/skins/evangelion_light.webp new file mode 100644 index 0000000..c3be3a8 Binary files /dev/null and b/blog/customise-tabi/skins/evangelion_light.webp differ diff --git a/blog/customise-tabi/skins/indigo_ingot_dark.webp b/blog/customise-tabi/skins/indigo_ingot_dark.webp new file mode 100644 index 0000000..5e316ad Binary files /dev/null and b/blog/customise-tabi/skins/indigo_ingot_dark.webp differ diff --git a/blog/customise-tabi/skins/indigo_ingot_light.webp b/blog/customise-tabi/skins/indigo_ingot_light.webp new file mode 100644 index 0000000..047b0d1 Binary files /dev/null and b/blog/customise-tabi/skins/indigo_ingot_light.webp differ diff --git a/blog/customise-tabi/skins/lavender_dark.webp b/blog/customise-tabi/skins/lavender_dark.webp new file mode 100644 index 0000000..478bb87 Binary files /dev/null and b/blog/customise-tabi/skins/lavender_dark.webp differ diff --git a/blog/customise-tabi/skins/lavender_light.webp b/blog/customise-tabi/skins/lavender_light.webp new file mode 100644 index 0000000..199e521 Binary files /dev/null and b/blog/customise-tabi/skins/lavender_light.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_orange_dark.webp b/blog/customise-tabi/skins/lowcontrast_orange_dark.webp new file mode 100644 index 0000000..7d71457 Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_orange_dark.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_orange_light.webp b/blog/customise-tabi/skins/lowcontrast_orange_light.webp new file mode 100644 index 0000000..f950a1a Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_orange_light.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_peach_dark.webp b/blog/customise-tabi/skins/lowcontrast_peach_dark.webp new file mode 100644 index 0000000..d2d878b Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_peach_dark.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_peach_light.webp b/blog/customise-tabi/skins/lowcontrast_peach_light.webp new file mode 100644 index 0000000..3019b78 Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_peach_light.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_pink_dark.webp b/blog/customise-tabi/skins/lowcontrast_pink_dark.webp new file mode 100644 index 0000000..45aedb3 Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_pink_dark.webp differ diff --git a/blog/customise-tabi/skins/lowcontrast_pink_light.webp b/blog/customise-tabi/skins/lowcontrast_pink_light.webp new file mode 100644 index 0000000..5121e36 Binary files /dev/null and b/blog/customise-tabi/skins/lowcontrast_pink_light.webp differ diff --git a/blog/customise-tabi/skins/mint_dark.webp b/blog/customise-tabi/skins/mint_dark.webp new file mode 100644 index 0000000..4b56e85 Binary files /dev/null and b/blog/customise-tabi/skins/mint_dark.webp differ diff --git a/blog/customise-tabi/skins/mint_light.webp b/blog/customise-tabi/skins/mint_light.webp new file mode 100644 index 0000000..1fd48f4 Binary files /dev/null and b/blog/customise-tabi/skins/mint_light.webp differ diff --git a/blog/customise-tabi/skins/monochrome_dark.webp b/blog/customise-tabi/skins/monochrome_dark.webp new file mode 100644 index 0000000..484de64 Binary files /dev/null and b/blog/customise-tabi/skins/monochrome_dark.webp differ diff --git a/blog/customise-tabi/skins/monochrome_light.webp b/blog/customise-tabi/skins/monochrome_light.webp new file mode 100644 index 0000000..dfdcf6d Binary files /dev/null and b/blog/customise-tabi/skins/monochrome_light.webp differ diff --git a/blog/customise-tabi/skins/red_dark.webp b/blog/customise-tabi/skins/red_dark.webp new file mode 100644 index 0000000..360c0ba Binary files /dev/null and b/blog/customise-tabi/skins/red_dark.webp differ diff --git a/blog/customise-tabi/skins/red_light.webp b/blog/customise-tabi/skins/red_light.webp new file mode 100644 index 0000000..a628a87 Binary files /dev/null and b/blog/customise-tabi/skins/red_light.webp differ diff --git a/blog/customise-tabi/skins/sakura_dark.webp b/blog/customise-tabi/skins/sakura_dark.webp new file mode 100644 index 0000000..e923d90 Binary files /dev/null and b/blog/customise-tabi/skins/sakura_dark.webp differ diff --git a/blog/customise-tabi/skins/sakura_light.webp b/blog/customise-tabi/skins/sakura_light.webp new file mode 100644 index 0000000..a628a87 Binary files /dev/null and b/blog/customise-tabi/skins/sakura_light.webp differ diff --git a/blog/customise-tabi/skins/teal_dark.webp b/blog/customise-tabi/skins/teal_dark.webp new file mode 100644 index 0000000..496aeb7 Binary files /dev/null and b/blog/customise-tabi/skins/teal_dark.webp differ diff --git a/blog/customise-tabi/skins/teal_light.webp b/blog/customise-tabi/skins/teal_light.webp new file mode 100644 index 0000000..eada00e Binary files /dev/null and b/blog/customise-tabi/skins/teal_light.webp differ diff --git a/blog/customise-tabi/social_cards/blog_customise_tabi.jpg b/blog/customise-tabi/social_cards/blog_customise_tabi.jpg new file mode 100644 index 0000000..c91dc95 Binary files /dev/null and b/blog/customise-tabi/social_cards/blog_customise_tabi.jpg differ diff --git a/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg b/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg new file mode 100644 index 0000000..8703e9d Binary files /dev/null and b/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg differ diff --git a/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg b/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg new file mode 100644 index 0000000..2ddcdcf Binary files /dev/null and b/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg differ diff --git a/blog/es_blog.jpg b/blog/es_blog.jpg new file mode 100644 index 0000000..4c91a6e Binary files /dev/null and b/blog/es_blog.jpg differ diff --git a/blog/faq-languages/index.html b/blog/faq-languages/index.html new file mode 100644 index 0000000..2e5398c --- /dev/null +++ b/blog/faq-languages/index.html @@ -0,0 +1,18 @@ + +~/tabi • Lost in Translation? Not with tabi's Multilingual Capabilities

Lost in Translation? Not with tabi’s Multilingual Capabilities

12th Sep 2023
5 min read
Tags:
showcase,
tutorial,
FAQ

Updated on 14th Sep 2025
See changes

To broaden your reach to a global audience, tabi streamlines the process of building multilingual websites. In this guide, we’ll walk you through everything you need to know—from setting a default language for your site to contributing your own translations. Let’s get started!

Frequently Asked Questions

What languages does tabi support?

tabi supports the following languages:

Arabic
Catalan
Chinese (Simplified)
Chinese (Traditional)
English
Estonian
Finnish
French
German
Hindi
Italian
Japanese
Korean
Odia
Persian
Portuguese (European)
Russian
Spanish
Ukranian

For an always up to date list of supported languages, refer to the i18n directory in the tabi repository.

How do I set a default language for my site?

You can set the default language for your site by defining the default_language variable in your config.toml file.

For instance, if you want (Simplified) Chinese to be the primary language, simply add this line to config.toml:

base_url = "https://welpo.github.io/tabi"
+title = "~/tabi"
+default_language = "zh-Hans"
+

If the value of default_language matches the name of a TOML file in the i18n directory, all of tabi’s text strings will be translated to that language.

How does tabi handle multilingual support?

Zola automatically generates URLs for each non-default language like this: {base_url}/{language_code}/{post}.

tabi facilitates the navigation between languages by adding a language switcher to the navigation bar (only shown when there’s more than one language enabled).

If you scroll up to the navigation bar, you’ll see the language switcher (the globe icon). Clicking on it will display a dropdown with the available languages. Clicking on a language’s name will take you to the same page in that language.

If a specific page is not available in a language, tabi will display a 404 page with the text:

The page you’ve requested seems to be missing or hasn’t been translated into your language yet. Check the URL for errors or go back to the homepage.

This text will be shown once for each language enabled on your site. You can see this page in action here.

How do I enable multilingual support?

To enable multilingual support, you need to set the languages variable in your config.toml file. For example, if want an English-default site with support for Hindi and Spanish, you can set up your config.toml like so:

base_url = "https://example.com"
+title = "My Site"
+default_language = "en"
+
+[languages.hi]
+title = "मेरी वेबसाइट"
+
+[languages.es]
+title = "Mi web"
+

On each language’s section, you can set other variables like taxonomies, description, whether to generate a feed… Refer to Zola’s multilingual support documentation for more information.

What are these two letter codes?

The two letter codes are ISO 639-1 language codes (or IETF BCP 47, when necessary). They are used to identify languages in a standardised way.

tabi uses these codes to allow navigation between languages and translate the theme.

How do I customise or override a specific text string on my website?

tabi looks for the strings files in the following order. $base_directory is where your Zola site resides (where config.toml is stored):

$base_directory + "i18n"
$base_directory + "themes/tabi/i18n"

So if you create i18n/en.toml in your base directory, tabi will read the strings from that file instead of the default English strings. You can do this for any language, supported or not.

Make sure to copy the entire file for that language first, or the theme will fall back to the default English strings.

How do I customize date formats for different languages?

You can set language-specific date formats in your config.toml using the date_formats array:

date_formats = [
+    { lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
+    { lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
+]
+

This allows each language to display dates according to local conventions. For example, Spanish will show “3 de febrero de 2024” while German will show “3. Februar 2024”. If no language-specific format is defined, tabi will use the global long_date_format, short_date_format and archive_date_format settings.

What happens if a translation is missing or incomplete?

If a string is not found in the language file, tabi will fall back to the default English string.

My language is not supported. Can I contribute a translation?

Please do! We are always looking to add support for more languages. You can contribute a translation by creating a pull request in the tabi repository.

You can use the English file as a base to translate the strings to your language. Please make sure to follow the same structure.

The file should be named after the two letter code of your language, and should be a TOML file. For example, if you want to add support for Swahili, you can create a file named sw.toml in the i18n directory.

Note: when testing your translation, you might need to restart zola serve to see the changes, as Zola doesn’t always detect changes in the TOML files.

I’ve found an error in a translation. How do I fix it?

If you find an error in a translation, you can create an issue or a pull request in the tabi repository.

How do I update the translations after a theme update?

If you didn’t customise the translations, simply updating the theme will update the translations.

If you did, you will need to manually update the translations. You can do this by copying the new strings from the corresponding files, and pasting them in your custom file.

Does tabi translate my content?

No. tabi only translates the theme’s text strings. You will need to translate your content yourself.

How to show current language code on the language switcher?

Add show_selected_language_code_in_language_switcher = true in your config extras.

\ No newline at end of file diff --git a/blog/faq-languages/social_cards/blog_faq_languages.jpg b/blog/faq-languages/social_cards/blog_faq_languages.jpg new file mode 100644 index 0000000..1b54ca8 Binary files /dev/null and b/blog/faq-languages/social_cards/blog_faq_languages.jpg differ diff --git a/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg b/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg new file mode 100644 index 0000000..87acc35 Binary files /dev/null and b/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg differ diff --git a/blog/faq-languages/social_cards/es_blog_faq_languages.jpg b/blog/faq-languages/social_cards/es_blog_faq_languages.jpg new file mode 100644 index 0000000..47e5305 Binary files /dev/null and b/blog/faq-languages/social_cards/es_blog_faq_languages.jpg differ diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..4ea2df2 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

08 November 2024

A Complete Guide to Series

showcase tutorial FAQ series

Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories.

18 September 2023

Mastering tabi Settings: A Comprehensive Guide

showcase tutorial FAQ

Discover the many ways you can customise your tabi site.

12 September 2023

Lost in Translation? Not with tabi's Multilingual Capabilities

showcase tutorial FAQ

Master the art of serving a global audience through tabi’s built-in multilingual features. Learn how to change the default language, add multilingual support, and contribute your own translations.

09 August 2023

Customise tabi with skins and a default theme

showcase tutorial

Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours.

14 July 2023

Add comments to your posts with these 4 comment systems

showcase tutorial

Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback.

← Prev
1 of 3
Next →

\ No newline at end of file diff --git a/blog/javascript/index.html b/blog/javascript/index.html new file mode 100644 index 0000000..5f2fbf4 --- /dev/null +++ b/blog/javascript/index.html @@ -0,0 +1,2 @@ + +~/tabi • No mandatory JavaScript

No mandatory JavaScript

6th Jan 2023
3 min read
Tags:
showcase,
tutorial

Updated on 21st Feb 2025
See changes

This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.

Globally enabled settings

Search. Enabled by setting a default language and build_search_index = true on the main section of config.toml. (~23KB of JavaScript)
The light/dark mode switch can be enabled by setting theme_switcher = true in the [extra] section of your config.toml (~1KB of JavaScript).
E-mail decoding (~400 bytes). To protect against spambots scraping your e-mail from your website, you can set encode_plaintext_email = true. If your site is on a public repository, for extra protection, consider setting your email as a base64-encoded string¹ directly.

Settings with hierarchical override capability

The following settings can be specified for posts, sections and globally, following the hierarchy of page > section > config.toml:

KaTeX support. Enabled by setting katex = true (274 KB). To render math without JS, check out MathML.
Mermaid diagrams. Enabled by setting mermaid = true (~2.5 MB).
One-click copy of code blocks. Enabled by setting copy_button = true. (~700 bytes)
Clickable code block names. Enabled by setting code_block_name_links = true. (~300 bytes)
Tag filtering for card grids (e.g. projects) (~2KB). Enabled by setting enable_cards_tag_filtering = true.

To specify these settings:

Globally: Add them under the [extra] section in your config.toml file.
For a section: Add them under the [extra] section in the front matter of the section’s _index.md.
For an individual post: Set the corresponding variables in the [extra] section of the post’s front matter.

Settings that can be enabled globally or for individual posts

Comments. giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting enabled_for_all_posts = true in the right section of your config.toml (i.e. [extra.giscus], [extra.utterances], [extra.hyvortalk] or [extra.isso]). To enable comments on individual posts, set the name of the system = true (e.g. hyvortalk = true) in the post’s front matter.

Other than that, it’s a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)

To encode your email in base64 you can use online tools or, on your terminal, run: printf 'mail@example.com' | base64. ↩

\ No newline at end of file diff --git a/blog/javascript/social_cards/blog_javascript.jpg b/blog/javascript/social_cards/blog_javascript.jpg new file mode 100644 index 0000000..fa5dde9 Binary files /dev/null and b/blog/javascript/social_cards/blog_javascript.jpg differ diff --git a/blog/javascript/social_cards/ca_blog_javascript.jpg b/blog/javascript/social_cards/ca_blog_javascript.jpg new file mode 100644 index 0000000..4ac3b4f Binary files /dev/null and b/blog/javascript/social_cards/ca_blog_javascript.jpg differ diff --git a/blog/javascript/social_cards/es_blog_javascript.jpg b/blog/javascript/social_cards/es_blog_javascript.jpg new file mode 100644 index 0000000..21547c7 Binary files /dev/null and b/blog/javascript/social_cards/es_blog_javascript.jpg differ diff --git a/blog/markdown/index.html b/blog/markdown/index.html new file mode 100644 index 0000000..a4391b9 --- /dev/null +++ b/blog/markdown/index.html @@ -0,0 +1,41 @@ + +~/tabi • Markdown examples

Markdown examples

31st Jan 2023
2 min read
Tags:
markdown,
showcase

Updated on 21st Feb 2025
See changes

$\KaTeX$

$\KaTeX$ is a fast and easy-to-use library that enables the rendering of mathematical notation, using LaTeX syntax.

You can use $\KaTeX$ inline by wrapping the expression between $ or between \$ and \$.

For example, $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ would render: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $

To display the expression on its own line and centered, wrap it around $$ or between \\[ and \\].

For example, \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] renders: \[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \]

To activate $\KaTeX$ for a post or an entire section, include katex = true within the [extra] section of the front matter. For exemple:

title = "Testing KaTeX"
+date = 2002-11-30
+
+[extra]
+katex = true
+

You may enable it globally as well, by setting katex = true in the [extra] section of your config.toml.

For enhanced performance and security, the $\KaTeX$ JavaScript, CSS, and fonts are hosted locally.

Note: After enabling $\KaTeX$, if you want to use $ without rendering a mathematical expression, escape it with a single backslash: \$.

Table

Here’s an example of a table¹. Its colours change depending on the current theme.
Symbol Element Atomic Number
H Hydrogen 1
C Carbon 6
Fe Iron 26
Au Gold 79

Symbol	Element	Atomic Number
H	Hydrogen	1
C	Carbon	6
Fe	Iron	26
Au	Gold	79

Code Block

fn main() {
+    println!("Hello, world!") -> ();
+}
+

With line numbers

1 use std::collections::HashMap;
+
2 
+
3 #[derive(Debug)]
+
4 struct TwinPeaksCharacter {
+
5     name: String,
+
6     coffee_rating: f32,
+
7     pie_preference: String,
+
8 }
+
9 
+
10 fn main() {
+
11     let mut black_lodge = HashMap::new();
+
12 
+
13     black_lodge.insert("agent", TwinPeaksCharacter {
+
14         name: String::from("Dale Cooper"),
+
15         coffee_rating: 9999.99,
+
16         pie_preference: String::from("Damn Fine Cherry"),
+
17     });
+
18 
+
19     black_lodge.insert("giant", TwinPeaksCharacter {
+
20         name: String::from("The Fireman"),
+
21         coffee_rating: 42.424242,
+
22         pie_preference: String::from("Garmonbozia"),
+
23     });
+
24 
+
25     // Calculate total appreciation of damn fine coffee
+
26     let total_coffee: f32 = black_lodge.values()
+
27         .map(|character| character.coffee_rating)
+
28         .sum();
+
29 
+
30     println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
+
31 }
+

Code tags

In Rust, you declare a mutable variable with let mut x = 5;, whereas in Python, you simply use x = 5. Similarly, to print a value in Rust, you would use println!("Value: {}", x);, but in Python, it’s as straightforward as print(f"Value: {x}").

Quote

“We’re all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we’re going to die. Each of us secretly believing we won’t.”
— Charlie Kaufman, Synecdoche, New York

And here’s an example of a footnote! ↩

\ No newline at end of file diff --git a/blog/markdown/social_cards/blog_markdown.jpg b/blog/markdown/social_cards/blog_markdown.jpg new file mode 100644 index 0000000..98e7a5b Binary files /dev/null and b/blog/markdown/social_cards/blog_markdown.jpg differ diff --git a/blog/markdown/social_cards/ca_blog_markdown.jpg b/blog/markdown/social_cards/ca_blog_markdown.jpg new file mode 100644 index 0000000..a94d2b5 Binary files /dev/null and b/blog/markdown/social_cards/ca_blog_markdown.jpg differ diff --git a/blog/markdown/social_cards/es_blog_markdown.jpg b/blog/markdown/social_cards/es_blog_markdown.jpg new file mode 100644 index 0000000..1034677 Binary files /dev/null and b/blog/markdown/social_cards/es_blog_markdown.jpg differ diff --git a/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp b/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp new file mode 100644 index 0000000..bc6bc97 Binary files /dev/null and b/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/browser_theme_color_light.webp b/blog/mastering-tabi-settings/img/browser_theme_color_light.webp new file mode 100644 index 0000000..1dea675 Binary files /dev/null and b/blog/mastering-tabi-settings/img/browser_theme_color_light.webp differ diff --git a/blog/mastering-tabi-settings/img/commit_history_dark.webp b/blog/mastering-tabi-settings/img/commit_history_dark.webp new file mode 100644 index 0000000..1be6676 Binary files /dev/null and b/blog/mastering-tabi-settings/img/commit_history_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/commit_history_light.webp b/blog/mastering-tabi-settings/img/commit_history_light.webp new file mode 100644 index 0000000..f904fdb Binary files /dev/null and b/blog/mastering-tabi-settings/img/commit_history_light.webp differ diff --git a/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp b/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp new file mode 100644 index 0000000..ac24387 Binary files /dev/null and b/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp b/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp new file mode 100644 index 0000000..82aeb04 Binary files /dev/null and b/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp differ diff --git a/blog/mastering-tabi-settings/img/copyright_dark.webp b/blog/mastering-tabi-settings/img/copyright_dark.webp new file mode 100644 index 0000000..ee383f6 Binary files /dev/null and b/blog/mastering-tabi-settings/img/copyright_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/copyright_light.webp b/blog/mastering-tabi-settings/img/copyright_light.webp new file mode 100644 index 0000000..6a4af57 Binary files /dev/null and b/blog/mastering-tabi-settings/img/copyright_light.webp differ diff --git a/blog/mastering-tabi-settings/img/external_link_dark.webp b/blog/mastering-tabi-settings/img/external_link_dark.webp new file mode 100644 index 0000000..61a6641 Binary files /dev/null and b/blog/mastering-tabi-settings/img/external_link_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/external_link_light.webp b/blog/mastering-tabi-settings/img/external_link_light.webp new file mode 100644 index 0000000..16d03a1 Binary files /dev/null and b/blog/mastering-tabi-settings/img/external_link_light.webp differ diff --git a/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp b/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp new file mode 100644 index 0000000..bcbb67d Binary files /dev/null and b/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp b/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp new file mode 100644 index 0000000..39f675f Binary files /dev/null and b/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp differ diff --git a/blog/mastering-tabi-settings/img/header_dark.webp b/blog/mastering-tabi-settings/img/header_dark.webp new file mode 100644 index 0000000..cc67ca3 Binary files /dev/null and b/blog/mastering-tabi-settings/img/header_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/header_light.webp b/blog/mastering-tabi-settings/img/header_light.webp new file mode 100644 index 0000000..518c74b Binary files /dev/null and b/blog/mastering-tabi-settings/img/header_light.webp differ diff --git a/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp b/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp new file mode 100644 index 0000000..4790470 Binary files /dev/null and b/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp b/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp new file mode 100644 index 0000000..4fee0d6 Binary files /dev/null and b/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp differ diff --git a/blog/mastering-tabi-settings/img/pinned_post_dark.webp b/blog/mastering-tabi-settings/img/pinned_post_dark.webp new file mode 100644 index 0000000..6111f62 Binary files /dev/null and b/blog/mastering-tabi-settings/img/pinned_post_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/pinned_post_light.webp b/blog/mastering-tabi-settings/img/pinned_post_light.webp new file mode 100644 index 0000000..ddddc44 Binary files /dev/null and b/blog/mastering-tabi-settings/img/pinned_post_light.webp differ diff --git a/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp b/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp new file mode 100644 index 0000000..a7c9fd4 Binary files /dev/null and b/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp b/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp new file mode 100644 index 0000000..42c9c36 Binary files /dev/null and b/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp differ diff --git a/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp b/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp new file mode 100644 index 0000000..bf83faa Binary files /dev/null and b/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp b/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp new file mode 100644 index 0000000..900c01f Binary files /dev/null and b/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp differ diff --git a/blog/mastering-tabi-settings/img/sans-serif.webp b/blog/mastering-tabi-settings/img/sans-serif.webp new file mode 100644 index 0000000..9688a79 Binary files /dev/null and b/blog/mastering-tabi-settings/img/sans-serif.webp differ diff --git a/blog/mastering-tabi-settings/img/see_changes_dark.webp b/blog/mastering-tabi-settings/img/see_changes_dark.webp new file mode 100644 index 0000000..ad7b527 Binary files /dev/null and b/blog/mastering-tabi-settings/img/see_changes_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/see_changes_light.webp b/blog/mastering-tabi-settings/img/see_changes_light.webp new file mode 100644 index 0000000..986c5e1 Binary files /dev/null and b/blog/mastering-tabi-settings/img/see_changes_light.webp differ diff --git a/blog/mastering-tabi-settings/img/serif.webp b/blog/mastering-tabi-settings/img/serif.webp new file mode 100644 index 0000000..93a276c Binary files /dev/null and b/blog/mastering-tabi-settings/img/serif.webp differ diff --git a/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp b/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp new file mode 100644 index 0000000..177c069 Binary files /dev/null and b/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp b/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp new file mode 100644 index 0000000..74981c7 Binary files /dev/null and b/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp differ diff --git a/blog/mastering-tabi-settings/img/site_source_dark.webp b/blog/mastering-tabi-settings/img/site_source_dark.webp new file mode 100644 index 0000000..28f445f Binary files /dev/null and b/blog/mastering-tabi-settings/img/site_source_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/site_source_light.webp b/blog/mastering-tabi-settings/img/site_source_light.webp new file mode 100644 index 0000000..13b9efa Binary files /dev/null and b/blog/mastering-tabi-settings/img/site_source_light.webp differ diff --git a/blog/mastering-tabi-settings/img/webmention_dark.webp b/blog/mastering-tabi-settings/img/webmention_dark.webp new file mode 100644 index 0000000..2d4290f Binary files /dev/null and b/blog/mastering-tabi-settings/img/webmention_dark.webp differ diff --git a/blog/mastering-tabi-settings/img/webmention_light.webp b/blog/mastering-tabi-settings/img/webmention_light.webp new file mode 100644 index 0000000..f555252 Binary files /dev/null and b/blog/mastering-tabi-settings/img/webmention_light.webp differ diff --git a/blog/mastering-tabi-settings/img/with_social_media_card.webp b/blog/mastering-tabi-settings/img/with_social_media_card.webp new file mode 100644 index 0000000..9be353a Binary files /dev/null and b/blog/mastering-tabi-settings/img/with_social_media_card.webp differ diff --git a/blog/mastering-tabi-settings/index.html b/blog/mastering-tabi-settings/index.html new file mode 100644 index 0000000..2a246b8 --- /dev/null +++ b/blog/mastering-tabi-settings/index.html @@ -0,0 +1,141 @@ + +~/tabi • Mastering tabi Settings: A Comprehensive Guide

Mastering tabi Settings: A Comprehensive Guide

18th Sep 2023
31 min read
Tags:
showcase,
tutorial,
FAQ

Updated on 7th Aug 2025
See changes

This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to open an issue on GitHub or start a discussion.

Table of Contents

Settings Hierarchy

tabi has a hierarchy that allows you to customise your site at different levels. The hierarchy (from low to high priority) is as follows:

Global settings: These are the settings that apply to your entire site. They are set in config.toml.
Section settings: These are the settings that apply to a section of your site (e.g./blog or /projects). They are set in the front matter of the _index.md file of the section.
Parent page settings: For nested pages (pages within pages), these are the settings from the parent page.
Page settings: These are the settings that apply to a single page. They are set in the front matter of the page.

In all cases, tabi’s settings are set in the [extra] section.

For settings which follow this hierarchy, the value set on a page overrides the value for a section, which overrides the global value. In short: the more specific the setting, the higher priority it has, or page > parent page/section > config.toml.

Search

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	✅

tabi supports accessible, local multi-lingual search with Elasticlunr. To enable it, you need to:

Set a default_language in config.toml.
Set build_search_index = true.
Optionally, configure the [search].

Here’s an example configuration:

base_url = "https://example.com"
+default_language = "en"
+build_search_index = true
+
+[search]
+index_format = "elasticlunr_json" # Or the less efficient "elasticlunr_javascript".
+include_title = true
+include_description = true
+include_path = true
+include_content = true
+

Note: for Chinese/Japanese search support, you need to use a custom Zola build.

Considerations for Zola 0.17.X Users

Zola 0.17.X doesn’t provide access to the search.index_format variable (bug report). When using tabi, this variable defaults to the more efficient JSON index. However, due to another bug fixed in 0.18.0, the JSON index for multi-language sites is not generated correctly.

Users with Zola versions prior to 0.18.0 who want to use the JavaScript index need to set the index_format variable in two places:

[search]
+index_format = "elasticlunr_javascript"
+
+[extra]
+index_format = "elasticlunr_javascript"
+

This ensures tabi loads the right files. We recommend upgrading to Zola 0.18.0 or later for optimal functionality.

Implementation Details

For technical details about the search implementation in tabi, including when the index loads, accessibility features, and other specifics, see the Pull Request #250.

Multilingual Support

tabi offers comprehensive multilingual support for your Zola site, from setting a default language to adding as many as you wish. Refer to the multilingual FAQ for more information.

Appearance

Home Page

The main page of this demo has a header with an image, a title and description:

Heading

To set the image and title, you can use the header variable in the front matter of the section’s _index.md file. For example:

[extra]
+header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
+

The description is regular Markdown content, set outside the front matter.

Listing Recent Posts

To show posts on your main page, you first need to decide where these posts will be served from: the root path (/) or a subdirectory (e.g., /blog).

Option A: Serve posts from the root path (/)

Set paginate_by in the front matter of your content/_index.md file:

title = "Latest posts"
+sort_by = "date"
+paginate_by = 5  # Show 5 posts per page.
+
+[extra]
+header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
+

NOTE

The paginate_by setting goes in the main front matter, not in the [extra] section.

Option B: Serve posts from a subdirectory (e.g., /blog)

Use section_path in the [extra] section of your content/_index.md file:

title = "Latest posts"
+sort_by = "date"
+# Do not set `paginate_by` here.
+
+[extra]
+header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
+section_path = "blog/_index.md"  # Where to find your posts.
+max_posts = 5  # Show up to 5 posts on the main page.
+

WARNING

Do not set both paginate_by and section_path. These settings are mutually exclusive and using both may result in no posts being displayed.

Additional notes:

The title in the front matter sets the header that appears above the posts.
Use the full path to the section’s _index.md file for section_path. Using section_path = "blog/" will not work.

Pinning Posts

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:

Pinned posts are shown first, maintaining their relative order of the section’s sort_by, followed by regular posts.

To pin a post, add the following to its front matter:

[extra]
+pinned = true
+

INFO

This setting only affects your site’s main pages (like /, /es/, /fr/). Other sections like blog/, tags/, or archive/ show posts in their normal order.

WARNING

When using pagination (paginate_by), pinned posts may appear twice: once on top of page 1, and again in their normal chronological position on subsequent pages.

Display the Date of Posts in Listing

By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the post_listing_date option. Available settings:

date: Show only the original date of the post (default).
updated: Show only the last updated date of the post. If there is no last updated date, it shows the original date.
both: Show both the original date and the last updated date.

post_listing_date = "date"
+

TIP

This setting follows the hierarchy: you can set a global value in config.toml or override it for specific sections in their _index.md file. In both cases, add it to the [extra] section.

Listing Projects

You can showcase a selection of projects on your main page. To do this, you’ll need to set up the projects directory first.

Once that’s done, you configure the path to the projects in the [extra] section of your _index.md file:

[extra]
+projects_path = "projects/_index.md"
+

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 max_projects in the [extra] section.

By default, the featured projects will be shown after the posts. If you want to show the projects before the posts, set show_projects_first = true.

Light and Dark Mode Switcher

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	✅

The light and dark mode switcher (the moon/sun icon on the top right) can be enabled by setting theme_switcher = true in config.toml.

Default (Light/Dark) Mode

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The default theme can be specified with the default_theme variable, which accepts either "dark" or "light". If you don’t set it, the default theme will be the one set in the user’s browser.

Custom Skins

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

tabi’s skins change the main colour of the site. You can set the skin in config.toml with skin = "skin_name". For example, skin = "lavender" looks like this (click to switch between light and dark mode):

Explore the available skins and learn how to create your own reading the documentation.

Sans-serif Font

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

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 override_serif_with_sans = true in your config.toml.

Click on the image below to compare the two looks:

External Link Indicator

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

INFO

Requires Zola 0.20.0 or later.

If you’d like to add an icon to external links, configure the [markdown] (not [extra]) section in your config.toml:

[markdown]
+external_links_class = "external"
+

This will add a small icon next to external links:

Custom CSS

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	❌	✅	❌	❌

You can load custom CSS for the entire site or on specific pages with stylesheets, which takes a list of paths to CSS files. For example:

stylesheets = ["css/custom.css", "css/another.css"]
+

Browser Theme Colour

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The browser theme colour is the colour that appears in the browser’s tab bar:

You can set it in config.toml like browser_theme_color = "#087e96". If you’d like different colours for dark/light mode, you can set an array of colours with browser_theme_color = ["#ffffff", "#000000"]. The first colour will be used for light mode, the second for dark mode.

This variable accepts any valid CSS colour, so you can use keywords (e.g. blue), hex codes (e.g. #087e96) or RGB/HSL values (e.g. rgb(8, 126, 150)).

Compact Tags

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

By default, the tags page displays tags as:

TagName — n post[s]

Setting compact_tags = true will display them as:

TagName ⁿ

Tags Sorting

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

By default, the tags page sorts tags alphabetically, given the default setting of tag_sorting = "name".

Setting tag_sorting = "frequency" will sort them by number-of-posts (descending).

Series

For a detailed explanation of the series feature, see the series documentation.

Jump to posts link

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	✅	✅	✅	❌

By default, a “Jump to posts” link automatically appears next to the series title when a series has a content over 2000 characters:

Set show_jump_to_posts = true to force the feature on and show_jump_to_posts = false to force it off.

Series pages indexation

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	✅	✅	✅	❌

By default, series page are indexed (using a 1-based indexing) as per the series section sort_by.

Set post_listing_index_reversed = true to reverse this index.

Git Repository Integration

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❓	❓	✅	❓	❌

❓: show_remote_source does follow the hierarchy and can be set on a page, section or globally. The rest of the settings can only be set in config.toml.

These settings allow you to link your tabi website with a public Git repository in GitHub, GitLab, Gitea or Codeberg. Example settings:

remote_repository_url = "https://github.com/welpo/tabi"
+remote_repository_git_platform = "auto"
+remote_repository_branch = "main"
+show_remote_changes = true
+show_remote_source = true
+

This enables two features:

show_remote_source = true adds a link to the source code of your site (your remote_repository_url) will be displayed on the footer:

Page footer, showing a 'Site source' link

show_remote_changes = true adds a “See changes ↗” link to the commit history of updated posts, next to the last updated date ¹:

Post title and metadata, showing a 'See changes' link

Clicking on this link will take you to the commit history of the post, where you can see the changes made to it:

Pages

Projects

tabi has a built-in projects (cards) template. To enable it, you can create a directory in content/projects/. There, you can create a _index.md file with the following front matter:

title = "Projects"
+sort_by = "weight"
+template = "cards.html"
+insert_anchor_links = "left"
+
+[extra]
+show_reading_time = false
+quick_navigation_buttons = true
+

The title is the title of the page.
sort_by determines how the projects are sorted. You can sort by “date”, “update_date”, “title”, “title_bytes”, “weight”, “slug” or “none”.
template = "cards.html" sets the template to render the projects page.
insert_anchor_links = "left" adds anchor links to headers.
show_reading_time = false hides the reading time.
quick_navigation_buttons = true shows the quick navigation buttons are shown.

Alongside the _index.md file, you can create a file for each project. For example, this is the front matter for the tabi project page:

title = "tabi"
+description = "A feature-rich modern Zola theme with first-class multi-language support."
+weight = 1
+
+[extra]
+local_image = "img/tabi.webp"
+

title is the title of the project.
description is the description of the project.
weight determines the order in which the projects are shown. The lower the weight, the higher the project will appear.
local_image is the path to the image of the project. This image is shown on the projects page.

When a user clicks on the image or title of a project, they will be taken to the project’s page. If you’d rather have users go to an external link, you can set link_to = "https://example.com in the [extra] section of the project’s .md file.

The individual project’s page is rendered with the default template, unless you set another one, e.g. template = "info-page.html".

Filtering Projects

If you add tags to your projects, you will see a tag filter:

The tag filtering system uses progressive enhancement:

Without JavaScript: Tags link directly to dedicated tag pages (e.g. /tags/tag-name)
With JavaScript: Instant filtering, URL syncing (#tag-name), and keyboard navigation

To disable this feature, set enable_cards_tag_filtering = false in the [extra] section of the projects/_index.md file or in config.toml.

TIP

To filter projects by tags, you need to set tags in the front matter of each project. For example:

title = "project name"
+weight = 40
+
+[taxonomies]
+tags = ["tag one", "tag 2", "third tag"]
+

About Page

If you’d like to have a non-article page for an “About” section, a “Contact” or “Copyright” page, etc., you can use the info-page.html template.

First, create a directory inside content/ with any name you like. For example, content/pages/. Then, create a _index.md file inside that directory. The file should look like this:

+++
+render = false
+insert_anchor_links = "left"
++++
+

render = false tells Zola not to render the section.
insert_anchor_links = "left" adds anchor links to headers. This is optional.

Inside the directory, you can create any number of .md files.

In this demo, the about page uses the info-page.html template. The front matter is as follows:

title = "About"
+template = "info-page.html"
+path = "about"
+

Notice how the path is set to about. Zola will place the page at $base_url/about/. If you’d like to have the page available at /contact/, you’d set path = "contact".

The info-page.html template can also be used to create landing pages at the path root ("/"). To do that, the content/_index.md file should look like this:

+++
+title = "Landing Page Title"
+template = "info-page.html"
++++
+
+Place your landing page Markdown content here.
+

SEO

tabi takes care of most of the SEO for you (like Open Graph protocol tags, description, color-scheme…), but there are a few things you can customise.

Favicon

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The favicon is the small icon that appears in the browser tab. You can set it in config.toml with favicon = "img/favicon.png".

Emoji Favicon

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

You can also set an emoji as your favicon with favicon_emoji. For example, favicon_emoji = "👾".

Note: Some browsers don’t support emoji favicons. See the compatibility table in caniuse.

Canonical URL

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	❌	❌

The canonical URL is a way to indicate to search engines what the preferred URL is for your website content. This is useful for SEO and avoiding duplicate content issues.

By default, the canonical URL is the URL of the page you’re on. However, you can override this by setting canonical_url in the front matter of your page or section.

If you have a site with an identical structure and matching content, you can set base_canonical_url in your config.toml. The canonical URL will be crafted by replacing the $base_url of the current URL with the $base_canonical_url you set.

For example, if you set base_canonical_url = "https://example.com", the canonical URL of the page $base_url/blog/post1 will be https://example.com/blog/post1. This is useful if you have a site with multiple domains that share the same content.

Note: to ensure that the canonical URL is correct, it’s probably best to set canonical_url individually for each page.

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

Social media cards are the images that are displayed when you share a link on social media:

A screenshot of WhatsApp showing a link with a social media card

You can set the social media image with social_media_card = "img/social_media_card.png".

You can specify both relative and absolute paths.

Relative Path: Place the image in the same folder as your blog post and specify its name. For example, social_media_card = "relative_image.png".
Absolute Path: Put the image in a specific folder and specify the path from the root. For example, social_media_card = "/img/absolute_image.png".

If both relative and absolute paths are valid, the relative path will take precedence.

Since it follows the hierarchy, if it’s not set on a page, but is set on a section, the section’s image will be used. If it’s not set on a page or section, but is set in config.toml, the global image will be used.

PROTIP

Automate their creation with a script: Automating Link Previews for Zola Sites.

Fediverse Creator

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

You can highlight your fediverse profile in Mastodon link previews by setting the fediverse_creator variable in your config.toml. For example, for @username@example.com, use:

fediverse_creator = { handle = "username", domain = "example.com" }
+

This adds metadata to your HTML, allowing Mastodon to display the author’s fediverse profile when your content is shared.

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The navigation bar is the bar at the top of the page that contains the site title and the navigation menu. You can customise which items appear by setting menu in config.toml.

The menu supports both relative URLs for internal pages and absolute URLs for external links. For example:

menu = [
+    { name = "blog", url = "blog", trailing_slash = true },
+    { name = "archive", url = "archive", trailing_slash = true },
+    { name = "tags", url = "tags", trailing_slash = true },
+    { name = "projects", url = "projects", trailing_slash = true },
+    { name = "about", url = "about", trailing_slash = true },
+    { name = "github", url = "https://github.com/welpo/tabi", trailing_slash = false },
+]
+

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you’re not on mobile. They look like this:

The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page.

To enable them, set quick_navigation_buttons = true.

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

Enable the table of contents right below the post’s title and metadata with toc = true.

Read more about the table of contents and how to customise it by reading the docs.

Previous and Next Article Links

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

Displays links to the previous and next articles at the bottom of posts. It looks like this:

To activate this feature, set show_previous_next_article_links = true and ensure your section has a sort_by value (e.g. sort_by = "date").

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 invert_previous_next_article_links = true.

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 previous_next_article_links_full_width = false.

All of these settings follow the hierarchy.

Footnote Backlinks

DEPRECATION WARNING

Zola v0.19.0 and later can do this natively. Set bottom_footnotes = true in your config’s [markdown] section.

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	✅

Setting footnote_backlinks = true will add backlinks to the footnotes of your posts, like this:

When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced.

Usability

Copy Button on Code Blocks

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	✅

Setting copy_button = true will add a small copy button to the top right of code blocks, like this:

Clickable Code Block Names

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	✅

Setting code_block_name_links = true enables URLs in code block names to become clickable links. Check out the documentation for examples and usage.

Force Code Blocks LTR

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

By default, code blocks are rendered left-to-right, regardless of the overall text direction. Set force_codeblock_ltr = false to allow code blocks to follow the document’s text direction. Useful for RTL languages needing RTL code blocks.

KaTeX Support

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	✅

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with katex = true. See what it looks like in tabi here.

Mermaid Support

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	✅

Mermaid is a JavaScript-based diagramming and charting tool. You can enable it with mermaid = true.

By default, the Mermaid library is served locally. If you prefer to use a CDN, set serve_local_mermaid = false in config.toml. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi.

See the Mermaid documentation for usage instructions and examples.

Custom Font Subset

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it’s a good idea to try and minimise the size of this subset, or disable it completely if you’re not using a custom font in your skin.

You can create a custom subset tailored to your site, save it as static/custom_subset.css, and have it load with custom_subset = true. Disabling the subset can be done with enable_subset = false.

For more information, including instructions on how to create a custom subset, see the docs.

Full Content in Feed

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

By default, the Atom feed only contains the summary/description of your posts. You can include the entire posts’ content by setting full_content_in_feed = true in config.toml.

Hiding Content from Feed

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

You can control how content appears in your feeds using two settings:

hide_from_feed = true: Hides content from all feeds (main, section, and tag feeds)
hide_from_main_feed = true: Hides content only from the main feed while keeping it visible in section and tag feeds

Comments

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	❌	✅	❌	✅

To enable comments on an individual page, set the name of the system you want to enable to true in the front matter. For example, utterances = true.

To enable a system globally (on all pages), set enabled_for_all_posts = true in the correct section of your config.toml (e.g. inside [extra.giscus]).

If you have enabled a system globally, but want to disable it on a specific page, set the name of the system to false in the front matter of that page. For example, utterances = false.

Read the docs for more information on the available systems and their setup.

iine Like Buttons

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

tabi supports iine like buttons for anonymous appreciation of your content. These privacy-focused buttons work without JavaScript and don’t track users.

To enable iine buttons globally:

[extra]
+iine = true
+

You can customise the icon used for the buttons (follows the hierarchy):

[extra]
+iine_icon = "thumbs_up"  # Options: "heart", "thumbs_up", "upvote", or any emoji
+

For multilingual sites, you can unify like counts across language versions of the same content (config-only setting; true by default):

[extra]
+iine_unified_languages = true  # Likes on /es/blog/hello/ count towards /blog/hello/
+

You can also enable iine buttons on individual pages or sections by setting iine = true in their front matter, or override the icon with iine_icon = "🚀".

Analytics

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	✅

tabi supports 3 privacy-friendly analytics systems: Plausible, GoatCounter and Umami.

You can set them up in the [extra.analytics] section of your config.toml.

service: Specifies which analytics service to use. Supported options are "goatcounter", "umami", and "plausible".
id: The unique identifier for your analytics service. This varies based on the service:
- For GoatCounter, it’s the code chosen during signup. Self-hosted instances of GoatCounter don’t require this field.
- For Umami, it’s the website ID.
- For Plausible, it’s the domain name.
self_hosted_url: 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:
- For GoatCounter: "https://stats.example.com"
- For Umami: "https://umami.example.com"
- For Plausible: "https://plausible.example.com"
do_not_track: (Umami only) Optional. When set to true, the generated tracking script will include the data-do-not-track="true" attribute, which disables tracking for users whose browsers send a “Do Not Track” header.

An example configuration for non-self-hosted GoatCounter would look like this:

[extra.analytics]
+service = "goatcounter"
+id = "tabi"
+self_hosted_url = ""
+

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

You can add social media icons to the footer with socials, which takes a list of social media objects. For example:

socials = [
+    { name = "github", url = "https://github.com/welpo/", icon = "github" },
+    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
+    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
+    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
+    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
+]
+

To see a list of all the built-in icons, take a look at the static/social_icons directory on GitHub.

Missing an icon? If you think it would be a good addition to tabi, feel free to open an issue or submit a pull request (example).

To use a custom icon, you can add it to your site’s static/social_icons directory. For example, if you add custom.svg, you can reference it like this:

{ name = "custom", url = "https://example.com", icon = "custom" }
+

NOTE

All social links include the rel='me' attribute. This helps search engines and web services verify that the social media accounts are owned by you.

Feed Icon

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

You can add a link to your RSS/Atom feed to the footer with feed_icon = true.

Note for Zola 0.19.X users: when there are two filenames in feed_filenames, only the first one will be linked in the footer.

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

You can add a menu to the footer with footer_menu, which takes a list of menu items. For example:

footer_menu = [
+    {url = "about", name = "about", trailing_slash = true},
+    {url = "privacy", name = "privacy", trailing_slash = true},
+    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
+    {url = "https://example.com", name = "external link", trailing_slash = true},
+]
+

Copyright

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

To add a copyright notice to your site, set copyright:

copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
+

You can use the following variables:

$TITLE will be replaced by title variable set in config.toml
$CURRENT_YEAR will be replaced by the current year
$AUTHOR will be replaced by the author variable
$SEPARATOR will be replaced by the separator variable

Markdown is rendered. The example above:

If you have a multilingual site and want to set different copyright notices for different languages, you can add the corresponding translation to copyright_translations.{language_code} for each language you want to support. The language code must match tabi’s language code. For example, for Spanish:

copyright_translations.es = "© $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/)."
+

Metadata

Show author

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

To show the author(s) below the post title, set show_author = true.

This will display the authors set on authors = [] in the front matter of the post. If this is not available, it will fall back to author = ""in config.toml.

Reading Time

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

You can enable or hide the reading time of a post with show_reading_time. If you set it to true, it will be displayed in the post’s metadata, like this:

Since it follows the hierarchy, you can enable it or hide it for specific pages or sections. For example, this demo sets show_reading_time = false in the projects section’s _index.md, so their individual posts don’t show the reading time.

Show Date

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
✅	✅	✅	✅	❌

By default, the date is shown below the post title. You can hide it with show_date = false. This setting follows the hierarchy.

Date Format

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

tabi has three date formats: long_date_format, short_date_format and archive_date_format. The short format is used in a post’s metadata, while the long format is used when listing posts (i.e. on the blog section or the main page). The archive format is used to display day and month on the archive page.

The default is “6th July 2049” for long_date_format and short_date_format in English. For other languages, the defaut is "%d %B %Y" for the long format and "%-d %b %Y" for the short format. The universal default for the archive format is "%d %b".

In Zola, time formatting syntax is inspired fom strftime. A full reference is available in the chrono docs.

Per-language date formats

You can customise date formats for specific languages using the date_formats array in config.toml:

date_formats = [
+    { lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
+    { lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
+]
+

This allows different languages to use culturally appropriate date formatting (e.g. Spanish “3 de febrero de 2024” vs German “3. Februar 2024”).

Custom Separator

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The separator appears in various places: in the title tag, between the metadata of a post…

The default separator is a bullet point (•), but you can change by setting something like separator = "|".

Title Tag Order

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

The title tag is the text that appears in the browser tab. By default, it’s the site title followed by the page title. For example, the title tag of the blog section is “~/tabi • Blog”.

By setting invert_title_order = true, you can invert the order of the site title and page title in the browser tab. For example, the title tag of the blog section would become “Blog • ~/tabi”.

Security

Encoded Email

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	✅

To protect your email address from spambots, you can encode it in the footer. You can do this by setting email to a base64 encoded version of your email address². For example, email = "bWFpbEBleGFtcGxlLmNvbQ==" is the base64 encoded version of “mail@example.com”.

If you don’t want to encode your email yourself, tabi can encode it for you if you set encode_plaintext_email = true. This allows you to set a plaintext email on the config. Note that this only protects your email address on your site, not in public repositories.

If the email is encoded (either by you or by tabi), users with JavaScript disabled will not see the email icon.

CSP (Content Security Policy)

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.

tabi has a default CSP that allows for remote images and videos, as well as YouTube and Vimeo embeds. You can customise it with allowed_domains, which takes a list of CSP directives. This is the default CSP:

allowed_domains = [
+    { directive = "font-src", domains = ["'self'", "data:"] },
+    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
+    { directive = "script-src", domains = ["'self'"] },
+    { directive = "style-src", domains = ["'self'"] },
+    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
+]
+

This feature is enabled by default. To disable it (and allow all connections), set enable_csp = false on a page, section or globally. The enable_csp setting follows the hierarchy.

See the CSP documentation page for more information.

Indieweb

Webmentions

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❓	❓	✅	❓	✅

As described by the recommended W3C standard Webmention 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.

For static sites webmention.io 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.

Enable webmentions for your site by adding the following to your config.toml file.

[extra.webmentions]
+enable = true
+# Specify the domain registered with webmention.io.
+domain = "www.example.com"
+

❓: To disable webmentions for a specific section or page, set webmentions = false in the [extra] section of that section or page’s front matter.

The webmentions section looks like this:

Webmentions screenshot showing reposts, likes, bookmarks, and comments

Representative h-card

Page	Section	`config.toml`	Follows Hierarchy	Requires JavaScript
❌	❌	✅	❌	❌

By default, tabi adds a hidden representative h-card to the homepage. While invisible to visitors, it’s available to microformat parsers. You can check the validity of the card with the Indiewebify.me tool.

To disable the h-card, set enable = false in the [extra.hcard] section of config.toml.

The default h-card includes your name, website url and social media links.

You can set a profile picture and a small bio with the avatar and biography settings.

All other h-card properties can be added by listing them under the [extra.hcard]section of the config file. Simply replace all - characters by _.

Extending HTML Elements in tabi

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 <body> tag or including additional content at the end of the <head> element that is not otherwise supported by other tabi settings.

See the table below for elements that can be extended:
Element Template
<head> templates/tabi/extend_head.html
<body> templates/tabi/extend_body.html

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.

If you’re using a remote Git repository, you might want to automate the process of updating the updated field. Here’s a guide for that: Zola Git Pre-Commit Hook: Updating Post Dates. ↩
To encode your email in base64 you can use online tools or, on your terminal, run: printf 'mail@example.com' | base64. ↩

\ No newline at end of file diff --git a/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg b/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..69e0efc Binary files /dev/null and b/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg differ diff --git a/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg b/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..4c8f94f Binary files /dev/null and b/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg differ diff --git a/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg b/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..cdc4d16 Binary files /dev/null and b/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg differ diff --git a/blog/page/1/index.html b/blog/page/1/index.html new file mode 100644 index 0000000..8e7abb9 --- /dev/null +++ b/blog/page/1/index.html @@ -0,0 +1 @@ +Redirect

Click here to be redirected.

\ No newline at end of file diff --git a/blog/page/2/index.html b/blog/page/2/index.html new file mode 100644 index 0000000..d68dbf4 --- /dev/null +++ b/blog/page/2/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

29 April 2023

Optimise loading times with a custom font subset

showcase tutorial

Learn how to create a custom subset that only includes the necessary glyphs.

22 February 2023

Secure by default

security showcase

tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory.

19 February 2023

Custom shortcodes

showcase shortcodes

31 January 2023

Markdown examples

markdown showcase

This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes.

06 January 2023

No mandatory JavaScript

showcase tutorial

JavaScript is only used when HTML and CSS aren’t enough.

\ No newline at end of file diff --git a/blog/page/3/index.html b/blog/page/3/index.html new file mode 100644 index 0000000..ca7ff55 --- /dev/null +++ b/blog/page/3/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

01 November 2022

showcase markdown tutorial

A post showcasing the optional Table of Contents and its options.

← Prev
3 of 3
Next →

\ No newline at end of file diff --git a/blog/security/index.html b/blog/security/index.html new file mode 100644 index 0000000..8b952f0 --- /dev/null +++ b/blog/security/index.html @@ -0,0 +1,11 @@ + +~/tabi • Secure by default

Secure by default

22nd Feb 2023
2 min read
Tags:
security,
showcase

Updated on 21st Feb 2025
See changes

The default configuration of the theme gets an A+ score on Mozilla Observatory.¹

This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the config.toml file. Here’s the default and recommended setup (you could remove the last directive if you don’t want to embed YouTube videos):

[extra]
+allowed_domains = [
+    { directive = "font-src", domains = ["'self'", "data:"] },
+    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
+    { directive = "script-src", domains = ["'self'"] },
+    { directive = "style-src", domains = ["'self'"] },
+    { directive = "frame-src", domains = ["https://www.youtube-nocookie.com"] },
+]
+

The allowed_domains list specifies the URLs that the website should be able to connect to, and each domain in the list is associated with a CSP directive such as frame-src, connect-src, or script-src. The templates/partials/header.html file dynamically generates the CSP header based on this list.

This feature allows you to easily customize the website’s security headers to allow for specific use cases, such as embedding YouTube videos, loading scripts or remote fonts (not recommended).

You can disable the CSP (allowing all connections) on a page, section, or globally by setting enable_csp = false in the front matter or config.toml file.

Notes:

Enabling comments, analytics, or mermaid diagrams automatically allows scripts/frames/styles/connections as needed.
To use a Zola built-in syntax highlighting theme, you need to allow unsafe-inline in the style-src directive:
```
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
+
```

Requires proper webserver configuration (e.g. redirecting HTTP traffic to HTTPS). ↩

\ No newline at end of file diff --git a/blog/security/social_cards/blog_security.jpg b/blog/security/social_cards/blog_security.jpg new file mode 100644 index 0000000..154cb98 Binary files /dev/null and b/blog/security/social_cards/blog_security.jpg differ diff --git a/blog/security/social_cards/ca_blog_security.jpg b/blog/security/social_cards/ca_blog_security.jpg new file mode 100644 index 0000000..725da83 Binary files /dev/null and b/blog/security/social_cards/ca_blog_security.jpg differ diff --git a/blog/security/social_cards/es_blog_security.jpg b/blog/security/social_cards/es_blog_security.jpg new file mode 100644 index 0000000..3a898a2 Binary files /dev/null and b/blog/security/social_cards/es_blog_security.jpg differ diff --git a/blog/series/img/jump_to_series_posts_dark.webp b/blog/series/img/jump_to_series_posts_dark.webp new file mode 100644 index 0000000..d88a292 Binary files /dev/null and b/blog/series/img/jump_to_series_posts_dark.webp differ diff --git a/blog/series/img/jump_to_series_posts_light.webp b/blog/series/img/jump_to_series_posts_light.webp new file mode 100644 index 0000000..22f5e78 Binary files /dev/null and b/blog/series/img/jump_to_series_posts_light.webp differ diff --git a/blog/series/img/series_dark.webp b/blog/series/img/series_dark.webp new file mode 100644 index 0000000..89223d0 Binary files /dev/null and b/blog/series/img/series_dark.webp differ diff --git a/blog/series/img/series_light.webp b/blog/series/img/series_light.webp new file mode 100644 index 0000000..780e2f2 Binary files /dev/null and b/blog/series/img/series_light.webp differ diff --git a/blog/series/img/series_reversed_dark.webp b/blog/series/img/series_reversed_dark.webp new file mode 100644 index 0000000..112a853 Binary files /dev/null and b/blog/series/img/series_reversed_dark.webp differ diff --git a/blog/series/img/series_reversed_light.webp b/blog/series/img/series_reversed_light.webp new file mode 100644 index 0000000..2a1dd0e Binary files /dev/null and b/blog/series/img/series_reversed_light.webp differ diff --git a/blog/series/index.html b/blog/series/index.html new file mode 100644 index 0000000..cda4cb7 --- /dev/null +++ b/blog/series/index.html @@ -0,0 +1,164 @@ + +~/tabi • A Complete Guide to Series

A Complete Guide to Series

8th Nov 2024
8 min read
Tags:
showcase,
tutorial,
FAQ,
series

Updated on 21st Feb 2025
See changes

A series organizes related posts in a sequential order, similar to chapters in a book. Unlike tags, which simply group related content, series suggest a specific reading order from start to finish.

Posts within a series do not need to be published consecutively; the series feature brings together thematically linked posts in a coherent sequence.

The diagram below illustrates how series posts (3, 5, and 8) exist within the main blog flow while maintaining their own ordered sequence within Series 1.

+    flowchart
+    subgraph main[BLOG]
+        P1[Post 1]
+        P2[P2]
+        P3[P3]
+        P4[P4]
+        P5[P5]
+        P6[P6]
+        P7[P7]
+        P8[P8]
+        P9[P9]
+    end
+    subgraph series1[SERIES 1]
+        PS1["Series Post 1 (=P3)"]
+        PS2["Series Post 2 (=P5)"]
+        PS3["Series Post 3 (=P8)"]
+    end
+    P3 o-.-o PS1
+    P5 o-.-o PS2
+    P8 o-.-o PS3
+

Quick Start

Create a directory for your series.
Create _index.md in the series directory.

Set up the _index.md front matter:

title = "Learning Rust"
+template = "series.html"
+sort_by = "slug"
+transparent = true
+
+[extra]
+series = true
+

Create your series articles in this directory.

Want more? Keep reading!

How Do Series Work?

A series is just a section which is handled in a special way by tabi. For more details on sections, see the Zola documentation.

Taking the example from the diagram above, the directory structure would be as follow:

content/
+    _index.md
+    blog/
+        _index.md
+        post1/
+            index.md
+        post2/
+            index.md
+        post4/
+            index.md
+        post6/
+            index.md
+        post7/
+            index.md
+        post9/
+            index.md
+        series1/
+            _index.md
+            post3/
+                index.md
+            post5/
+                index.md
+            post8/
+                index.md
+

To create a series, you need to:

Use the series.html template
Set series = true in the section’s [extra] configuration
Enable transparent = true to integrate series posts with the parent blog section

The series main page displays an overview followed by a list of all posts in the series:

Jump to Posts

If the content of a series (the Markdown after the front matter in _index.md) is over 2000 characters, a “Jump to posts” link appears next to the series title.

To force the feature on or off, set show_jump_to_posts in the [extra] section of your series section or in config.toml. This setting follows the hierarchy.

Series Pages and Order

All pages in the series section will be a series page. The series pages will be ordered as per the series section sort_by.

While series maintain their own internal order, they remain independent from the main section’s (e.g. blog/) chronological flow thanks to the transparent setting.

Sorting Options

Choose from these sorting methods, each with its own advantages:

`sort_by`	pros	cons
`slug`	The series pages order is made explicit in the path (e.g. `example.com/blog/series1/01-series-post-one`).	Each series page must be prefixed accordingly.
`weight`	The series pages order is easy to set up transparently. First series post has weight `1`, second series post has weight `2` and so on.	Each series page must have its weight set accordingly.
`date`	The series pages order can be configured once in the series section configuration. No need to do anything on each series page.	The series pages order has to be reversed because the first page is usually the oldest. This can only be achieved by paginating the series section (`paginate_by = 9999`) and reversing its order (`paginate_reversed = true`).

Zola version to sort by date

In order to properly reverse dates, Zola v0.19.3+ (unreleased) is required so that pagination information is available through the get_section function. Anything relying on the series pages order won’t be correct in a series page otherwise (e.g. previous/next series page, ordered and unordered list…) See Zola PR #2653.

Page Indexing

Pages in a series are indexed starting from 1, following their sort_by order. To reverse the indexing (making the first page have the highest index instead), add this setting to _index.md or config.toml:

[extra]
+post_listing_index_reversed = true  # Defaults to false if unset.
+

This setting follows the hierarchy.

Intro and Outro Templates

Series articles can have automatic introduction and conclusion sections. These are configured in your series’ _index.md. A basic example:

[extra.series_intro_templates]
+default = "This article is part of the $SERIES_HTML_LINK series."
+
+[extra.series_outro_templates]
+default = "Thanks for reading part $SERIES_PAGE_INDEX of $SERIES_HTML_LINK!"
+

The intro and outro sections each have their own CSS classes (series-page-intro and series-page-outro), allowing you to customize their appearance through custom CSS.

Template Types

The series system uses different templates based on an article’s position in the series:

next_only - Used for the first article (has next article but no previous)
middle - Used for articles with both previous and next articles
prev_only - Used for the last article (has previous article but no next)
default - Fallback template used when a specific position template isn’t defined

The system automatically determines which template to use based on the article’s position. The templates are defined in the series configuration (_index.md), as extra.series_intro_templates and extra.series_outro_templates.:

[extra.series_intro_templates]
+next_only = "Welcome to part 1! Next up: $NEXT_HTML_LINK"
+middle = "Previous: $PREV_HTML_LINK | Next: $NEXT_HTML_LINK"
+prev_only = "The final chapter! Previously: $PREV_HTML_LINK"
+default = "Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER"
+

All templates are optional. Template selection follows a priority system:

If a position-specific template exists (next_only, middle, or prev_only), it will be used
Otherwise, the default template is used
If no templates are defined at all, no series information will be displayed

See the template example for a more elaborate example.

Placement in Content

By default:

Series introductions appear at the start of your article
Series outro appears at the end (before footnotes, if any)

You can control exactly where these appear using  and  in your Markdown:

This paragraph appears before the series introduction.
+
+<!-- series_intro -->
+
+Main content of the article.
+
+<!-- series_outro -->
+
+## Learning Resources
+
+Extra content…
+
+[^1]: Footnotes will always appear at the end.
+

Variables

Series templates use a flexible variable system that lets you:

Reference series information (title, links)
Add navigation between articles
Show progress indicators
Include custom information using your own variables

Variables are placeholders starting with $ that get replaced with actual content when your site builds. For example, $SERIES_HTML_LINK becomes a clickable link to your series index page.

There are three types of variables:

Basic Series Variables: General information about the series
Navigation Variables: Links to previous/next articles
Custom Variables: Your own placeholders for additional information

Basic Series Variables

Variable	Availability	Returns	Description	Example Usage	Example Output
`$SERIES_TITLE`	Always	Text	Plain text title of the series	`Part of $SERIES_TITLE`	Part of Learn Rust
`$SERIES_PERMALINK`	Always	Text	URL to series index	`[See all posts]($SERIES_PERMALINK)`	See all posts
`$SERIES_HTML_LINK`	Always	HTML	Ready-to-use link to series	`Welcome to $SERIES_HTML_LINK!`	Welcome to Learn Rust!
`$SERIES_PAGES_NUMBER`	Always	Number	Total articles in series	`A $SERIES_PAGES_NUMBER part series`	A 5 part series
`$SERIES_PAGE_INDEX`	Always	Number	Current article’s position	`Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER`	Part 3 of 5
`$SERIES_PAGES_OLIST`	Always	HTML	Ordered list of all articles	`Articles in series: $SERIES_PAGES_OLIST`	Articles in series: Current article Other articles
`$SERIES_PAGES_ULIST`	Always	HTML	Unordered list of all articles	`Articles in series: $SERIES_PAGES_ULIST`	Articles in series: Current article Other articles

TIP: Custom text with permalinks

Markdown links like [text]($SERIES_PERMALINK) will be marked (and styled) as external. If you need custom text and want to avoid external styling, use HTML: <a href=\"$SERIES_PERMALINK\">your text</a>.

Variable	Availability	Returns	Description	Example Usage	Example Output
`$PREV_TITLE`	Previous exists	Text	Previous article’s title	`Previously: $PREV_TITLE`	Previously: Setting Up Your Environment
`$PREV_PERMALINK`	Previous exists	Text	URL to previous article	`[← Back]($PREV_PERMALINK)`	← Back
`$PREV_HTML_LINK`	Previous exists	HTML	Ready-to-use link to previous	`Read $PREV_HTML_LINK first`	Read Setting Up Your Environment first
`$PREV_DESCRIPTION`	Previous exists	Text	Description of previous article	`Recap: $PREV_DESCRIPTION`	Recap: Setting up Rust
`$NEXT_TITLE`	Next exists	Text	Next article’s title	`Next up: $NEXT_TITLE`	Next up: Advanced Patterns
`$NEXT_PERMALINK`	Next exists	Text	URL to next article	`[Continue →]($NEXT_PERMALINK)`	Continue →
`$NEXT_HTML_LINK`	Next exists	HTML	Ready-to-use link to next	`Continue with $NEXT_HTML_LINK`	Continue with Advanced Patterns
`$NEXT_DESCRIPTION`	Next exists	Text	Description of next article	`Coming up: $NEXT_DESCRIPTION`	Coming up: Learn about Rust’s advanced pattern matching features

First Article Reference

Variable	Availability	Returns	Description	Example Usage	Example Output
`$FIRST_TITLE`	Always	Text	First article’s title	`Start with $FIRST_TITLE`	Start with Introduction to Rust
`$FIRST_HTML_LINK`	Always	HTML	Ready-to-use link to first article	`Begin at $FIRST_HTML_LINK`	Begin at Introduction to Rust

Template Example

HTML vs text variables

Use HTML variables (ending in _HTML_LINK) when you want ready-made links. Use text variables (ending in _TITLE or _PERMALINK) when you want more control over the formatting.

# Introduction.
+[extra.series_intro_templates]
+next_only = """
+Welcome to $SERIES_HTML_LINK! This $SERIES_PAGES_NUMBER-part series will teach you Rust from scratch.
+
+Up next: $NEXT_HTML_LINK - $NEXT_DESCRIPTION
+"""
+
+middle = """
+📚 Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER in $SERIES_HTML_LINK
+
+Previously: $PREV_HTML_LINK
+Next up: $NEXT_HTML_LINK
+"""
+
+prev_only = """
+Welcome to the final part of $SERIES_HTML_LINK!
+New here? Start with $FIRST_HTML_LINK to build a strong foundation.
+
+Previously: $PREV_HTML_LINK
+"""
+
+# Fallback template.
+default = "This article is part of the $SERIES_HTML_LINK series."
+
+# Outro.
+[extra.series_outro_templates]
+next_only = """
+Thanks for reading! 🙌
+
+Continue your journey with $NEXT_HTML_LINK, where $NEXT_DESCRIPTION
+Or check out the complete [$SERIES_TITLE]($SERIES_PERMALINK) series outline.
+"""
+
+middle = """
+---
+📝 Series Navigation
+
+- Previous: $PREV_HTML_LINK
+- Next: $NEXT_HTML_LINK
+- [Series Overview]($SERIES_PERMALINK)
+"""
+
+prev_only = """
+🎉 Congratulations! You've completed $SERIES_HTML_LINK.
+
+Want to review? Here's where we started: $FIRST_HTML_LINK
+Or check what we just covered in $PREV_HTML_LINK.
+"""
+
+# Fallback.
+default = """
+---
+This article is part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER in $SERIES_HTML_LINK.
+"""
+

Custom Variables

Series templates support custom variables for additional information you want to include across your series. The process takes two steps:

First, define your placeholders in your series configuration (_index.md):

[extra]
+series = true
+series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
+

Then, in each series article, provide the values for these placeholders in series_template_variables:

[extra.series_template_variables]
+position = "first"
+topic = "Variables and Types"
+difficulty = "Beginner"
+

Using Custom Variables

You can use your custom variables in any template, alongside the built-in variables:

[extra.series_intro_templates]
+default = """
+This is the $POSITION article in $SERIES_HTML_LINK.
+Today's topic: $TOPIC
+Difficulty level: $DIFFICULTY
+"""
+

WARNING

While placeholders are defined with uppercase ($POSITION), the variable names in series_template_variables must be lowercase (position).

Example with Custom Variables

# In the series configuration.
+[extra]
+series = true
+series_template_placeholders = ["$LEARNING_TIME", "$KEY_CONCEPTS"]
+
+series_intro_templates.default = """
+📚 Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER
+⏱️ Estimated time: $LEARNING_TIME
+🔑 Key concepts: $KEY_CONCEPTS
+"""
+

# In an article of the series.
+[extra.series_template_variables]
+learning_time = "30 minutes"
+key_concepts = "Functions, Error Handling, Pattern Matching"
+

This will output:

📚 Part 2 of 5
+⏱️ Estimated time: 30 minutes
+🔑 Key concepts: Functions, Error Handling, Pattern Matching
+

Missing Variables

If you use a placeholder in your templates but don’t provide its value in series_template_variables, the build will fail with an error listing the missing variables.

\ No newline at end of file diff --git a/blog/series/social_cards/blog_series.jpg b/blog/series/social_cards/blog_series.jpg new file mode 100644 index 0000000..0de6828 Binary files /dev/null and b/blog/series/social_cards/blog_series.jpg differ diff --git a/blog/series/social_cards/ca_blog_series.jpg b/blog/series/social_cards/ca_blog_series.jpg new file mode 100644 index 0000000..12ccc6c Binary files /dev/null and b/blog/series/social_cards/ca_blog_series.jpg differ diff --git a/blog/series/social_cards/es_blog_series.jpg b/blog/series/social_cards/es_blog_series.jpg new file mode 100644 index 0000000..3a24a96 Binary files /dev/null and b/blog/series/social_cards/es_blog_series.jpg differ diff --git a/blog/shortcodes/img/amsterdam_by_oskerwyld.webp b/blog/shortcodes/img/amsterdam_by_oskerwyld.webp new file mode 100644 index 0000000..2e84a02 Binary files /dev/null and b/blog/shortcodes/img/amsterdam_by_oskerwyld.webp differ diff --git a/blog/shortcodes/img/desert_by_oskerwyld.webp b/blog/shortcodes/img/desert_by_oskerwyld.webp new file mode 100644 index 0000000..71a0f12 Binary files /dev/null and b/blog/shortcodes/img/desert_by_oskerwyld.webp differ diff --git a/blog/shortcodes/img/edited.webp b/blog/shortcodes/img/edited.webp new file mode 100644 index 0000000..ab5ae7f Binary files /dev/null and b/blog/shortcodes/img/edited.webp differ diff --git a/blog/shortcodes/img/graph.webp b/blog/shortcodes/img/graph.webp new file mode 100644 index 0000000..5c2b9cd Binary files /dev/null and b/blog/shortcodes/img/graph.webp differ diff --git a/blog/shortcodes/img/mojave_day.webp b/blog/shortcodes/img/mojave_day.webp new file mode 100644 index 0000000..dcba3fb Binary files /dev/null and b/blog/shortcodes/img/mojave_day.webp differ diff --git a/blog/shortcodes/img/mojave_night.webp b/blog/shortcodes/img/mojave_night.webp new file mode 100644 index 0000000..20267c5 Binary files /dev/null and b/blog/shortcodes/img/mojave_night.webp differ diff --git a/blog/shortcodes/img/paris_day.webp b/blog/shortcodes/img/paris_day.webp new file mode 100644 index 0000000..5dc219c Binary files /dev/null and b/blog/shortcodes/img/paris_day.webp differ diff --git a/blog/shortcodes/img/paris_night.webp b/blog/shortcodes/img/paris_night.webp new file mode 100644 index 0000000..d445112 Binary files /dev/null and b/blog/shortcodes/img/paris_night.webp differ diff --git a/blog/shortcodes/img/raw.webp b/blog/shortcodes/img/raw.webp new file mode 100644 index 0000000..d005c95 Binary files /dev/null and b/blog/shortcodes/img/raw.webp differ diff --git a/blog/shortcodes/index.html b/blog/shortcodes/index.html new file mode 100644 index 0000000..71897b1 --- /dev/null +++ b/blog/shortcodes/index.html @@ -0,0 +1,126 @@ + +~/tabi • Custom shortcodes

Custom shortcodes

19th Feb 2023
5 min read
Tags:
showcase,
shortcodes

Updated on 26th Jul 2025
See changes

Diagram shortcode

Mermaid diagrams

Mermaid is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.

To include a Mermaid diagram in your post, there are two steps:

Set mermaid = true in the [extra] section of the front matter of your page, section or config.toml. This will load the JavaScript needed to render the diagrams.
Use the mermaid() shortcode to define your diagram in your posts. For example:

{% mermaid() %}
+classDiagram
+    class CognitiveDistortions {
+        +AllOrNothingThinking()
+        +Overgeneralization()
+        +MentalFilter()
+        +JumpingToConclusions()
+    }
+    class AllOrNothingThinking {
+        +SeeInExtremes()
+    }
+    class Overgeneralization {
+        +GeneralizeFromSingle()
+    }
+    class MentalFilter {
+        +FocusOnNegative()
+    }
+    class JumpingToConclusions {
+        +MakeAssumptions()
+    }
+    CognitiveDistortions *-- AllOrNothingThinking
+    CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions *-- MentalFilter
+    CognitiveDistortions *-- JumpingToConclusions
+{% end %}
+

The diagram will be rendered as follows:

+    classDiagram
+    class CognitiveDistortions {
+        +AllOrNothingThinking()
+        +Overgeneralization()
+        +MentalFilter()
+        +JumpingToConclusions()
+    }
+    class AllOrNothingThinking {
+        +SeeInExtremes()
+    }
+    class Overgeneralization {
+        +GeneralizeFromSingle()
+    }
+    class MentalFilter {
+        +FocusOnNegative()
+    }
+    class JumpingToConclusions {
+        +MakeAssumptions()
+    }
+    CognitiveDistortions *-- AllOrNothingThinking
+    CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions *-- MentalFilter
+    CognitiveDistortions *-- JumpingToConclusions
+

The Mermaid shortcode supports two parameters:

invertible: If set to true (default), the diagram will be inverted in dark mode, just like invertible images.
full_width: Allows the diagram to take up the width of the header. See full-width image.

TIP

You can use the Mermaid Live Editor to create and preview your diagrams.

Usage

{% mermaid(invertible=true, full_width=false) %}
+
+Your diagram goes here.
+
+`invertible` or `full_width` can be omitted if default values are used.
+
+{% end %}
+

Image shortcodes

All image shortcodes support absolute paths, relative paths, and remote sources in the src parameter.

All image shortcodes have these optional parameters:

raw_path. Defaults to false. If set to true, the src parameter will be used as is. Useful for colocated assets with a custom slug (see Zola issue #2598).
inline. Defaults to false. If set to true, the image will be displayed inline with the text.
full_width. Defaults to false (see below)
lazy_loading. Defaults to true.

Dual theme images

Useful if you want to use a different image for the light and dark themes:

Usage

{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }}
+

Invertible image

Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.

Usage

{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }}
+

Dimmable image

Images with too much brightness or contrast can be jarring against a dark background. Here’s an example of a photograph that dims when the dark theme is active.

Usage

{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
+

Swap image on hover

Provides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example.

Usage

{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
+

Interactive image toggle

Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details.

Usage

{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}
+

Full-width image

The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows).

All other image shortcodes can be made into full-width by setting the optional parameter full_width to true.

Usage

{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
+

Engagement shortcodes

iine

This shortcode allows you to add extra iine.to buttons to your posts, like this:

Usage

{{ iine(icon="heart", slug="/post/my-post-slug/like", label="Like this post") }}
+

The shortcode takes the following optional parameters:

icon: The icon to display. Can be heart, thumbs_up, upvote, or any emoji.
slug: A unique identifier. Defaults to the current page’s path. Useful if you want more than one button on the same page.
label: The accessibility label for the button. Defaults to “Like this post”.

Code shortcodes

Show source or path

You can display a path or URL for a code block using Zola’s native syntax:

```rust,name=src/main.rs
+fn main() {
+    println!("Hello, world!");
+}
+```
+

This renders:

fn main() {
+    println!("Hello, world!");
+}
+

If you set the name to a URL (i.e. it starts with http or https), you can turn it into a clickable link. This is particularly useful when used in conjunction with the remote text shortcode.

JavaScript required

The clickable URL feature requires JavaScript. To enable it, set code_block_name_links = true on the [extra] section of your page, section, or config.toml.

__pycache__/
+*coverage*
+.vscode/
+dist/
+

Legacy shortcode support

The add_src_to_code_block shortcode is still supported for backward compatibility but will be deprecated in a future release. Please use Zola’s native syntax shown above instead:

# Old way (deprecated):
+{{ add_src_to_code_block(src="path/to/file.rs") }}
+
+# New way (preferred):
+```rust,name=path/to/file.rs
+

Text shortcodes

Aside (side/margin note)

Add supplementary content in the margins on wide screens, or as distinct blocks on mobile.

The shortcode accepts two parameters:

position: Set to "right" to place in right margin (defaults to left)
Content can be provided via text parameter or between shortcode tags

Usage

WARNING

Place the aside shortcode on its own line to prevent formatting issues.

Using the text parameter:

{{ aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") }}
+

Using the content body and setting the position to right:

{% aside(position="right") %}
+A longer note that
+can span multiple lines.
+
+_Markdown_ is supported.
+{% end %}
+

Remote text

Embed text from a remote URL or a local file. To display the path or URL on the code block, see the show source or path shortcode.

The shortcode accepts three parameters:

src: The source URL or file path (required)
start: First line to display (optional, starts at 1)
end: The ending line number (optional, defaults to 0, meaning the last line)

INFO

start and end are inclusive. start=3, end=3 will display only the third line.

Important:

Remote VS local files: If src starts with “http”, it will be treated as a remote file. Otherwise, it assumes a local file path.
Files access: As it uses Zola’s load_data, local files must be inside the Zola directory—see File searching logic. As of tabi 2.16.0, the shortcode supports both relative and absolute paths.
Code block formatting: To display the text as a code block, you must manually add the Markdown code fences (backticks) and, optionally, specify the programming language for syntax highlighting.

Usage

Embedding a remote Python script within a code block with syntax highlighting:

```python
+{{ remote_text(src="https://example.com/script.py") }}
+```
+

Displaying text from a local file:

{{ remote_text(src="path/to/file.txt") }}
+

Display lines 3 to 7 (both inclusive) of a local file:

{{ remote_text(src="path/to/file.txt", start=3, end=7) }}
+

Admonitions

Bring attention to information with these admonition shortcodes. They come in five types: note, tip, info, warning, and danger.

NOTE

Some content with Markdown syntax. Check this api.

TIP

Some content with Markdown syntax. Check this api.

INFO

Some content with Markdown syntax. Check this api.

WARNING

Some content with Markdown syntax. Check this api.

DANGER

Some content with Markdown syntax. Check this api.

You can change the title and icon of the admonition. Both parameters take a string and default to the type of admonition. icon can be any of the available admonition types.

Custom title and icon

Some content with Markdown syntax. Check this api.

Usage

You can use admonitions in two ways:

Inline with parameters:

{{ admonition(type="danger", icon="tip", title="An important tip", text="Stay hydrated~") }}
+

With a content body:

{% admonition(type="danger", icon="tip", title="An important tip") %}
+Stay hydrated~
+
+This method is particularly useful for longer content or multiple paragraphs.
+{% end %}
+

Both methods support the same parameters (type, icon, and title), with the content either passed as the text parameter or as the body between tags.

Multilingual quotes

This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically:

“What tranquillity, to go through life in silence, greeting only friends.”
— Francisco Umbral (Show original quote)

“Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.”
— Francisco Umbral (Show translation)

Usage

{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
+

References with hanging indent

This shortcode formats a reference section with a hanging indent like so:

Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. New York Journal of Technology, 11(2), 24-39. https://doi.org/10.1007/s10198-022-01497-6.

Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. Los Angeles Journal of Sociology, 16(3), 41-58. https://doi.org/10.1093/jmp/jhx037.

Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. Scranton Agricultural Quarterly, 38(3), 67-81.

Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. New York Journal of Business, 12(4), 112-125.

Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College’s Model United Nations. Colorado Journal of Communication Studies, 19(2), 73-86. https://doi.org/10.1093/6seaons/1movie.

Usage

{% references() %}
+
+Your references go here.
+
+Each in a new line. Markdown (links, italics…) will be rendered.
+
+{% end %}
+

Spoiler

This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few months. Yes, really.

As you can see, Markdown is rendered. You can even add newlines with  .

This shortcode has the optional flag fixed_blur to blur a fixed placeholder (“SPOILER”), instead of blurring the actual contents. Like this: it is not necessary to wait 24 hours before filing a missing person report.

Usage

{{ spoiler(text="text to hide", fixed_blur=false) }}
+

Containers

Wide container

Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll.

Title	Year	Director	Cinematographer	Genre	IMDb	Duration
Beoning	2018	Lee Chang-dong	Hong Kyung-pyo	Drama/Mystery	7.5	148 min
The Master	2012	Paul Thomas Anderson	Mihai Mălaimare Jr.	Drama/History	7.1	137 min
The Tree of Life	2011	Terrence Malick	Emmanuel Lubezki	Drama	6.8	139 min

Usage

{% wide_container() %}
+
+Place your code block, paragraph, table… here.
+
+Markdown will of course be rendered.
+
+{% end %}
+

Force text direction

Force the text direction of a content block. Overrides both the global force_codeblock_ltr setting and the document’s overall direction.

Accepts the parameter direction: the desired text direction. This can be either “ltr” (left-to-right) or “rtl” (right-to-left). Defaults to “ltr”.

def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+

Usage

In a LTR page we can force a code block to be RTL (as shown above) like so:

{% force_text_direction(direction="rtl") %}
+
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+
+{% end %}
+

\ No newline at end of file diff --git a/blog/shortcodes/social_cards/blog_shortcodes.jpg b/blog/shortcodes/social_cards/blog_shortcodes.jpg new file mode 100644 index 0000000..3a60ea1 Binary files /dev/null and b/blog/shortcodes/social_cards/blog_shortcodes.jpg differ diff --git a/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg b/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg new file mode 100644 index 0000000..d6daafb Binary files /dev/null and b/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg differ diff --git a/blog/shortcodes/social_cards/es_blog_shortcodes.jpg b/blog/shortcodes/social_cards/es_blog_shortcodes.jpg new file mode 100644 index 0000000..f9a36dc Binary files /dev/null and b/blog/shortcodes/social_cards/es_blog_shortcodes.jpg differ diff --git a/blog/toc/index.html b/blog/toc/index.html new file mode 100644 index 0000000..ae9abc6 --- /dev/null +++ b/blog/toc/index.html @@ -0,0 +1,26 @@ + +~/tabi • Table of Contents

1st Nov 2022
10 min read
Tags:
showcase,
markdown,
tutorial

Updated on 16th Feb 2024
See changes

Documentation

Enabling (and positioning) the Table of Contents

There are two ways to enable the Table of Contents (ToC). If you want it to be right below the header (like in this page) set this variable on the post’s front matter:

[extra]
+toc = true
+

If you’d rather show the ToC elsewhere on your post (e.g. after an introduction), you can do so by adding a line with this content wherever you’d like the ToC to appear:

<!-- toc -->
+

You can also use the simple {{ toc() }} shortcode, which will simply write that string for you, effectively inserting the ToC (Michael Clayton’s idea).

This method will render the ToC without the “Table of Contents” header. This allows you to use a different (or no) header for the ToC, or hide it like this:

Hidden ToC

The code to achieve this:

<details>
+    <summary>Hidden ToC</summary>
+    <!-- toc -->
+</details>
+

Note: If you both set toc = true and have  somewhere in your text, you’ll get multiple ToCs.

If you set a custom position and a custom header for the ToC, you’ll probably want to hide it (see the section below) like this:

+++
+title = "Your Post's Title"
+date = 2034-01-11
+
+[extra]
+toc_ignore_pattern = "^(Table of Contents)"
++++
+
+Here goes some introductory text.
+
+### Table of Contents
+
+<!-- toc -->
+
+## First content header
+

Setting a maximum depth

You can set the maximum depth for the ToC by specifying the toc_levels variable, which takes an integer between 1 and 4:

[extra]
+toc_levels = 2
+

In this example, only the first two levels of headers would be included in the ToC, regardless of their actual HTML tags (h1, h2, h3, etc.). If you want to include only the main level of headers, set toc_levels = 1. The default toc_levels value is 3.

Keep your readers in mind when setting the toc_levels. While it can be tempting to include many nested levels for detailed navigation, a shorter and simpler ToC can often be more reader-friendly and less overwhelming. Adjust the depth according to the complexity and length of your content for the best reader experience.

Hiding headers from the ToC

You might want to hide certain headers. For example, if your article has many Figures or Tables, they might clutter the ToC. You can hide specific headers in the ToC with the toc_ignore_pattern variable.

This variable expects a regular expression (regex), as it’s using Tera’s matching test. The toc_ignore_pattern is tested against the text of the header, excluding the # character(s). For example, for the header ### Further reading, the text Further reading would be checked against.

Here are some example values for toc_ignore_pattern along with the headers they can hide:
toc_ignore_pattern Excludes headers which…
Table contain “Table”
^Figure start with “Figure”
(?i)(table|figure) start with “Table” or “Figure” (case insensitive)
\[Draft\]$ end with “[Draft]”.

You can test your regular expression on a site like regex101 to ensure it works as expected.

Note: “Look-around” capabilities, including look-ahead and look-behind, are not supported.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.

Heading 2

Heading 3.1

Heading 4.1

Heading 4.2

Heading 3.2

Heading 4

Heading 2

Heading 3.1

Heading 4.1

Heading 4.2

Heading 3.2

Heading 4.1

\ No newline at end of file diff --git a/blog/toc/social_cards/blog_toc.jpg b/blog/toc/social_cards/blog_toc.jpg new file mode 100644 index 0000000..534e3cd Binary files /dev/null and b/blog/toc/social_cards/blog_toc.jpg differ diff --git a/blog/toc/social_cards/ca_blog_toc.jpg b/blog/toc/social_cards/ca_blog_toc.jpg new file mode 100644 index 0000000..bf6ca88 Binary files /dev/null and b/blog/toc/social_cards/ca_blog_toc.jpg differ diff --git a/blog/toc/social_cards/es_blog_toc.jpg b/blog/toc/social_cards/es_blog_toc.jpg new file mode 100644 index 0000000..355cc05 Binary files /dev/null and b/blog/toc/social_cards/es_blog_toc.jpg differ diff --git a/ca.jpg b/ca.jpg new file mode 100644 index 0000000..985bb7c Binary files /dev/null and b/ca.jpg differ diff --git a/ca/about/index.html b/ca/about/index.html new file mode 100644 index 0000000..a8a820c --- /dev/null +++ b/ca/about/index.html @@ -0,0 +1,2 @@ + +~/tabi • Sobre mi

Sobre mi

Benvingut a la demo de tabi, un tema per a Zola, un generador de llocs web estàtics rapidíssim.

tabi és una obra d’Óscar Fernández (welpo a GitHub), inicialment creat per al seu lloc personal. És un tema modern i ple de funcionalitats que ofereix configuracions predefinides raonables i segures.

Busques instruccions detallades o consells sobre com utilitzar tabi? Les seccions del blog i de l’arxiu contenen la documentació del tema, que inclou des de mostres de funcions fins a guies detallades.

Característiques

tabi ofereix suport per a diversos idiomes, aparença personalitzable, integració de comentaris, i molt més, tot amb un enfocament en el rendiment (tot el JavaScript és opcional) i la seguretat.

Contribucions

Tota aportació és benvinguda! Agraïm els informes d’errors, millores en traduccions o documentació (per mínimes que siguin), sol·licituds de noves funcions… Consulta les Pautes de Contribució per saber com pots contribuir. Gràcies!

Llicència

El codi està disponible sota la llicència MIT.

\ No newline at end of file diff --git a/ca/about/social_cards/about.ar.jpg b/ca/about/social_cards/about.ar.jpg new file mode 100644 index 0000000..981ba8f Binary files /dev/null and b/ca/about/social_cards/about.ar.jpg differ diff --git a/ca/ar.jpg b/ca/ar.jpg new file mode 100644 index 0000000..64e77bc Binary files /dev/null and b/ca/ar.jpg differ diff --git a/ca/archive/archive.jpg b/ca/archive/archive.jpg new file mode 100644 index 0000000..fb03554 Binary files /dev/null and b/ca/archive/archive.jpg differ diff --git a/ca/archive/ca_archive.jpg b/ca/archive/ca_archive.jpg new file mode 100644 index 0000000..cd25448 Binary files /dev/null and b/ca/archive/ca_archive.jpg differ diff --git a/ca/archive/es_archive.jpg b/ca/archive/es_archive.jpg new file mode 100644 index 0000000..c95177d Binary files /dev/null and b/ca/archive/es_archive.jpg differ diff --git a/ca/archive/index.html b/ca/archive/index.html new file mode 100644 index 0000000..150f464 --- /dev/null +++ b/ca/archive/index.html @@ -0,0 +1,2 @@ + +~/tabi • Arxiu

Arxiu

2024
- 08 de nov.
  Guia completa sobre sèries
2023
- 18 de set.
  Domina la configuració de tabi: guia completa
- 12 de set.
  Lost in Translation? Explora les capacitats multilingües de tabi
- 09 d’ag.
  Personalitza el color de tabi i el tema per defecte
- 14 de jul.
  Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes
- 29 d’abr.
  Optimitza la càrrega amb un subconjunt de font personalitzat
- 22 de febr.
  Seguretat per defecte
- 19 de febr.
  Shortcodes personalitzats
- 31 de gen.
  Exemples de Markdown
- 06 de gen.
  Sense JavaScript obligatori
2022
- 01 de nov.
  Taula de contingut

\ No newline at end of file diff --git a/ca/atom.xml b/ca/atom.xml new file mode 100644 index 0000000..671511f --- /dev/null +++ b/ca/atom.xml @@ -0,0 +1,131 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + ~/tabi + ~/tabi + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zola2025-09-14T00:00:00+00:00https://welpo.github.io/tabi/ca/atom.xml + Guia completa sobre sèries + 2024-11-08T00:00:00+00:00 + 2025-02-21T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/series/ +

Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts.

+ + Domina la configuració de tabi: guia completa + 2023-09-18T00:00:00+00:00 + 2025-08-07T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/ +

Descobreix les múltiples maneres en què pots personalitzar tabi.

+ + Lost in Translation? Explora les capacitats multilingües de tabi + 2023-09-12T00:00:00+00:00 + 2025-09-14T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/faq-languages/ +

Descobreix com tabi t'ajuda a connectar amb una audiència global gràcies a les seves funcions multilingües. Aprèn a canviar la llengua per defecte, afegir més llengües i aportar les teves pròpies traduccions.

+ + Personalitza el color de tabi i el tema per defecte + 2023-08-09T00:00:00+00:00 + 2024-09-12T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/customise-tabi/ +

Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic.

+ + Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes + 2023-07-14T00:00:00+00:00 + 2023-07-26T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/comments/ +

Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus, utterances, Hyvor Talk, o Isso, permetent la interacció i feedback dels lectors.

+ + Optimitza la càrrega amb un subconjunt de font personalitzat + 2023-04-29T00:00:00+00:00 + 2025-01-12T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/custom-font-subset/ +

Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris.

+ + Seguretat per defecte + 2023-02-22T00:00:00+00:00 + 2025-02-21T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/security/ +

tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla.

+ + Shortcodes personalitzats + 2023-02-19T00:00:00+00:00 + 2025-08-01T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/shortcodes/ +

Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran.

+ + Exemples de Markdown + 2023-01-31T00:00:00+00:00 + 2025-02-21T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/markdown/ +

Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina.

+ + Sense JavaScript obligatori + 2023-01-06T00:00:00+00:00 + 2025-02-21T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/javascript/ +

JavaScript només s'utilitza quan HTML i CSS no són suficients.

+ + Taula de contingut + 2022-11-01T00:00:00+00:00 + 2024-02-16T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/toc/ +

Una publicació que mostra la taula de contingut opcional i la seva configuració.

+ + diff --git a/ca/blog/blog.jpg b/ca/blog/blog.jpg new file mode 100644 index 0000000..a05a7ea Binary files /dev/null and b/ca/blog/blog.jpg differ diff --git a/ca/blog/ca_blog.jpg b/ca/blog/ca_blog.jpg new file mode 100644 index 0000000..c9c9057 Binary files /dev/null and b/ca/blog/ca_blog.jpg differ diff --git a/ca/blog/comments/index.html b/ca/blog/comments/index.html new file mode 100644 index 0000000..4f3e384 --- /dev/null +++ b/ca/blog/comments/index.html @@ -0,0 +1,55 @@ + +~/tabi • Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes

Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes

14 de jul. 2023
3 mins de lectura
Etiquetes:
funcionalitat,
tutorial

Actualitzat el 26 de jul. 2023
Veure canvis

Taula de contingut

tabi actualment suporta quatre sistemes de comentaris: giscus i utterances, Hyvor Talk i Isso.

giscus i utterances són projectes de codi obert que et permeten afegir una secció de comentaris al teu lloc web utilitzant les «issues» (utterances) o «discussions» (giscus) de GitHub. Són perfectes per a generadors de llocs estàtics com Zola, ja que permeten als teus lectors interactuar i deixar comentaris a les teves publicacions sense requerir un backend tradicional o una base de dades.

Com que tots dos es basen en GitHub, giscus i utterances requereixen que els usuaris tinguin un compte a GitHub i autoritzin l’aplicació respectiva. Alternativament, els visitants també poden comentar directament en la discussió o «issue» corresponent a GitHub.

Ambdues són excel·lents eines per afegir comentaris al teu blog, però giscus té alguns avantatges:

Més temes.
Suport per a reaccions.
Respostes a comentaris i vista de conversa.
Més segur: utterances requereix habilitar estils en línia no segurs («unsafe inline styles») per establir l’altura del frame; giscus no.
Suport multilingüe: utterances només està disponible en anglès; giscus suporta més de 20 idiomes.
Desenvolupament més actiu: l’últim commit de giscus, en el moment d’aquesta publicació, va ser fa dos dies. L’últim commit d’utterances es va fer fa més d’un any.

Hyvor Talk és una plataforma de comentaris de pagament centrada en la privadesa. Ofereix tots els avantatges del giscus i alguns més, com la moderació i la detecció de correu brossa.

Isso és un sistema de comentaris de codi obert autoallotjat que emmagatzema els comentaris a la seva pròpia base de dades. Un dels seus principals avantatges és la privacitat; no comparteix les dades dels usuaris amb tercers. També té una interfície lleugera i neta, facilitant als teus visitants deixar comentaris. Isso també permet comentaris anònims, potencialment augmentant la participació dels usuaris a la teva pàgina web.

Configuració

Sistemes basats en GitHub

giscus y utterances requereixen una configuració similar. Primer, visita el lloc web del sistema que vulguis habilitar: giscus.app o utteranc.es.

Segueix les instruccions de la secció Configuració del lloc web, i tria les opcions que prefereixis. Finalment, estableix els valors que es mostren a la secció Habilitar giscus/utterances (el bloc de codi script) en la secció corresponent del teu config.toml: [extra.giscus] o [extra.utterances].

giscus

giscus té més opcions que utterances:

[extra.giscus]
+enabled_for_all_posts = false
+automatic_loading = true
+repo = "elTeuNomDUsuariDeGithub/elTeuRepositori"
+repo_id = "LaTevaIDdeRepositori"
+category = "Anuncis"
+category_id = "LaTevaIDdeCategoria"
+mapping = "slug"
+strict_title_matching = 1  # 1 per habilitar, 0 per deshabilitar.
+enable_reactions = 1  # 1 per habilitar, 0 per deshabilitar.
+comment_box_above_comments = true
+light_theme = "noborder_light"
+dark_theme = "noborder_dark"
+lang = ""  # Deixa en blanc perquè coincideixi amb l'idioma de la pàgina.
+lazy_loading = true
+

utterances

[extra.utterances]
+enabled_for_all_posts = false
+automatic_loading = true
+repo = "elTeuNomDUsuariDeGithub/elTeuRepositori"
+issue_term = "slug"
+label = "💬"
+light_theme = "github-light"
+dark_theme = "photon-dark"
+lazy_loading = true
+

Hyvor Talk

Configura el teu lloc web des de la consola Hyvor Talk i completa la configuració a config.toml:

[extra.hyvortalk]
+enabled_for_all_posts = false
+automatic_loading = true
+website_id = "1234"
+page_id_is_slug = true
+lang = ""
+page_author = ""  # Correu (o correu codificat en base64) de l'autor.
+lazy_loading = true
+

Isso

Per habilitar Isso, primer hauràs d’instal·lar i executar un servidor Isso (aquí tens una guia útil). Després, completa aquestes configuracions a config.toml:

[extra.isso]
+enabled_for_all_posts = false
+automatic_loading = true
+endpoint_url = "https://example.com/comments/"  # URL a Isso.
+page_id_is_slug = true
+lang = ""
+max_comments_top = "inf"
+max_comments_nested = "5"
+avatar = true
+voting = true
+page_author_hashes = ""
+lazy_loading = true
+

Configuracions comunes

La opció enabled_for_all_posts = true habilita globalment el sistema de comentaris corresponent.

Alternativament, pots habilitar els comentaris a publicacions concretes afegint el nom del sistema (utterances, giscus, hyvortalk o isso) = true. Per exemple, així és com habilitaries giscus:

title = "L'art de l'entremaliadura segons Shin-Chan
+date = 1990-02-14
+description = "Descobreix com les travessures poden canviar la teva perspectiva de vida."
+
+[taxonomies]
+tags = ["personal", "travessures"]
+
+[extra]
+giscus = true
+

Si accidentalment habilites més d’un sistema, Zola mostrarà un error.

Si el teu lloc web té múltiples idiomes amb publicacions coincidents (com aquesta demo), i t’agradaria compartir comentaris entre idiomes, has d’utilitzar issue_term = "slug" (per giscus y utterances) o page_id_is_slug = true (per Hyvor Talk o Isso). Això utilitzarà el nom de l’arxiu Markdown (sense l’etiqueta d’idioma) com a identificador. Totes les altres opcions crearan diferents seccions de comentaris per a cada idioma.

Exemple en viu

A continuació trobaràs el widget de giscus amb la configuració mostrada a dalt.

\ No newline at end of file diff --git a/ca/blog/comments/social_cards/blog_comments.jpg b/ca/blog/comments/social_cards/blog_comments.jpg new file mode 100644 index 0000000..4047579 Binary files /dev/null and b/ca/blog/comments/social_cards/blog_comments.jpg differ diff --git a/ca/blog/comments/social_cards/ca_blog_comments.jpg b/ca/blog/comments/social_cards/ca_blog_comments.jpg new file mode 100644 index 0000000..06d3294 Binary files /dev/null and b/ca/blog/comments/social_cards/ca_blog_comments.jpg differ diff --git a/ca/blog/comments/social_cards/es_blog_comments.jpg b/ca/blog/comments/social_cards/es_blog_comments.jpg new file mode 100644 index 0000000..b6713fb Binary files /dev/null and b/ca/blog/comments/social_cards/es_blog_comments.jpg differ diff --git a/ca/blog/custom-font-subset/index.html b/ca/blog/custom-font-subset/index.html new file mode 100644 index 0000000..28b3168 --- /dev/null +++ b/ca/blog/custom-font-subset/index.html @@ -0,0 +1,115 @@ + +~/tabi • Optimitza la càrrega amb un subconjunt de font personalitzat

Optimitza la càrrega amb un subconjunt de font personalitzat

29 d’abr. 2023
3 mins de lectura
Etiquetes:
funcionalitat,
tutorial

Actualitzat el 12 de gen. 2025
Veure canvis

El problema

Les fonts personalitzades causen parpelleig de text a Firefox. Per veure un gif i més detalls, mira aquesta issue.

La solució

Per solucionar això, tabi carrega un subconjunt de glifs per a l’encapçalament. Donat que això augmenta lleugerament el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d’aquest subconjunt.

Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma.

TIP

Si estàs fent servir una font personalitzada, pots crear el teu propi subconjunt (segueix llegint) o desactivar completament els subconjunts predeterminats amb enable_subset = false a config.toml.

Per a una optimització addicional, a continuació t’expliquem com crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament.

Requisits

Instal·la aquestes eines:

Executa pip install fonttools brotli per instal·lar totes dues.

L’script

El següent script pren un fitxer config.toml i un fitxer de font com a entrada, extreu els caràcters necessaris, crea un subconjunt de la font i genera un fitxer CSS que conté el subconjunt codificat en base64.

#!/usr/bin/env bash
+
+usage() {
+    echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"
+    echo
+    echo "Options:"
+    echo "  --config, -c   Path to the config.toml file."
+    echo "  --font, -f     Path to the font file."
+    echo "  --output, -o   Output path for the generated custom_subset.css file (default: current directory)"
+    echo "  --help, -h     Show this help message and exit"
+}
+
+# La sortida per defecte és el directori actual.
+output_path="."
+
+# Opcions de la línia de comandes.
+while [ "$#" -gt 0 ]; do
+    case "$1" in
+        --config|-c)
+            config_file="$2"
+            shift 2
+            ;;
+        --font|-f)
+            font_file="$2"
+            shift 2
+            ;;
+        --output|-o)
+            output_path="$2"
+            shift 2
+            ;;
+        --help|-h)
+            usage
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1"
+            usage
+            exit 1
+            ;;
+    esac
+done
+
+# Comprova si s'han proporcionat les opcions -c i -f.
+if [ -z "$config_file" ]; then
+    echo "Error: --config|-c option is required."
+    usage
+    exit 1
+fi
+
+if [ -z "$font_file" ]; then
+    echo "Error: --font|-f option is required."
+    usage
+    exit 1
+fi
+
+# Comprova si els fitxers de configuració i de font existeixen.
+if [ ! -f "$config_file" ]; then
+    echo "Error: Config file '$config_file' not found."
+    exit 1
+fi
+
+if [ ! -f "$font_file" ]; then
+    echo "Error: Font file '$font_file' not found."
+    exit 1
+fi
+
+# Extreu el títol i els noms del menú del fitxer de configuració.
+title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
+menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
+language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
+
+# Si el lloc web és multilingüe, obté les traduccions del menú.
+if [ -n "$language_names" ]; then
+    for menu_name in $menu_names; do
+        # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
+        menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' )
+        # Add the found menu value to the translations string
+        menu_names+="$menu_translation"
+    done
+fi
+
+# Combina les cadenes extretes.
+combined="$title$menu_names$language_names"
+
+# Obté els caràcters únics.
+unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n')
+
+# Crea un fitxer temporal per a subset.woff2.
+temp_subset=$(mktemp)
+
+# Crea el subconjunto.
+pyftsubset "$font_file" \
+    --text="$unique_chars" \
+    --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli
+
+# Codifica en base64 el fitxer temporal subset.woff2 i crea el fitxer CSS.
+base64_encoded_font=$(base64 -i "$temp_subset")
+echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css"
+
+# Elimina el fitxer temporal subset.woff2.
+rm "$temp_subset"
+

Ús

Guarda l’script a algun lloc com ~/bin/subset_font. Fes-lo executable amb chmod +x ~/bin/subset_font.

Ara pots executar-lo amb les opcions requerides --config i --font:

~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2
+

De forma predeterminada, això generarà un fitxer custom_subset.css al directori actual. Utilitza -o o --output per especificar una ruta diferent:

~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output
+

Col·loca aquest fitxer custom_subset.css dins del directori static/ del teu projecte de Zola.

Automatització amb un Pre-commit Hook

És possible que canviïs el títol o les opcions del menú del teu lloc web, la qual cosa faria que el subconjunt personalitzat deixés de ser útil.

Per automatitzar el procés de creació d’aquest fitxer, pots integrar l’script en un ganxo (hook) pre-commit de Git que s’activi en detectar canvis al fitxer config.toml, executi l’script i guardi el fitxer CSS resultant al directori static/ del teu lloc web.

Crea un fitxer .git/hooks/pre-commit al teu projecte de Git, si encara no existeix.
Fes-lo executable amb chmod +x .git/hooks/pre-commit.
Afegeix el següent codi al fitxer:

# Comprova si config.toml s'ha modificat.
+if git diff --cached --name-only | grep -q "config.toml"; then
+    echo "config.toml modified. Running subset_font…"
+
+    # Executa l'script subset_font.
+    ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/
+
+    # Afegeix el fitxer subset.css generat al commit.
+    git add static/custom_subset.css
+fi
+

Asegura’t de modificar l’script perquè coincideixi amb la ruta on has guardat l’script subset_font. Les rutes de configuració i font haurien de funcionar correctament amb la configuració predeterminada de tabi.

Ara, cada vegada que facis canvis al teu projecte de Git i facis commit, el ganxo pre-commit verificarà les modificacions al fitxer config.toml i executarà automàticament l’script subset_font per actualitzar el fitxer custom_subset.css.

Per cert, si t’interessa una forma d’actualitzar automàticament la data de les teves publicacions a Zola o comprimir automàticament els teus fitxers PNG, fes un cop d’ull a aquesta publicació.

Si desitges utilitzar tots els scripts alhora (compressió de fitxers PNG, actualització de la data i creació del subconjunt de fonts), combina el seu codi en un sol fitxer .git/hooks/pre-commit.

\ No newline at end of file diff --git a/ca/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg b/ca/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg new file mode 100644 index 0000000..7bb8b26 Binary files /dev/null and b/ca/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg differ diff --git a/ca/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg b/ca/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg new file mode 100644 index 0000000..573ff88 Binary files /dev/null and b/ca/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg differ diff --git a/ca/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg b/ca/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg new file mode 100644 index 0000000..8bddf80 Binary files /dev/null and b/ca/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg differ diff --git a/ca/blog/customise-tabi/index.html b/ca/blog/customise-tabi/index.html new file mode 100644 index 0000000..3331b6e --- /dev/null +++ b/ca/blog/customise-tabi/index.html @@ -0,0 +1,35 @@ + +~/tabi • Personalitza el color de tabi i el tema per defecte

Personalitza el color de tabi i el tema per defecte

9 d’ag. 2023
5 mins de lectura
Etiquetes:
funcionalitat,
tutorial

Actualitzat el 12 de set. 2024
Veure canvis

Taula de contingut

tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema (“skin”).

Tema per defecte

Utilitza default_theme = "dark" per establir el tema fosc com a predeterminat, o default_theme = "light" per establir el tema clar com a predeterminat.

Establir default_theme = "" (o comentar la variable) seguirà la preferència del sistema de l’usuari (mode clar o fosc).

Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el theme_switcher a config.toml i establir el teu tema preferit (light o dark) a default_theme.

Per exemple, per tenir un tema fosc permanent:

[extra]
+theme_switcher = false
+default_theme = "dark"
+

Skins

No t’agrada l’aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d’aquestes t’agrada, pots crear la teva pròpia skin.

Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc.

Activar una skin és tan fàcil com establir la variable skin a la teva config.toml amb el nom de la skin. Per exemple:

[extra]
+skin = "sakura"
+

Fes una ullada a les skins disponibles a continuació.

Fes clic a les imatges per canviar entre els temes fosc i clar.

Aiguamarina

La skin per defecte. Si la variable skin no està configurada (o és igual a "teal"), aquest és l’aspecte de tabi:

Lavanda

Per aplicar-la, utilitza skin = "lavender".

Vermell

Canvia a aquesta skin establint skin = "red".

Menta

Una skin dissenyada per 🅿️.

Activa-la amb skin = "mint".

Sakura

Inspirat per la temporada de floració dels cirerers al Japó.

Per habilitar aquesta skin, ajusta skin = "sakura".

Blau

Per activar aquesta aparença, estableix skin = "blue".

Lingot indigo

Indigo pel blau (en el tema clar) i lingot pel daurat (en el tema fosc).

Per activar aquest tema, utilitza skin = "indigo_ingot".

Evangelion

Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).

Monocromàtic

Per aconseguir aquesta aparença, estableix skin = "monochrome".

Taronja (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

skin taronja de baix contrast en mode clar

skin taronja de baix contrast en mode fosc

Per utilitzar-la, estableix skin = "lowcontrast_orange".

Préssec (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

skin préssec de baix contrast en mode clar

skin préssec de baix contrast en mode fosc

Especifica skin = "lowcontrast_peach" per utilitzar aquesta skin.

Rosa (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

Per utilitzar aquests colors, assigna skin = "lowcontrast_pink".

Crea la teva pròpia skin

No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?

Pots guardar la teva nova skin en qualsevol d’aquests dos directoris:

Dins del directori del tema: themes/tabi/sass/skins
Dins del directori principal del teu lloc: sass/skins (necessitaràs crear aquesta carpeta)

Crea un nou arxiu .scss (per exemple, la_teva_skin.scss) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, “teal”):

// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
+

Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable skin perquè coincideixi amb el nom del teu arxiu.

Recorda tenir en compte l’accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: WebAIM: Contrast Checker. El fondo del tema clar és #fff, i el del tema fosc #1f1f1f.

\ No newline at end of file diff --git a/ca/blog/customise-tabi/skins/blue_dark.webp b/ca/blog/customise-tabi/skins/blue_dark.webp new file mode 100644 index 0000000..c8e4d31 Binary files /dev/null and b/ca/blog/customise-tabi/skins/blue_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/blue_light.webp b/ca/blog/customise-tabi/skins/blue_light.webp new file mode 100644 index 0000000..ff49dee Binary files /dev/null and b/ca/blog/customise-tabi/skins/blue_light.webp differ diff --git a/ca/blog/customise-tabi/skins/evangelion_dark.webp b/ca/blog/customise-tabi/skins/evangelion_dark.webp new file mode 100644 index 0000000..2303692 Binary files /dev/null and b/ca/blog/customise-tabi/skins/evangelion_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/evangelion_light.webp b/ca/blog/customise-tabi/skins/evangelion_light.webp new file mode 100644 index 0000000..c3be3a8 Binary files /dev/null and b/ca/blog/customise-tabi/skins/evangelion_light.webp differ diff --git a/ca/blog/customise-tabi/skins/indigo_ingot_dark.webp b/ca/blog/customise-tabi/skins/indigo_ingot_dark.webp new file mode 100644 index 0000000..5e316ad Binary files /dev/null and b/ca/blog/customise-tabi/skins/indigo_ingot_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/indigo_ingot_light.webp b/ca/blog/customise-tabi/skins/indigo_ingot_light.webp new file mode 100644 index 0000000..047b0d1 Binary files /dev/null and b/ca/blog/customise-tabi/skins/indigo_ingot_light.webp differ diff --git a/ca/blog/customise-tabi/skins/lavender_dark.webp b/ca/blog/customise-tabi/skins/lavender_dark.webp new file mode 100644 index 0000000..478bb87 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lavender_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/lavender_light.webp b/ca/blog/customise-tabi/skins/lavender_light.webp new file mode 100644 index 0000000..199e521 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lavender_light.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_orange_dark.webp b/ca/blog/customise-tabi/skins/lowcontrast_orange_dark.webp new file mode 100644 index 0000000..7d71457 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_orange_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_orange_light.webp b/ca/blog/customise-tabi/skins/lowcontrast_orange_light.webp new file mode 100644 index 0000000..f950a1a Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_orange_light.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_peach_dark.webp b/ca/blog/customise-tabi/skins/lowcontrast_peach_dark.webp new file mode 100644 index 0000000..d2d878b Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_peach_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_peach_light.webp b/ca/blog/customise-tabi/skins/lowcontrast_peach_light.webp new file mode 100644 index 0000000..3019b78 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_peach_light.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_pink_dark.webp b/ca/blog/customise-tabi/skins/lowcontrast_pink_dark.webp new file mode 100644 index 0000000..45aedb3 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_pink_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/lowcontrast_pink_light.webp b/ca/blog/customise-tabi/skins/lowcontrast_pink_light.webp new file mode 100644 index 0000000..5121e36 Binary files /dev/null and b/ca/blog/customise-tabi/skins/lowcontrast_pink_light.webp differ diff --git a/ca/blog/customise-tabi/skins/mint_dark.webp b/ca/blog/customise-tabi/skins/mint_dark.webp new file mode 100644 index 0000000..4b56e85 Binary files /dev/null and b/ca/blog/customise-tabi/skins/mint_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/mint_light.webp b/ca/blog/customise-tabi/skins/mint_light.webp new file mode 100644 index 0000000..1fd48f4 Binary files /dev/null and b/ca/blog/customise-tabi/skins/mint_light.webp differ diff --git a/ca/blog/customise-tabi/skins/monochrome_dark.webp b/ca/blog/customise-tabi/skins/monochrome_dark.webp new file mode 100644 index 0000000..484de64 Binary files /dev/null and b/ca/blog/customise-tabi/skins/monochrome_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/monochrome_light.webp b/ca/blog/customise-tabi/skins/monochrome_light.webp new file mode 100644 index 0000000..dfdcf6d Binary files /dev/null and b/ca/blog/customise-tabi/skins/monochrome_light.webp differ diff --git a/ca/blog/customise-tabi/skins/red_dark.webp b/ca/blog/customise-tabi/skins/red_dark.webp new file mode 100644 index 0000000..360c0ba Binary files /dev/null and b/ca/blog/customise-tabi/skins/red_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/red_light.webp b/ca/blog/customise-tabi/skins/red_light.webp new file mode 100644 index 0000000..a628a87 Binary files /dev/null and b/ca/blog/customise-tabi/skins/red_light.webp differ diff --git a/ca/blog/customise-tabi/skins/sakura_dark.webp b/ca/blog/customise-tabi/skins/sakura_dark.webp new file mode 100644 index 0000000..e923d90 Binary files /dev/null and b/ca/blog/customise-tabi/skins/sakura_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/sakura_light.webp b/ca/blog/customise-tabi/skins/sakura_light.webp new file mode 100644 index 0000000..a628a87 Binary files /dev/null and b/ca/blog/customise-tabi/skins/sakura_light.webp differ diff --git a/ca/blog/customise-tabi/skins/teal_dark.webp b/ca/blog/customise-tabi/skins/teal_dark.webp new file mode 100644 index 0000000..496aeb7 Binary files /dev/null and b/ca/blog/customise-tabi/skins/teal_dark.webp differ diff --git a/ca/blog/customise-tabi/skins/teal_light.webp b/ca/blog/customise-tabi/skins/teal_light.webp new file mode 100644 index 0000000..eada00e Binary files /dev/null and b/ca/blog/customise-tabi/skins/teal_light.webp differ diff --git a/ca/blog/customise-tabi/social_cards/blog_customise_tabi.jpg b/ca/blog/customise-tabi/social_cards/blog_customise_tabi.jpg new file mode 100644 index 0000000..c91dc95 Binary files /dev/null and b/ca/blog/customise-tabi/social_cards/blog_customise_tabi.jpg differ diff --git a/ca/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg b/ca/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg new file mode 100644 index 0000000..8703e9d Binary files /dev/null and b/ca/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg differ diff --git a/ca/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg b/ca/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg new file mode 100644 index 0000000..2ddcdcf Binary files /dev/null and b/ca/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg differ diff --git a/ca/blog/es_blog.jpg b/ca/blog/es_blog.jpg new file mode 100644 index 0000000..4c91a6e Binary files /dev/null and b/ca/blog/es_blog.jpg differ diff --git a/ca/blog/faq-languages/index.html b/ca/blog/faq-languages/index.html new file mode 100644 index 0000000..f8ee836 --- /dev/null +++ b/ca/blog/faq-languages/index.html @@ -0,0 +1,18 @@ + +~/tabi • Lost in Translation? Explora les capacitats multilingües de tabi

Lost in Translation? Explora les capacitats multilingües de tabi

12 de set. 2023
5 mins de lectura
Etiquetes:
funcionalitat,
tutorial,
Preguntes Freqüents

Actualitzat el 14 de set. 2025
Veure canvis

tabi simplifica el procés de creació de llocs web multilingües perquè puguis connectar amb una audiència global. En aquesta guia, t’explicarem tot el que necessites saber, des de com configurar la llengua principal en el teu lloc fins a com contribuir amb les teves pròpies traduccions. Comencem!

Preguntes Freqüents

Quines llengües admet tabi?

tabi admet les següents llengües:

Alemany
Àrab
Anglès
Català
Coreà
Espanyol
Estonià
Finès
Francès
Hindi
Italià
Japonès
Odia
Persa
Portuguès (Europeu)
Rus
Ucraïnès
Xinès (Simplificat)

Per a una llista sempre actualitzada de llengües suportades, consulta la carpeta i18n en el repositori de tabi.

Com estableixo la llengua predeterminada del meu lloc?

Pots definir la llengua principal del teu lloc configurant la variable default_language a config.toml.

Per exemple, si vols que la llengua principal sigui el Xinès, simplement afegeix aquesta línia a l’arxiu config.toml:

base_url = "https://welpo.github.io/tabi"
+title = "~/tabi"
+default_language = "zh"
+

Si el valor de default_language coincideix amb el nom d’un fitxer TOML al directori i18n, tots els textos de tabi es traduiran a aquest idioma.

Com gestiona tabi el suport multilingüe?

Zola genera automàticament URLs per a cada llengua que no sigui la predeterminada de la següent manera: {base_url}/{codi_idioma}/{post}.

tabi facilita la navegació entre llengües afegint un commutador de llengua en la barra de navegació (que només es mostra quan hi ha més d’una llengua habilitada).

Si pujes a la barra de navegació, veuràs el commutador de llengua. Si cliques sobre ell, es mostrarà un desplegable amb les llengües disponibles. Si fas clic en el nom d’una llengua, et portarà a la mateixa pàgina en aquesta llengua.

Si una pàgina específica no està disponible en una llengua, tabi mostrarà una pàgina 404 amb el text:

La pàgina que has sol·licitat sembla que no existeix o encara no s’ha traduït al teu idioma. Comprova l’URL per detectar errors o torna a la pàgina d’inici.

Aquest text es mostrarà una vegada per cada llengua activada en el teu lloc. Pots veure aquesta pàgina en acció aquí.

Com activo el suport multilingüe?

Per habilitar el suport per a diverses llengües, necessites configurar la variable languages a config.toml. Per exemple, si vols un lloc amb anglès com a llengua principal que també admeti hindi i espanyol, pots configurar el teu config.toml de la següent manera:

base_url = "https://example.com"
+title = "My Site"
+default_language = "en"
+
+[languages.hi]
+title = "मेरी वेबसाइट"
+
+[languages.es]
+title = "El meu web"
+

En cada secció de llengua pots establir altres variables com taxonomies, description… Consulta la documentació de suport multilingüe de Zola per a més informació.

Què són aquests codis de dues lletres?

Els codis de dues lletres són codis d’idioma ISO 639-1 (o IETF BCP 47, quan cal), que serveixen per identificar idiomes d’una manera estandarditzada.

tabi utilitza aquests codis per permetre la navegació entre idiomes i traduir el tema.

Com personalitzo o reemplaço una cadena de text específica al meu lloc web?

tabi cerca els fitxers de cadenes en el següent ordre. $base_directory és on resideix el teu lloc Zola (allà on està config.toml):

$base_directory + "i18n"
$base_directory + "themes/tabi/i18n"

Per tant, si crees i18n/ca.toml al teu directori base, tabi llegirà les cadenes de text d’aquest fitxer en lloc de les cadenes predeterminades en català. Pots fer això per a qualsevol idioma, suportat o no.

Assegura’t de copiar tot el fitxer per a aquest idioma primer, o el tema utilitzarà l’anglès per les claus que faltin.

Com personalitzo els formats de data per a diferents idiomes?

Pots establir formats de data específics per idioma al teu config.toml utilitzant la matriu date_formats:

date_formats = [
+    { lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
+    { lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
+]
+

Això permet que cada idioma mostri les dates segons les convencions locals. Per exemple, l’espanyol mostrarà «3 de febrero de 2024» mentre que l’alemany mostrarà «3. Februar 2024». Si no es defineix un format específic per a un idioma, tabi utilitzarà la configuració global long_date_format, short_date_format i archive_date_format.

Què passa si falta una traducció o està incompleta?

Si una cadena no es troba en el fitxer d’idioma, tabi utilitzarà a la cadena predeterminada en anglès.

El meu idioma no està suportat. Puc contribuir amb una traducció?

És clar! Sempre estem buscant afegir suport per a més idiomes. Pots contribuir amb una traducció creant una Pull Request al repositori de tabi.

Pots utilitzar el fitxer en català com a base per traduir les cadenes al teu idioma. Assegura’t de mantenir la mateixa estructura.

El fitxer ha de portar el nom del codi de dues lletres del teu idioma i ha de ser un fitxer TOML. Per exemple, si vols afegir suport per al suahili, pots crear un fitxer anomenat sw.toml al directori i18n.

Nota: quan provis la teva traducció, és possible que necessitis reiniciar zola serve per veure els canvis, ja que Zola no sempre detecta canvis en els fitxers TOML.

He trobat un error en una traducció. Com el corregeixo?

Si trobes un error en una traducció, pots crear una issue o una Pull Request al repositori de tabi.

Com actualitzo les traduccions després d’una actualització del tema?

Si no vas personalitzar les traduccions, simplement actualitza el tema.

Si ho vas fer, hauràs d’actualitzar manualment les traduccions. Pots fer-ho copiant les noves cadenes dels fitxers corresponents i enganxant-les al teu fitxer personalitzat.

tabi tradueix el meu contingut?

No. tabi només tradueix les cadenes de text del tema. Hauràs de traduir el teu contingut tu mateix.

Com puc mostrar el codi de l’idioma actual al commutador d’idioma?

Afegeix show_selected_language_code_in_language_switcher = true a la secció [extra] del teu config.toml.

\ No newline at end of file diff --git a/ca/blog/faq-languages/social_cards/blog_faq_languages.jpg b/ca/blog/faq-languages/social_cards/blog_faq_languages.jpg new file mode 100644 index 0000000..1b54ca8 Binary files /dev/null and b/ca/blog/faq-languages/social_cards/blog_faq_languages.jpg differ diff --git a/ca/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg b/ca/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg new file mode 100644 index 0000000..87acc35 Binary files /dev/null and b/ca/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg differ diff --git a/ca/blog/faq-languages/social_cards/es_blog_faq_languages.jpg b/ca/blog/faq-languages/social_cards/es_blog_faq_languages.jpg new file mode 100644 index 0000000..47e5305 Binary files /dev/null and b/ca/blog/faq-languages/social_cards/es_blog_faq_languages.jpg differ diff --git a/ca/blog/index.html b/ca/blog/index.html new file mode 100644 index 0000000..736061f --- /dev/null +++ b/ca/blog/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

08 de novembre 2024

Guia completa sobre sèries

funcionalitat tutorial preguntes freqüents sèries

Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts.

Llegir més →

18 de setembre 2023

Domina la configuració de tabi: guia completa

funcionalitat tutorial preguntes freqüents

Descobreix les múltiples maneres en què pots personalitzar tabi.

Llegir més →

12 de setembre 2023

Lost in Translation? Explora les capacitats multilingües de tabi

funcionalitat tutorial Preguntes Freqüents

Descobreix com tabi t’ajuda a connectar amb una audiència global gràcies a les seves funcions multilingües. Aprèn a canviar la llengua per defecte, afegir més llengües i aportar les teves pròpies traduccions.

Llegir més →

09 d’agost 2023

Personalitza el color de tabi i el tema per defecte

funcionalitat tutorial

Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic.

Llegir més →

14 de juliol 2023

Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes

funcionalitat tutorial

Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus, utterances, Hyvor Talk, o Isso, permetent la interacció i feedback dels lectors.

Llegir més →

← Anterior
1 de 3
Següent →

\ No newline at end of file diff --git a/ca/blog/javascript/index.html b/ca/blog/javascript/index.html new file mode 100644 index 0000000..f3bf3e0 --- /dev/null +++ b/ca/blog/javascript/index.html @@ -0,0 +1,2 @@ + +~/tabi • Sense JavaScript obligatori

Sense JavaScript obligatori

6 de gen. 2023
3 mins de lectura
Etiquetes:
funcionalitat,
tutorial

Actualitzat el 21 de febr. 2025
Veure canvis

Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d’aconseguir amb HTML i CSS.

Opcions habilitades globalment

Cerca. Activada establint un idioma per defecte i build_search_index = true a la secció principal de config.toml. (~23KB de JavaScript)
L’interruptor de mode clar/fosc es pot habilitar configurant theme_switcher = true a la secció [extra] del teu config.toml (~1KB de JavaScript).
Decodificació de correu electrònic (~400 bytes). Per protegir contra robots de correu brossa, pots configurar encode_plaintext_email = true. Si el teu lloc web està en un repositori públic, considera utilitzar el teu email com una cadena codificada en base64¹.

Opcions que es poden sobreescriure de forma jeràrquica

Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de pàgina > secció > config.toml:

Suport de KaTeX. Habilitat configurant katex = true (274 KB). Per renderitzar fórmules sense JS, prova MathML.
Diagrames de Mermaid. Habilitat configurant mermaid = true (~2.5 MB).
Còpia de blocs de codi amb un sol clic. Habilitada configurant copy_button = true. (~700 bytes)
Noms de blocs de codi clicables. S’activa configurant code_block_name_links = true. (~400 bytes)
Filtratge per etiquetes per a graelles de targetes (p. ex. projectes) (~2KB). S’habilita configurant enable_cards_tag_filtering = true.

Per especificar aquestes opcions:

Globalment: Afegeix-les sota la secció [extra] al teu config.toml.
Per a una secció: Afegeix-les sota la secció [extra] al front matter de l’_index.md de la secció.
Per a una publicació individual: Configura les variables corresponents a la secció [extra] del front matter de la publicació.

Opcions que es poden habilitar globalment o per a publicacions individuals

Comentaris. giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant enabled_for_all_posts = true a la secció apropiada del teu config.toml ([extra.giscus], [extra.utterances], [extra.hyvortalk] o [extra.isso]). Per habilitar comentaris en publicacions individuals, configura el nom del sistema = true (per exemple, hyvortalk = true) al front matter del post.

A part d’això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)

Per codificar el teu correu en base64 pots utilitzar eines en línia o, al terminal, executa: printf 'mail@example.com' | base64. ↩

\ No newline at end of file diff --git a/ca/blog/javascript/social_cards/blog_javascript.jpg b/ca/blog/javascript/social_cards/blog_javascript.jpg new file mode 100644 index 0000000..fa5dde9 Binary files /dev/null and b/ca/blog/javascript/social_cards/blog_javascript.jpg differ diff --git a/ca/blog/javascript/social_cards/ca_blog_javascript.jpg b/ca/blog/javascript/social_cards/ca_blog_javascript.jpg new file mode 100644 index 0000000..4ac3b4f Binary files /dev/null and b/ca/blog/javascript/social_cards/ca_blog_javascript.jpg differ diff --git a/ca/blog/javascript/social_cards/es_blog_javascript.jpg b/ca/blog/javascript/social_cards/es_blog_javascript.jpg new file mode 100644 index 0000000..21547c7 Binary files /dev/null and b/ca/blog/javascript/social_cards/es_blog_javascript.jpg differ diff --git a/ca/blog/markdown/index.html b/ca/blog/markdown/index.html new file mode 100644 index 0000000..083194a --- /dev/null +++ b/ca/blog/markdown/index.html @@ -0,0 +1,41 @@ + +~/tabi • Exemples de Markdown

Exemples de Markdown

31 de gen. 2023
2 mins de lectura
Etiquetes:
markdown,
funcionalitat

Actualitzat el 21 de febr. 2025
Veure canvis

$\KaTeX$

$\KaTeX$ és una llibreria ràpida i fàcil d’usar que permet representar notació matemàtica mitjançant la sintaxi LaTeX.

Pots utilitzar $\KaTeX$ en línia embolcallant l’expressió entre $ o entre \$ i \$.

Per exemple, $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ es renderitzarà com: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $

Per mostrar l’expressió en una línia pròpia i centrada, embolcalla-la amb $$ o entre \\[ i \\].

Per exemple, \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] es renderitzarà com: \[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \]

Per activar $\KaTeX$ en una publicació o secció sencera, inclou katex = true dins de la secció [extra] de les metadades. Per exemple:

title = "Provant KaTeX"
+date = 2002-11-30
+
+[extra]
+katex = true
+

Per activar-lo globalment, afeigeix katex = true a la secció [extra] del teu config.toml.

Per obtenir un millor rendiment i seguretat, els fitxers JavaScript, CSS i les tipografies de $\KaTeX$ s’allotgen localment.

Nota: Després d’activar $\KaTeX$, si vols utilitzar el caràcter $ sense renderitzar-lo com a expressió matemàtica, escapa’l amb una barra inversa: \$.

Taula

Aquí tens un exemple de taula¹. Els seus colors canvien en funció del tema actual.
Símbol Element Nombre atòmic
H Hidrogen 1
C Carboni 6
Fe Ferro 26
Au Or 79

Bloc de codi

fn main() {
+    println!("Hola, món!") -> ();
+}
+

Amb numeració de línies

1 use std::collections::HashMap;
+
2 
+
3 #[derive(Debug)]
+
4 struct TwinPeaksCharacter {
+
5     name: String,
+
6     coffee_rating: f32,
+
7     pie_preference: String,
+
8 }
+
9 
+
10 fn main() {
+
11     let mut black_lodge = HashMap::new();
+
12 
+
13     black_lodge.insert("agent", TwinPeaksCharacter {
+
14         name: String::from("Dale Cooper"),
+
15         coffee_rating: 9999.99,
+
16         pie_preference: String::from("Damn Fine Cherry"),
+
17     });
+
18 
+
19     black_lodge.insert("giant", TwinPeaksCharacter {
+
20         name: String::from("The Fireman"),
+
21         coffee_rating: 42.424242,
+
22         pie_preference: String::from("Garmonbozia"),
+
23     });
+
24 
+
25     // Calculate total appreciation of damn fine coffee
+
26     let total_coffee: f32 = black_lodge.values()
+
27         .map(|character| character.coffee_rating)
+
28         .sum();
+
29 
+
30     println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
+
31 }
+

Etiquetes de codi

A Rust, declares una variable mutable amb let mut x = 5;, mentre que a Python, simplement fas x = 5. De manera similar, per imprimir un valor a Rust, utilitzaries println!("Valor: {}", x);, però a Python, és tan senzill com print(f"Valor: {x}").

Quote

«La vida, perquè sigui vida, s’ha de viure a poc a poc…»
— Mercè Rodoreda, La plaça del Diamant

I aquí tens un exemple de nota a peu de pàgina! ↩

\ No newline at end of file diff --git a/ca/blog/markdown/social_cards/blog_markdown.jpg b/ca/blog/markdown/social_cards/blog_markdown.jpg new file mode 100644 index 0000000..98e7a5b Binary files /dev/null and b/ca/blog/markdown/social_cards/blog_markdown.jpg differ diff --git a/ca/blog/markdown/social_cards/ca_blog_markdown.jpg b/ca/blog/markdown/social_cards/ca_blog_markdown.jpg new file mode 100644 index 0000000..a94d2b5 Binary files /dev/null and b/ca/blog/markdown/social_cards/ca_blog_markdown.jpg differ diff --git a/ca/blog/markdown/social_cards/es_blog_markdown.jpg b/ca/blog/markdown/social_cards/es_blog_markdown.jpg new file mode 100644 index 0000000..1034677 Binary files /dev/null and b/ca/blog/markdown/social_cards/es_blog_markdown.jpg differ diff --git a/ca/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp b/ca/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp new file mode 100644 index 0000000..bc6bc97 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/browser_theme_color_light.webp b/ca/blog/mastering-tabi-settings/img/browser_theme_color_light.webp new file mode 100644 index 0000000..1dea675 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/browser_theme_color_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/commit_history_dark.webp b/ca/blog/mastering-tabi-settings/img/commit_history_dark.webp new file mode 100644 index 0000000..1be6676 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/commit_history_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/commit_history_light.webp b/ca/blog/mastering-tabi-settings/img/commit_history_light.webp new file mode 100644 index 0000000..f904fdb Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/commit_history_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp b/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp new file mode 100644 index 0000000..ac24387 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp b/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp new file mode 100644 index 0000000..82aeb04 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/copyright_dark.webp b/ca/blog/mastering-tabi-settings/img/copyright_dark.webp new file mode 100644 index 0000000..ee383f6 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/copyright_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/copyright_light.webp b/ca/blog/mastering-tabi-settings/img/copyright_light.webp new file mode 100644 index 0000000..6a4af57 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/copyright_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/external_link_dark.webp b/ca/blog/mastering-tabi-settings/img/external_link_dark.webp new file mode 100644 index 0000000..61a6641 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/external_link_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/external_link_light.webp b/ca/blog/mastering-tabi-settings/img/external_link_light.webp new file mode 100644 index 0000000..16d03a1 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/external_link_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp b/ca/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp new file mode 100644 index 0000000..bcbb67d Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp b/ca/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp new file mode 100644 index 0000000..39f675f Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/header_dark.webp b/ca/blog/mastering-tabi-settings/img/header_dark.webp new file mode 100644 index 0000000..cc67ca3 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/header_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/header_light.webp b/ca/blog/mastering-tabi-settings/img/header_light.webp new file mode 100644 index 0000000..518c74b Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/header_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp b/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp new file mode 100644 index 0000000..4790470 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp b/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp new file mode 100644 index 0000000..4fee0d6 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/pinned_post_dark.webp b/ca/blog/mastering-tabi-settings/img/pinned_post_dark.webp new file mode 100644 index 0000000..6111f62 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/pinned_post_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/pinned_post_light.webp b/ca/blog/mastering-tabi-settings/img/pinned_post_light.webp new file mode 100644 index 0000000..ddddc44 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/pinned_post_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp b/ca/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp new file mode 100644 index 0000000..a7c9fd4 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp b/ca/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp new file mode 100644 index 0000000..42c9c36 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp b/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp new file mode 100644 index 0000000..bf83faa Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp b/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp new file mode 100644 index 0000000..900c01f Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/sans-serif.webp b/ca/blog/mastering-tabi-settings/img/sans-serif.webp new file mode 100644 index 0000000..9688a79 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/sans-serif.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/see_changes_dark.webp b/ca/blog/mastering-tabi-settings/img/see_changes_dark.webp new file mode 100644 index 0000000..ad7b527 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/see_changes_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/see_changes_light.webp b/ca/blog/mastering-tabi-settings/img/see_changes_light.webp new file mode 100644 index 0000000..986c5e1 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/see_changes_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/serif.webp b/ca/blog/mastering-tabi-settings/img/serif.webp new file mode 100644 index 0000000..93a276c Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/serif.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp b/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp new file mode 100644 index 0000000..177c069 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp b/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp new file mode 100644 index 0000000..74981c7 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/site_source_dark.webp b/ca/blog/mastering-tabi-settings/img/site_source_dark.webp new file mode 100644 index 0000000..28f445f Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/site_source_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/site_source_light.webp b/ca/blog/mastering-tabi-settings/img/site_source_light.webp new file mode 100644 index 0000000..13b9efa Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/site_source_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/webmention_dark.webp b/ca/blog/mastering-tabi-settings/img/webmention_dark.webp new file mode 100644 index 0000000..2d4290f Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/webmention_dark.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/webmention_light.webp b/ca/blog/mastering-tabi-settings/img/webmention_light.webp new file mode 100644 index 0000000..f555252 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/webmention_light.webp differ diff --git a/ca/blog/mastering-tabi-settings/img/with_social_media_card.webp b/ca/blog/mastering-tabi-settings/img/with_social_media_card.webp new file mode 100644 index 0000000..9be353a Binary files /dev/null and b/ca/blog/mastering-tabi-settings/img/with_social_media_card.webp differ diff --git a/ca/blog/mastering-tabi-settings/index.html b/ca/blog/mastering-tabi-settings/index.html new file mode 100644 index 0000000..52c3d0b --- /dev/null +++ b/ca/blog/mastering-tabi-settings/index.html @@ -0,0 +1,140 @@ + +~/tabi • Domina la configuració de tabi: guia completa

Domina la configuració de tabi: guia completa

18 de set. 2023
32 mins de lectura
Etiquetes:
funcionalitat,
tutorial,
preguntes freqüents

Actualitzat el 7 d’ag. 2025
Veure canvis

Aquesta és la guia completa sobre la configuració a tabi. Si tens alguna pregunta, pots obrir un issue a GitHub o iniciar una discussió.

Taula de continguts

Jerarquia de configuració

tabi té una jerarquia que permet personalitzar el teu lloc a diferents nivells. La jerarquia (de menor a major prioritat) és la següent:

Configuracions globals: Aquestes són les configuracions que s’apliquen a tot el teu lloc. Es configuren a config.toml.
Configuracions de secció: Aquestes són les configuracions que s’apliquen a una secció del teu lloc (per exemple, /blog o /projects). Es configuren a la metainformació de l’arxiu _index.md de la secció.
Configuració de la pàgina «pare»: Per a pàgines anidades (pàgines dins de pàgines), aquestes són les configuracions de la pàgina que les conté.
Configuracions de pàgina: Aquestes són les configuracions que s’apliquen a una sola pàgina. Es configuren a la metainformació de la pàgina.

En tots els casos, les opcions de tabi es configuren a la secció [extra].

Per a les configuracions que segueixen aquesta jerarquia, el valor establert a una pàgina reemplaça el valor d’una secció, que al seu torn reemplaça el valor global. En resum: com més específica sigui la configuració, més prioritat tindrà, o pàgina > pàgina pare/secció > config.toml.

Cerca

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	✅

tabi permet cerca local accessible i multilingüe amb Elasticlunr. Per activar-la, necessites:

Establir un default_language a config.toml.
Establir build_search_index = true.
Opcionalment, configurar la secció [search].

Per exemple:

base_url = "https://example.com"
+default_language = "en"
+build_search_index = true
+
+[search]
+index_format = "elasticlunr_json" # O el menys eficient "elasticlunr_javascript".
+include_title = true
+include_description = true
+include_path = true
+include_content = true
+

Nota: per suport de cerca en Xinès/Japonès, necessites utilitzar una build personalitzada de Zola. Addicionalment, actualment no hi ha suport per a la cerca en català.

Consideracions per a usuaris de Zola 0.17.X

Zola 0.17.X no proporciona accés a la variable search.index_format (informe del bug). En utilitzar tabi, s’assumeix l’ús de l’índex JSON, que és més eficient. No obstant això, a causa d’un altre bug solucionat en 0.18.0, l’índex JSON per a llocs multilingües no es genera correctament.

Els usuaris amb versions de Zola anteriors a 0.18.0 que vulguin utilitzar l’índex JavaScript necessiten establir la variable index_format a dos llocs:

[search]
+index_format = "elasticlunr_javascript"
+
+[extra]
+index_format = "elasticlunr_javascript"
+

Això assegura que tabi carregui els arxius correctes. Recomanem actualitzar a Zola 0.18.0 o posterior per a una funcionalitat òptima.

Detalls d’implementació

Per a detalls tècnics sobre la implementació de la cerca, incloent quan es carrega l’índex, característiques d’accessibilitat i altres detalls, consulta el Pull Request #250.

Suport multilingüe

tabi ofereix suport multilingüe complet per al teu lloc Zola, des de configurar un idioma predeterminat fins a afegir tots els que vulguis. Consulta les preguntes freqüents sobre idiomes per a més informació.

Aparença

Pàgina principal

La pàgina principal d’aquesta demo té una capçalera amb una imatge, un títol i una descripció:

Capçalera

Per configurar la imatge i el títol, pots utilitzar la variable header al front matter de l’arxiu _index.md de la secció. Per exemple:

[extra]
+header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" }
+

La descripció és contingut Markdown normal, escrit fora del front matter.

Llistant publicacions recents

Per mostrar publicacions a la pàgina principal, primer has de decidir d’on es serviran: de la ruta arrel (/) o d’un subdirectori (per exemple, /blog).

Opció A: Servir publicacions des de la ruta arrel (/)

Configura paginate_by al front matter del teu arxiu content/_index.md:

title = "Últimes publicacions"
+sort_by = "date"
+paginate_by = 5  # Mostra 5 publicacions per pàgina.
+
+[extra]
+header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" }
+

NOTE

La configuració paginate_by va al front matter principal, no a la secció [extra].

Opció B: Servir publicacions des d’un subdirectori (per exemple, /blog)

Utilitza section_path a la secció [extra] del teu arxiu content/_index.md:

title = "Últimes publicacions"
+sort_by = "date"
+# No configuris `paginate_by` aquí.
+
+[extra]
+header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" }
+section_path = "blog/_index.md"  # On trobar les teves publicacions.
+max_posts = 5  # Mostra fins a 5 publicacions a la pàgina principal.
+

ALERTA

No configuris paginate_by i section_path alhora. Aquestes configuracions són mútuament excloents i usar ambdues pot fer que no es mostrin publicacions.

Notes addicionals:

El title al front matter estableix el títol que apareix sobre les publicacions.
Utilitza la ruta completa a l’arxiu _index.md de la secció per a section_path. Usar section_path = "blog/" no funcionarà.

Fixar entrades

Pots fixar entrades per mantenir-les a la part superior de la pàgina principal. En aquesta demo, aquesta entrada està fixada, així que apareix primera amb una icona i etiqueta de “fixada”:

Les entrades fixades es mostren primer, mantenint el seu ordre relatiu segons el sort_by de la secció, seguides per les entrades regulars.

Per fixar una entrada, afegeix el següent al seu front matter:

[extra]
+pinned = true
+

INFO

Aquesta configuració només afecta les pàgines principals del lloc (com /, /es/, /fr/). Altres seccions com blog/, tags/ o archive/ mostren les publicacions en el seu ordre habitual.

{{ admonition(type=“warning”, text=‘Quan s’utilitza la paginació (paginate_by), les entrades fixades poden aparèixer dues vegades: una vegada a la part superior de la primera pàgina, i una altra en la seva posició cronològica normal en pàgines posteriors.’) }}

Mostrar la data dels articles al llistat

Per defecte, quan es llisten els articles, es mostra la data de creació. Pots configurar quina(es) data(es) mostrar utilitzant l’opció post_listing_date. Configuracions disponibles:

date: Mostra només la data de publicació original de l’article (opció per defecte).
updated: Mostra només la data de l’última actualització de l’article. Si no hi ha data d’actualització, es mostra la data de publicació original.
both: Mostra tant la data de publicació original com la data de l’última actualització.

TIP

Aquesta configuració segueix la jerarquia: pots establir un valor global a config.toml o canviar-lo per a seccions específiques al seu arxiu _index.md. En ambdós casos, afegeix-lo a la secció [extra].

Llistat de Projectes

Pots mostrar una selecció de projectes a la teva pàgina principal. Per fer això, primer necessitaràs configurar el directori projects.

Un cop fet això, configura la ruta als projectes a la secció [extra] del teu fitxer _index.md:

[extra]
+projects_path = "projects/_index.md"
+

Això mostrarà els 3 projectes de major prioritat (amb menor pes; el mateix ordre que a Projectes). Per mostrar més o menys projectes, configura max_projects a [extra].

Per defecte, la secció de projectes es mostrarà a la part inferior de la pàgina principal, sota les publicacions. Si prefereixes mostrar-la a la part superior, configura show_projects_first = true.

Commutador de mode clar i fosc

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	✅

El commutador de mode clar i fosc (la icona de lluna/sol a la cantonada superior dreta) es pot habilitar configurant theme_switcher = true a config.toml.

Mode predeterminat (clar/fosc)

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

El mode predeterminat es pot especificar amb la variable default_theme, que accepta "dark" o "light". Si no s’especifica, el mode predeterminat és el mode del sistema.

Skin personalitzada

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Les skins («pells») de tabi canvien el color principal del lloc web. Pots configurar la skin a config.toml amb skin = "nom_de_la_skin. Per exemple, skin = "lavender" es veu així (clica per canviar entre mode clar i fosc):

Explora les skins disponibles i aprèn com crear la teva pròpia consultant la documentació.

Font sans serif (pal sec)

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

tabi utilitza una font serif per als paràgrafs dels articles (la que estàs veient ara). Pots canviar a una font sans-serif (la que veus als encapçalaments/menú) a tot el teu lloc configurant override_serif_with_sans = true a config.toml.

Fes clic a la imatge a continuació per comparar les fonts:

Indicador d’enllaços externs

Pàgina	Secció	`config.toml`	Segueix Jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

INFO

Requereix Zola 0.20.0 o posterior.

Si vols afegir una icona als enllaços externs, configura la secció [markdown] (no [extra]) al teu config.toml:

[markdown]
+external_links_class = "external"
+

Això afegirà una petita icona al costat dels enllaços externs:

Estils CSS personalitzats

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	❌	✅	❌	❌

Pots carregar estils CSS personalitzats per a tot el lloc web o en pàgines específiques utilitzant stylesheets, que accepta una llista de rutes cap a arxius CSS. Per exemple:

stylesheets = ["css/custom.css", "css/another.css"]
+

Color del tema del navegador

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

El color del tema del navegador és el color que apareix a la barra de pestanyes del navegador:

pestanyes amb un tema de navegador de color

Pots establir-ho a config.toml com a browser_theme_color = "#087e96". Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb browser_theme_color = ["#ffffff", "#000000"]. El primer color és per al mode clar, el segon per al fosc.

Aquesta variable accepta qualsevol color CSS vàlid, així que pots utilitzar paraules clau (per exemple, blue), codis hexadecimals (per exemple, #087e96) o valors RGB/HSL (per exemple, rgb(8, 126, 150)).

Etiquetes compactes

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per defecte, la pàgina d’etiquetes mostra les etiquetes com:

NomEtiqueta — n entrada[es]

Establir compact_tags = true les mostrarà com:

NomEtiqueta ⁿ

Ordre de les etiquetes

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per defecte, la pàgina d’etiquetes ordena les etiquetes alfabèticament, donada la configuració predeterminada de tag_sorting = "name". Si configures tag_sorting = "frequency", s’ordenaran segons el nombre de publicacions (de més a menys).

Sèries

Per a una explicació detallada, consulta la documentació de sèries.

Enllaç per saltar a les publicacions

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	✅	✅	✅	❌

Per defecte, apareix automàticament un enllaç “Salta a les publicacions” al costat del títol de la sèrie quan una sèrie té un contingut de més de 2000 caràcters:

enllaç per saltar a les publicacions de la sèrie

Estableix show_jump_to_posts = true per forçar l’activació de la funció i show_jump_to_posts = false per desactivar-la.

Indexació de pàgines de sèries

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	✅	✅	✅	❌

Per defecte, les pàgines de sèries s’indexen (usant una indexació basada en 1) segons el sort_by de la secció de sèries.

Estableix post_listing_index_reversed = true per invertir aquest índex.

Integració amb repositoris Git

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❓	❓	✅	❓	❌

❓: show_remote_source sí que segueix la jerarquia i es pot configurar en una pàgina, secció o de manera global. La resta de les configuracions només es poden establir a config.toml.

Aquestes configuracions et permeten vincular el teu lloc web tabi amb un repositori públic de Git a GitHub, GitLab, Gitea o Codeberg. Exemples de configuració:

remote_repository_url = "https://github.com/welpo/tabi"
+remote_repository_git_platform = "auto"
+remote_repository_branch = "main"
+show_remote_changes = true
+show_remote_source = true
+

Això habilita dues funcions:

show_remote_source = true afegeix un enllaç al codi font del teu lloc web (el teu remote_repository_url) que es mostrarà al peu de pàgina:

Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'

show_remote_changes = true afegeix un enllaç “Veure canvis ↗” a l’historial de commits de l’article actualitzat, al costat de la data de l’última actualització ¹:

Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'

En clicar aquest enllaç, seràs dirigit a l’historial de commits de l’article, on podràs veure els canvis realitzats en ell:

Pàgines

Projectes

tabi té una plantilla integrada per a projectes. Per habilitar-la, pots crear un directori a content/projects/. Allà, pots crear un fitxer _index.md amb el següent contingut al bloc de metadades:

title = "Projectes"
+sort_by = "weight"
+template = "cards.html"
+insert_anchor_links = "left"
+
+[extra]
+show_reading_time = false
+quick_navigation_buttons = true
+

title és el títol de la pàgina.
sort_by determina com s’ordenen els projectes. Pots ordenar per “date”, “update_date”, “title”, “title_bytes”, “weight”, “slug” o “none”.
template = "cards.html" estableix la plantilla per renderitzar la pàgina de projectes.
insert_anchor_links = "left" afegeix enllaços àncora als encapçalaments.
show_reading_time = false amaga el temps estimat de lectura.
quick_navigation_buttons = true mostra els botons de navegació ràpida.

Al costat del fitxer _index.md, pots crear un fitxer per a cada projecte. Per exemple, aquest és el bloc de metadades per a la pàgina del projecte tabi:

title = "tabi"
+description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe."
+weight = 1
+
+[extra]
+local_image = "img/tabi.webp"
+

title és el títol del projecte.
description és la descripció del projecte.
weight determina l’ordre en què es mostren els projectes. Com menor sigui el pes, més amunt apareixerà el projecte.
local_image és la ruta de la imatge del projecte. Aquesta imatge es mostra a la pàgina de projectes.

Quan un usuari faci clic a la imatge o al títol d’un projecte, serà portat a la pàgina del projecte. Si prefereixes que els usuaris vagin a un enllaç extern, pots establir link_to = "https://example.com" a la secció [extra] del fitxer .md del projecte.

La pàgina del projecte individual es renderitza amb la plantilla predeterminada, tret que estableixis una altra, per exemple, template = "info-page.html".

Filtrar projectes

Si afegeixes etiquetes als teus projectes, veuràs un filtre d’etiquetes:

Pàgina de projectes amb filtre d'etiquetes

El sistema de filtratge d’etiquetes utilitza millora progressiva:

Sense JavaScript: Les etiquetes enllacen directament a pàgines d’etiquetes dedicades (per exemple, /tags/nom-de-l-etiqueta).
Amb JavaScript: Filtratge instantani, sincronització d’URL (#nom-etiqueta) i navegació amb el teclat.

Per desactivar aquesta funció, estableix enable_cards_tag_filtering = false a la secció [extra] del fitxer projects/_index.md o a config.toml.

TIP

Per filtrar projectes per etiquetes, necessites establir etiquetes a la front matter de cada projecte. Per exemple:

title = "nom del projecte"
+weight = 40
+
+[taxonomies]
+tags = ["etiqueta", "etiqueta 2", "tercera etiqueta"]
+

Arxiu

Afegir una pàgina d’arxiu és similar a afegir una pàgina de projectes. Pots crear un directori a content/archive/. Allà, pots crear un fitxer _index.md amb el següent encapçalament:

title = "Arxiu"
+template = "archive.html"
+

Per defecte, l’arxiu llistarà les publicacions situades a blog/. Per personalitzar això, pots modificar la secció [extra] de l’arxiu _index.md:

Per a un sol directori: Estableix section_path = "directori/" per llistar publicacions d’un directori específic. Assegura’t d’incloure la barra inclinada al final.
Per a múltiples directoris: Si vols agregar publicacions de diversos directoris, especifica la llista a section_path. Per exemple:
```
[extra]
+section_path = ["blog/", "notes/", "camí-tres/"]
+
```

L’arxiu mostra les publicacions en ordre cronològic invers (les més recents primer). Pots invertir aquest ordre establint archive_reverse = true a la secció [extra]:

[extra]
+archive_reverse = true  # mostra les publicacions més antigues primer
+

nota

La pàgina d’arxiu només llistarà publicacions que tinguin data al seu encapçalament.

Etiquetes

tabi té suport integrat per a etiquetes. Per habilitar-les, simplement afegeix la taxonomia al teu config.toml:

taxonomies = [{name = "tags", feed = true}]
+

Després, pots afegir etiquetes a les teves publicacions afegint-les a l’array tags en el bloc de metadades de la teva publicació. Per exemple:

title = "Els molins de vent de la meva vida: reflexions d'un escuder"
+date = 1605-01-16
+description = "El meu viatge al costat de Don Quixot, enfrontant-me a gegants imaginats i descobrint les veritables batalles de la vida."
+
+[taxonomies]
+tags = ["personal", "reflexions"]
+

Pàgina sobre

Si vols tenir una pàgina que no sigui un article, per exemple per a una secció “Sobre”, “Contacte” o “Drets d’autor”, pots utilitzar la plantilla info-page.html.

Primer, crea un directori dins de content/ amb el nom que prefereixis. Per exemple, content/pages/. Després, crea un fitxer _index.md dins d’aquest directori. El fitxer hauria de ser així:

+++
+render = false
+insert_anchor_links = "left"
++++
+

render = false indica a Zola que no renderitzi la secció.
insert_anchor_links = "left" afegeix enllaços àncora als encapçalaments. Això és opcional.

Dins del directori, pots crear qualsevol quantitat de fitxers .md.

En aquesta demo, la pàgina Sobre mi utilitza la plantilla info-page.html. El bloc de metadades és el següent:

title = "Sobre mi"
+template = "info-page.html"
+path = "about"
+

Fixa’t com s’estableix path = "about". Zola situarà la pàgina a $base_url/about/. Si vols que la pàgina estigui disponible a /contacte/, hauries d’establir path = "contacte".

La plantilla info-page.html també es pot utilitzar per crear landing pages a la ruta arrel ("/"). Per fer-ho, l’arxiu content/_index.md hauria de ser així:

+++
+title = "Títol de la pàgina"
+template = "info-page.html"
++++
+
+Contingut amb Markdown.
+

SEO

tabi s’encarrega de la majoria de tasques de SEO per a tu (com ara les etiquetes del protocol Open Graph, descripció, paleta de colors…), però hi ha certes configuracions que pots personalitzar.

Favicon

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

El favicon és la petita imatge que es mostra a la pestanya del navegador. Pots establir-la a config.toml amb favicon = "img/favicon.png".

Favicon d’emoji

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

També pots establir un emoji com a favicon amb favicon_emoji. Per exemple, favicon_emoji = "👾".

Nota: Alguns navegadors no suporten favicons d’emoji. Consulta la taula de compatibilitat a caniuse.

URL canònica

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	❌	❌

L’URL canònica és una manera d’indicar als motors de cerca quina és l’URL preferida per al contingut del teu lloc web. Això és útil per al SEO i per evitar problemes de contingut duplicat.

Per defecte, l’URL canònica és l’URL de la pàgina on et trobes. No obstant això, pots canviar això configurant canonical_url al front matter de la teva pàgina o secció.

Si tens un lloc amb una estructura idèntica i contingut coincident, pots configurar base_canonical_url al teu config.toml. L’URL canònica es crearà substituint el $base_url de l’URL actual amb el $base_canonical_url que establisquis.

Per exemple, si configures base_canonical_url = "https://example.com", l’URL canònica de la pàgina $base_url/blog/post1 serà https://example.com/blog/post1. Això és útil si tens un lloc amb diversos dominis que comparteixen el mateix contingut.

Nota: per assegurar-te que l’URL canònica sigui correcta, probablement serà millor configurar canonical_url individualment per a cada pàgina.

Targetes per a xarxes socials

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Les targetes per a xarxes socials són les imatges que es mostren quan comparteixes un enllaç a les xarxes socials:

Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials

Pots establir la imatge per a xarxes socials amb social_media_card = "img/social_media_card.png".

Pots especificar rutes tant relatives com absolutes.

Ruta relativa: Posiciona la imatge a la mateixa carpeta que la teva entrada de blog i especifica el seu nom. Per exemple, social_media_card = "relative_image.png".
Ruta absoluta: Posiciona la imatge en una carpeta específica i especifica la ruta des de l’arrel. Per exemple, social_media_card = "/img/absolute_image.png".

Si ambdues rutes, relativa i absoluta, són vàlides, la ruta relativa tindrà prioritat.

Ja que segueix la jerarquia, si no està configurat en una pàgina, però sí ho està en una secció, s’utilitzarà la imatge de la secció. Si no està configurat en una pàgina o secció, però sí en config.toml, s’utilitzarà la imatge global.

CONSELL

Automatitza la seva creació amb un script: Automatitzant les vistes prèvies dels enllaços amb Zola.

Creador del fedivers

Pàgina	Secció	`config.toml`	Segueix jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Pots mostrar el perfil del fedivers de l’autor en les previsualitzacions d’enllaços de Mastodon configurant la variable fediverse_creator al teu config.toml. Per exemple, per a @username@example.com, fes servir:

fediverse_creator = { handle = "username", domain = "example.com" }
+

Navegació

Barra de navegació

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

La barra de navegació és la franja a la part superior de la pàgina que conté el títol del lloc i el menú de navegació. Pots personalitzar els elements que apareixen configurant menu en config.toml.

Soporta links relatius per a pàgines internes i links absoluts per a enllaços externs. Per exemple:

menu = [
+    { name = "blog", url = "blog", trailing_slash = true },
+    { name = "arxiu", url = "archive", trailing_slash = true },
+    { name = "etiquetes", url = "tags", trailing_slash = true },
+    { name = "projectes", url = "projects", trailing_slash = true },
+    { name = "sobre nosaltres", url = "about", trailing_slash = true },
+    { name = "github", url = "https://github.com/welpo/tabi", trailing_slash = false },
+]
+

Botons de navegació ràpida

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Els botons de navegació ràpida són els botons que apareixen a la part inferior dreta de la pantalla. Hauries de veure’ls en aquesta pàgina, si no estàs en un dispositiu mòbil. Es veuen així:

Per activar-los, estableix quick_navigation_buttons = true.

Taula de continguts

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Activa l’índex de continguts just sota del títol i metadades de l’article amb toc = true.

Per saber més sobre com personalitzar-ho, consulta la documentació sobre la Taula de continguts.

Enllaços als articles anterior i següent

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Mostra enllaços als articles anterior i següent a la part inferior dels posts. Es veu així:

Per activar aquesta funció, estableix show_previous_next_article_links = true i assegura’t que la secció té un valor sort_by (per exemple sort_by = "date").

Per defecte, els articles següents estaran al costat esquerre de la pàgina i els articles anteriors al costat dret. Per invertir l’ordre (articles següents al costat dret i articles anteriors al costat esquerre), configura invert_previous_next_article_links = true.

Per defecte, aquesta secció de navegació tindrà l’amplada completa del lloc (igual que la barra de navegació de la part superior). Per fer-la més estreta, coincidint amb l’amplada de l’article, configura previous_next_article_links_full_width = false.

Totes aquestes configuracions segueixen la jerarquia.

Enllaços de retorn a les notes a peu de pàgina

ADVERTÈNCIA DE DEPRECACIÓ

Zola v0.19.0 i posterior pot fer això de forma nativa. Estableix bottom_footnotes = true a la secció [markdown] de la teva configuració.

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	✅

Establir footnote_backlinks = true afegirà enllaços de retorn a les notes a peu de pàgina de les teves publicacions, com aquest:

Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada al punt del text on es va fer referència a la nota a peu de pàgina.

Usabilitat

Botó de copiar en blocs de codi

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	✅

Establir copy_button = true afegirà un petit botó de copiar a la part superior dreta dels blocs de codi, com aquest:

Nom del bloc de codi clicable

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	✅

En establir code_block_name_links = true s’habiliten els enllaços clicables als noms dels blocs de codi. Consulta la documentació per veure exemples i ús.

Forçar blocs de codi d’esquerra a dreta

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Per defecte, els blocs de codi es renderitzen d’esquerra a dreta, independentment de la direcció general del text. Estableix force_codeblock_ltr = false per permetre que els blocs de codi segueixin la direcció del document. Útil per a idiomes de dreta a esquerra que necessiten blocs de codi de dreta a esquerra.

Suport per a KaTeX

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	✅

KaTeX és una biblioteca JavaScript ràpida i fàcil d’usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb katex = true. Mira com es veu en tabi aquí.

Suport per a Mermaid

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	✅

Mermaid és una eina de diagramació i gràfics basada en JavaScript. Pots activar-la amb mermaid = true.

Per defecte, la biblioteca Mermaid es serveix localment. Si prefereixes utilitzar un CDN, estableix serve_local_mermaid = false a config.toml. L’ús d’un CDN servirà la versió més recent de Mermaid; l’opció local servirà la versió inclosa amb tabi.

Consulta la documentació de Mermaid per a instruccions d’ús i exemples.

Subconjunt de tipus de lletra personalitzat

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d’aquest subconjunt, o desactivar-lo completament si no estàs fent servir un tipus de lletra personalitzat al teu tema.

Pots crear un subconjunt personalitzat adaptat al teu lloc, guardar-lo com a static/custom_subset.css, i fer que es carregui amb custom_subset = true.

Per desactivar el subconjunt, utilitza enable_subset = false.

Per obtenir més informació, incloent instruccions sobre com crear un subconjunt personalitzat, consulta la documentació.

Contingut complet al feed

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per defecte, el feed Atom només conté el resum o descripció de les teves publicacions. Pots incloure el contingut complet de les publicacions establint full_content_in_feed = true a config.toml.

Amagar contingut del feed

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Pots controlar com apareix el contingut als feeds utilitzant dues configuracions:

hide_from_feed = true: Amaga el contingut de tots els feeds (feed principal, feeds de secció i feeds d’etiquetes)
hide_from_main_feed = true: Amaga el contingut només del feed principal mentre el manté visible als feeds de secció i d’etiquetes

Comentaris

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	❌	✅	❌	✅

Per activar els comentaris en una pàgina, establert el nom del sistema com a true al front matter. Per exemple, utterances = true.

Si vols activar els comentaris de forma global, pots fer-ho establint enabled_for_all_posts = true a la secció apropiada del teu config.toml (per exemple, a [extra.giscus]).

Si has activat un sistema de forma global i vols desactivar-lo per a una pàgina específica, pots fer-ho establint el nom del sistema com a false al front matter. Per exemple, utterances = false.

Llegeix la documentació per a més informació sobre els sistemes disponibles i la seva configuració.

Botons d’iine

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

tabi permet botons d’iine per mostrar apreciació anònima pel teu contingut. Aquests botons centrats en la privadesa funcionen sense JavaScript i no rastegen usuaris.

Per activar els botons iine globalment:

[extra]
+iine = true
+

Pots personalitzar la icona usada als botons (segueix la jerarquia):

[extra]
+iine_icon = "thumbs_up"  # Opcions: "heart", "thumbs_up", "upvote", o qualsevol emoji
+

Per a llocs multilingües, pots unificar els recomptes de likes entre versions en diferents idiomes del mateix contingut (configuració només de config; valor per defecte és true):

[extra]
+iine_unified_languages = true  # Els likes a /ca/blog/hello/ compten cap a /blog/hello/
+

Anàlisi web

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	✅

tabi ofereix suport per a 3 sistemes d’anàlisi web que respecten la privacitat: Plausible, GoatCounter i Umami.

Pots configurar-los en la secció [extra.analytics] del teu arxiu config.toml.

service: el servei a utilitzar. Les opcions disponibles són "goatcounter", "umami", i "plausible".
id: l’identificador únic per al teu servei d’anàlisi. Això varia segons el servei:
- Per a GoatCounter, és el codi triat durant el registre. Instàncies auto-allotjades de GoatCounter no requereixen aquest camp.
- Per a Umami, és l’ID del lloc web.
- Per a Plausible, és el nom de domini.
self_hosted_url: Opcional. Utilitza aquest camp per especificar l’URL si tens una instància auto-allotjada. L’URL base variarà segons la teva configuració particular. Alguns exemples:
- Per a GoatCounter: "https://stats.example.com"
- Per a Umami: "https://umami.example.com"
- Per a Plausible: "https://plausible.example.com"
do_not_track: (només per a Umami) opcional. Quan s’estableix com a true, es desactiva el seguiment per als usuaris els navegadors dels quals envien una capçalera “Do Not Track”.

Un exemple de configuració per a GoatCounter no auto-allotjada seria:

[extra.analytics]
+service = "goatcounter"
+id = "tabi"
+self_hosted_url = ""
+

Icones al peu de pàgina

Icones de xarxes socials

Pàgina	Secció	`config.toml`	Respecta jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Pots afegir icones de xarxes socials al peu de pàgina amb socials, que accepta una llista d’objectes de xarxes socials. Per exemple:

socials = [
+    { name = "github", url = "https://github.com/welpo/", icon = "github" },
+    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
+    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
+    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
+    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
+]
+

Per veure una llista de totes les icones integrades, fes un cop d’ull al directori static/social_icons a GitHub.

Trobes a faltar algun icona? Si creus que seria una bona addició a tabi, no dubtis en obrir un issue o enviar una pull request (exemple).

Per utilitzar una icona personalitzada, pots afegir-la al directori static/social_icons del teu lloc web. Per exemple, si afegeixes custom.svg, la pots referenciar així:

{ name = "custom", url = "https://example.com", icon = "custom" }
+

NOTA

Tots els enllaços a xarxes socials inclouen l’atribut rel='me'. Això ajuda els motors de cerca i serveis web a verificar que les comptes de xarxes socials et pertanyen.

Icona de feed

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Pots afegir un enllaç al teu feed RSS/Atom al peu de pàgina amb feed_icon = true.

Nota pels usuaris de Zola 0.19.X: quan hi ha dos noms de fitxer a feed_filenames, només s’enllaçarà el primer al peu de pàgina.

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Pots afegir un menú al peu de pàgina amb footer_menu, que accepta una llista d’elements de menú. Per exemple:

footer_menu = [
+    {url = "about", name = "about", trailing_slash = true},
+    {url = "privacy", name = "privacy", trailing_slash = true},
+    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
+    {url = "https://example.com", name = "external link", trailing_slash = true},
+]
+

Copyright

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per afegir una menció sobre els drets d’autor al teu lloc web, configura copyright:

copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
+

$TITLE serà reemplaçat per la variable title configurada a config.toml
$CURRENT_YEAR serà reemplaçat per l’any actual
$AUTHOR serà reemplaçat per la variable author
$SEPARATOR serà reemplaçat per la variable separator.

El text es processarà en Markdown. Per exemple, la configuració d’adalt:

Si tens un lloc multilingüe i vols establir diferents notificacions de drets d’autor per a diferents idiomes, afegeix la traducció corresponent a copyright_translations.{codi_d'idioma} per a cada idioma que vulguis donar suport. El codi de llengua ha de coincidir amb el codi de llengua de tabi. Per exemple, pel castellà:

copyright_translations.es = "© $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/)."
+

Metadades

Mostrar autoria

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Per mostrar l’autoria d’un article, estableix show_author = true.

Això mostrarà els autors establerts a la variable authors = [] al front matter del post. Si aquest camp no està configurat, mostrarà l’autor de config.toml (author = "").

Temps de lectura

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Pots activar o desactivar el temps estimat de lectura d’un article amb show_reading_time. Si el configures com a true, apareixerà a les metadades de l’article, com això:

Com que segueix la jerarquia, pots activar-lo o desactivar-lo per a pàgines o seccions específiques. Per exemple, aquesta demo desactiva show_reading_time = false a la secció projectes a l’arxiu _index.md, de manera que les seves publicacions individuals no mostren el temps de lectura.

Mostrar la data

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
✅	✅	✅	✅	❌

Per defecte, la data es mostra sota el títol de la publicació. Pots amagar-la amb show_date = false. Aquest ajust segueix la jerarquia.

Format de data

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

tabi té tres formats de data: long_date_format, short_date_format i archive_data_format. El format curt s’utilitza a les metadades d’una publicació, mentre que el format llarg s’utilitza al llistar les publicacions (és a dir, a la secció de blog o a la pàgina principal). El format d’arxiu s’utilitza per mostrar el dia i el mes a la pàgina d’arxiu.

Per defecte és “6th July 2049” per als formats curt i llarg en anglès. Per a altres idiomes, el predeterminat és "%d %B %Y" per al format llarg i "%-d %b %Y" per al format curt. El format d’arxiu predeterminat universal és "%d %b".

A Zola, la sintaxi per al format de temps està inspirada en strftime. Una referència completa està disponible a la documentació de chrono.

Formats de data per idioma

Pots personalitzar els formats de data per idiomes específics utilitzant la matriu date_formats a config.toml:

date_formats = [
+    { lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
+    { lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
+]
+

Això permet que diferents idiomes utilitzin formats de data culturalment apropiats (per exemple, “6. Juli 2049” per a alemany VS “6 de julio de 2049” per a espanyol).

Separador personalitzat

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

El separador apareix en diversos llocs: al títol del navegador, entre les metadades d’una publicació…

El separador per defecte és un punt de llista (•), però pots canviar-lo configurant alguna cosa com separator = "|".

Ordre del títol

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per defecte, el títol a la pestanya del navegador és el nom del lloc seguit del títol de la pàgina. Per exemple, el títol de la secció del blog és «~/tabi • Blog».

Configurant invert_title_order = true, pots invertir l’ordre del títol del lloc i el títol de la pàgina a la pestanya del navegador. Per exemple, l’etiqueta del títol de la secció del blog es convertiria en «Blog • ~/tabi».

Certainly, here is a high-quality, non-literal translation of the provided text into Catalan. I’ve adhered to your specifications, keeping the variables and English terms unchanged.

Seguretat

Correu electrònic codificat

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	✅

Per tal de protegir la teva adreça de correu electrònic contra els spambots, pots codificar-la al peu de pàgina. Pots fer això establint email a una versió codificada en base64 de la teva adreça de correu electrònic². Per exemple, email = "bWFpbEBleGFtcGxlLmNvbQ==" és la versió codificada en base64 de “mail@example.com”.

Si no vols codificar el teu correu electrònic tu mateix, tabi pot fer-ho per tu si configures encode_plaintext_email = true. Això et permet establir un correu electrònic en text pla en la configuració. Tingues en compte que això només protegeix la teva adreça de correu electrònic al teu lloc web, no en repositoris públics.

Si el correu electrònic està codificat (ja sigui per tu o per tabi), els usuaris amb JavaScript desactivat no veuran la icona de correu electrònic.

CSP (Content Security Policy)

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

La Content Security Policy (CSP) és una capa addicional de seguretat que ajuda a detectar i mitigar certs tipus d’atacs, inclosos atacs de Cross Site Scripting (XSS) i injecció de dades. Aquests atacs s’utilitzen per a tot, des del robatori de dades fins a la desfiguració de llocs web i la distribució de programari maliciós.

tabi té una CSP predeterminada que permet imatges i vídeos remots, així com incrustacions de YouTube i Vimeo. Pots personalitzar-la amb allowed_domains, que accepta una llista de directrius de CSP. Aquesta és la CSP predeterminada:

allowed_domains = [
+    { directive = "font-src", domains = ["'self'", "data:"] },
+    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
+    { directive = "script-src", domains = ["'self'"] },
+    { directive = "style-src", domains = ["'self'"] },
+    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
+]
+

Aquesta opció està habilitada per defecte. Per desactivar-la per una pàgina, secció o globalment, estableix enable_csp = false. La configuració de enable_csp segueix la jerarquia.

Per a més informació, consulta la pàgina de documentació de CSP.

Indieweb

Webmentions

Pàgina	Secció	`config.toml`	Segueix jerarquia	Requereix JavaScript
❓	❓	✅	❓	✅

Com es descriu en l’estàndard W3C recomanat, Webmention és una manera senzilla de notificar qualsevol URL quan la menciones al teu lloc web. Des de la perspectiva del receptor, és una manera de sol·licitar notificacions quan altres llocs web la mencionen.

Per a llocs web estàtics, webmention.io allotja un punt final de webmention que es pot utilitzar per rebre webmentions. Aquesta funcionalitat recupera les webmentions emmagatzemades a webmention.io i les mostra per a una pàgina. Hauràs de configurar un compte per al teu lloc web a webmention.io. Quan habilitis la funcionalitat de webmention, anunciarà el teu punt final de webmention.io i mostrarà les webmentions per a qualsevol pàgina.

Habilita les webmentions per al teu lloc web afegint el següent al teu fitxer config.toml.

[extra.webmentions]
+enable = true
+# Especifica el domini registrat amb webmention.io.
+domain = "www.example.com"
+

❓: Per desactivar les webmentions per a una secció o pàgina específica, estableix webmentions = false a la secció [extra] del front matter d’aquesta secció o pàgina.

La secció de webmentions es veu així:

Captura de pantalla de webmentions mostrant republications, m'agrada, marcadors i comentaris

h-card representativa

Pàgina	Secció	`config.toml`	Segueix la jerarquia	Requereix JavaScript
❌	❌	✅	❌	❌

Per defecte, tabi afegeix una h-card representativa h-card oculta a la pàgina d’inici. Tot i que és invisible per als visitants, està disponible per als analitzadors de microformats. Pots comprovar la validesa de la targeta amb l’eina Indiewebify.me.

Per desactivar l’h-card, estableix enable = false a la secció [extra.hcard] de config.toml.

L’h-card predeterminada inclou el teu nom, l’URL del lloc web i els enllaços a les xarxes socials.

Pots establir una imatge de perfil i una petita biografia amb els paràmetres avatar i biography.

Totes les altres propietats h-card es poden afegir llistant-les a la secció [extra.hcard] del fitxer de configuració. Simplement substitueix tots els caràcters - per _.

Estenent elements HTML a tabi

Alguns elements HTML a tabi es poden estendre per admetre casos d’ús addicionals, com ara afegir JavaScript personalitzat per a comportaments a tot el lloc al final de l’etiqueta <body> o incloure contingut addicional al final de l’element <head> que no estigui suportat per altres configuracions de tabi.

Consulta la taula a continuació per veure els elements que es poden estendre:
Element Plantilla
<head> templates/tabi/extend_head.html
<body> templates/tabi/extend_body.html

No hi ha configuracions explícites que hagis d’establir per al teu lloc o pàgines. Simplement crea el fitxer de plantilla corresponent per al teu lloc, i tabi l’inclourà automàticament.

Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d’actualització del camp updated. Aquí tens una guia per a això: Zola Git Hook: actualitzant les dates de les publicacions. ↩
Per a codificar el teu correu electrònic en base64 pots utilitzar eines en línia o, al teu terminal, executar: printf 'mail@example.com' | base64 ↩

\ No newline at end of file diff --git a/ca/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg b/ca/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..69e0efc Binary files /dev/null and b/ca/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg differ diff --git a/ca/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg b/ca/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..4c8f94f Binary files /dev/null and b/ca/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg differ diff --git a/ca/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg b/ca/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg new file mode 100644 index 0000000..cdc4d16 Binary files /dev/null and b/ca/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg differ diff --git a/ca/blog/page/1/index.html b/ca/blog/page/1/index.html new file mode 100644 index 0000000..f5b1a39 --- /dev/null +++ b/ca/blog/page/1/index.html @@ -0,0 +1 @@ +Redirect

Click here to be redirected.

\ No newline at end of file diff --git a/ca/blog/page/2/index.html b/ca/blog/page/2/index.html new file mode 100644 index 0000000..2299eee --- /dev/null +++ b/ca/blog/page/2/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

29 d’abril 2023

Optimitza la càrrega amb un subconjunt de font personalitzat

funcionalitat tutorial

Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris.

Llegir més →

22 de febrer 2023

Seguretat per defecte

seguretat funcionalitat

tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l’Observatori de Mozilla.

Llegir més →

19 de febrer 2023

Shortcodes personalitzats

funcionalitat shortcodes

Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s’adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t’ajudaran.

Llegir més →

31 de gener 2023

Exemples de Markdown

markdown funcionalitat

Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina.

Llegir més →

06 de gener 2023

Sense JavaScript obligatori

funcionalitat tutorial

JavaScript només s’utilitza quan HTML i CSS no són suficients.

Llegir més →

\ No newline at end of file diff --git a/ca/blog/page/3/index.html b/ca/blog/page/3/index.html new file mode 100644 index 0000000..b87f6cb --- /dev/null +++ b/ca/blog/page/3/index.html @@ -0,0 +1,2 @@ + +~/tabi • Blog

Blog

01 de novembre 2022

Taula de contingut

funcionalitat markdown tutorial

Una publicació que mostra la taula de contingut opcional i la seva configuració.

Llegir més →

← Anterior
3 de 3
Següent →

\ No newline at end of file diff --git a/ca/blog/security/index.html b/ca/blog/security/index.html new file mode 100644 index 0000000..4bcc334 --- /dev/null +++ b/ca/blog/security/index.html @@ -0,0 +1,11 @@ + +~/tabi • Seguretat per defecte

Seguretat per defecte

22 de febr. 2023
2 mins de lectura
Etiquetes:
seguretat,
funcionalitat

Actualitzat el 21 de febr. 2025
Veure canvis

La configuració per defecte del tema obté una puntuació A+ a l’Observatori de Mozilla.¹

Això s’aconsegueix configurant programàticament les capçaleres de la Política de Seguretat de Contingut (CSP) basant-se en una llista de dominis permesos definida per l’usuari en el fitxer config.toml. Aquí tens la configuració per defecte i recomanada (pots eliminar l’última directiva si no vols inserir vídeos de YouTube):

[extra]
+allowed_domains = [
+    { directive = "font-src", domains = ["'self'", "data:"] },
+    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
+    { directive = "script-src", domains = ["'self'"] },
+    { directive = "style-src", domains = ["'self'"] },
+    { directive = "frame-src", domains = ["https://www.youtube-nocookie.com"] },
+]
+

La llista allowed_domains especifica les URLs a les quals el lloc web hauria de poder connectar-se, i cada domini de la llista està associat amb una directiva CSP com frame-src, connect-src o script-src. El fitxer templates/partials/header.html genera dinàmicament la capçalera CSP basant-se en aquesta llista.

Aquesta funcionalitat permet personalitzar fàcilment les capçaleres de seguretat del lloc web per permetre casos d’ús específics, com ara inserir vídeos de YouTube, carregar scripts o tipografies remotes (no recomanat).

Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o globalment configurant enable_csp = false en el front matter o en el fitxer config.toml.

Notas:

Habilitar els comentaris, les analítiques, o els diagrames de mermaid permet automàticament els scripts/frames/estils/conexions pertinents.
Per utilitzar un tema de resaltat de sintaxis integrat a Zola, has de permetre unsafe-inline a la directiva style-src:
```
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
+
```

Requereix una configuració adequada del servidor web (p. ex., redirigir el trànsit HTTP a HTTPS). ↩

\ No newline at end of file diff --git a/ca/blog/security/social_cards/blog_security.jpg b/ca/blog/security/social_cards/blog_security.jpg new file mode 100644 index 0000000..154cb98 Binary files /dev/null and b/ca/blog/security/social_cards/blog_security.jpg differ diff --git a/ca/blog/security/social_cards/ca_blog_security.jpg b/ca/blog/security/social_cards/ca_blog_security.jpg new file mode 100644 index 0000000..725da83 Binary files /dev/null and b/ca/blog/security/social_cards/ca_blog_security.jpg differ diff --git a/ca/blog/security/social_cards/es_blog_security.jpg b/ca/blog/security/social_cards/es_blog_security.jpg new file mode 100644 index 0000000..3a898a2 Binary files /dev/null and b/ca/blog/security/social_cards/es_blog_security.jpg differ diff --git a/ca/blog/series/img/jump_to_series_posts_dark.webp b/ca/blog/series/img/jump_to_series_posts_dark.webp new file mode 100644 index 0000000..d88a292 Binary files /dev/null and b/ca/blog/series/img/jump_to_series_posts_dark.webp differ diff --git a/ca/blog/series/img/jump_to_series_posts_light.webp b/ca/blog/series/img/jump_to_series_posts_light.webp new file mode 100644 index 0000000..22f5e78 Binary files /dev/null and b/ca/blog/series/img/jump_to_series_posts_light.webp differ diff --git a/ca/blog/series/img/series_dark.webp b/ca/blog/series/img/series_dark.webp new file mode 100644 index 0000000..89223d0 Binary files /dev/null and b/ca/blog/series/img/series_dark.webp differ diff --git a/ca/blog/series/img/series_light.webp b/ca/blog/series/img/series_light.webp new file mode 100644 index 0000000..780e2f2 Binary files /dev/null and b/ca/blog/series/img/series_light.webp differ diff --git a/ca/blog/series/img/series_reversed_dark.webp b/ca/blog/series/img/series_reversed_dark.webp new file mode 100644 index 0000000..112a853 Binary files /dev/null and b/ca/blog/series/img/series_reversed_dark.webp differ diff --git a/ca/blog/series/img/series_reversed_light.webp b/ca/blog/series/img/series_reversed_light.webp new file mode 100644 index 0000000..2a1dd0e Binary files /dev/null and b/ca/blog/series/img/series_reversed_light.webp differ diff --git a/ca/blog/series/index.html b/ca/blog/series/index.html new file mode 100644 index 0000000..9e98b16 --- /dev/null +++ b/ca/blog/series/index.html @@ -0,0 +1,164 @@ + +~/tabi • Guia completa sobre sèries

Guia completa sobre sèries

8 de nov. 2024
9 mins de lectura
Etiquetes:
funcionalitat,
tutorial,
preguntes freqüents,
sèries

Actualitzat el 21 de febr. 2025
Veure canvis

Taula de contingut

Una sèrie organitza publicacions relacionades en ordre seqüencial, similar als capítols d’un llibre. A diferència de les etiquetes, que simplement agrupen contingut relacionat, les sèries suggereixen un ordre específic de lectura de principi a fi.

Les publicacions dins d’una sèrie no necessiten publicar-se de forma consecutiva; la funció de sèries reuneix publicacions temàticament vinculades en una seqüència coherent.

El següent diagrama il·lustra com les publicacions de la sèrie (3, 5 i 8) existeixen dins del flux principal del blog mentre mantenen la seva pròpia seqüència ordenada dins de Sèrie 1.

+    flowchart
+    subgraph main[BLOG]
+        P1[Post 1]
+        P2[P2]
+        P3[P3]
+        P4[P4]
+        P5[P5]
+        P6[P6]
+        P7[P7]
+        P8[P8]
+        P9[P9]
+    end
+    subgraph series1[SÈRIE 1]
+        PS1["Post Sèrie 1 (=P3)"]
+        PS2["Post Sèrie 2 (=P5)"]
+        PS3["Post Sèrie 3 (=P8)"]
+    end
+    P3 o-.-o PS1
+    P5 o-.-o PS2
+    P8 o-.-o PS3
+

Inici ràpid

Crea un directori per a la teva sèrie
Crea _index.md al directori de la sèrie

Configura el front matter de _index.md:

title = "Aprenent Rust"
+template = "series.html"
+sort_by = "slug"
+transparent = true
+
+[extra]
+series = true
+

Crea els teus articles de la sèrie en aquest directori

Vols saber-ne més? Continua llegint!

Com funcionen les sèries?

Una sèrie és simplement una secció que tabi gestiona de manera especial. Per a més detalls sobre seccions, consulta la documentació de Zola.

Prenent l’exemple del diagrama anterior, l’estructura de directoris seria així:

content/
+    _index.md
+    blog/
+        _index.md
+        post1/
+            index.md
+        post2/
+            index.md
+        post4/
+            index.md
+        post6/
+            index.md
+        post7/
+            index.md
+        post9/
+            index.md
+        serie1/
+            _index.md
+            post3/
+                index.md
+            post5/
+                index.md
+            post8/
+                index.md
+

Per crear una sèrie, necessites:

Utilitzar la plantilla series.html
Establir series = true a la configuració [extra] de la secció
Activar transparent = true per integrar les publicacions de la sèrie amb la secció del blog principal

La pàgina principal de la sèrie mostra un resum seguit d’una llista de totes les publicacions a la sèrie:

Saltar a les publicacions

Si el contingut d’una sèrie (el Markdown després del frontmatter a _index.md) supera els 2000 caràcters, apareix un enllaç “Salta a les publicacions” al costat del títol de la sèrie.

Per forçar l’activació o desactivació d’aquesta funció, configura show_jump_to_posts a la secció [extra] de la teva secció de sèries o a config.toml. Aquesta configuració segueix la jerarquia.

Pàgines de sèries i ordre

Totes les pàgines a la secció de sèries seran pàgines de sèrie. Les pàgines s’ordenaran segons el sort_by de la secció.

Tot i que les sèries mantenen el seu propi ordre intern, romanen independents del flux cronològic de la secció principal (per exemple, blog/) gràcies a la configuració transparent.

Opcions d’ordre

Tria entre aquests mètodes d’ordre, cadascun amb els seus avantatges:

`sort_by`	avantatges	desavantatges
`slug`	L’ordre de les pàgines és explícit a la ruta (per exemple, `example.com/blog/series1/01-series-post-un`).	Cada pàgina de la sèrie ha de tenir el prefix corresponent.
`weight`	L’ordre de les pàgines és fàcil de configurar de forma transparent. La primera publicació té pes `1`, la segona pes `2` i així successivament.	Cada pàgina de la sèrie ha de tenir el seu pes configurat.
`date`	L’ordre de les pàgines es pot configurar una sola vegada a la configuració de la secció. No cal fer res a cada pàgina.	L’ordre de les pàgines s’ha d’invertir perquè la primera pàgina sol ser la més antiga. Això només es pot aconseguir paginant la secció (`paginate_by = 9999`) i invertint el seu ordre (`paginate_reversed = true`).

Versió de Zola per ordenar per data

Per invertir correctament les dates, es requereix Zola v0.19.3+ (no publicada) perquè la informació de paginació estigui disponible a través de la funció get_section. En cas contrari, qualsevol cosa que depengui de l’ordre de les pàgines de la sèrie no serà correcta (per exemple, pàgina anterior/següent, llistes ordenades i no ordenades…) Vegeu Zola PR #2653.

Indexació de pàgines

Les pàgines en una sèrie s’indexen començant des d’1, seguint el seu ordre sort_by. Per invertir la indexació (fent que la primera pàgina tingui l’índex més alt), afegeix aquesta configuració a _index.md o config.toml:

[extra]
+post_listing_index_reversed = true  # Per defecte és false si no es configura
+

Aquesta configuració segueix la jerarquia.

Plantilles d’introducció i conclusió

Els articles d’una sèrie poden tenir seccions automàtiques d’introducció i conclusió. Aquestes es configuren al _index.md de la teva sèrie. Un exemple bàsic:

[extra.series_intro_templates]
+default = "Aquest article és part de la sèrie $SERIES_HTML_LINK."
+
+[extra.series_outro_templates]
+default = "Gràcies per llegir la part $SERIES_PAGE_INDEX de $SERIES_HTML_LINK!"
+

Les seccions d’introducció i conclusió tenen les seves pròpies classes CSS (series-page-intro i series-page-outro), que et permeten personalitzar la seva aparença mitjançant CSS personalitzat.

Tipus de plantilles

El sistema de sèries utilitza diferents plantilles segons la posició de l’article a la sèrie:

next_only - Utilitzat per al primer article (té article següent però no anterior)
middle - Utilitzat per a articles amb articles anterior i següent
prev_only - Utilitzat per a l’últim article (té article anterior però no següent)
default - Plantilla per defecte utilitzada quan no existeix una plantilla específica per a la posició

El sistema determina automàticament quina plantilla utilitzar segons la posició de l’article. Les plantilles es defineixen a la configuració de la sèrie (_index.md), com extra.series_intro_templates i extra.series_outro_templates:

[extra.series_intro_templates]
+next_only = "Benvingut a la part 1! Següent: $NEXT_HTML_LINK"
+middle = "Anterior: $PREV_HTML_LINK | Següent: $NEXT_HTML_LINK"
+prev_only = "El capítol final! Anteriorment: $PREV_HTML_LINK"
+default = "Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER"
+

Totes les plantilles són opcionals. La selecció de plantilles segueix un sistema de prioritat:

Si existeix una plantilla específica per a la posició (next_only, middle, o prev_only), s’utilitzarà aquesta
Si no, s’utilitza la plantilla default
Si no es defineix cap plantilla, no es mostrarà informació de la sèrie

Mira l’exemple de plantilla per veure un exemple més elaborat.

Ubicació al contingut

Per defecte:

Les introduccions de sèrie apareixen a l’inici del teu article
La conclusió apareix al final (abans de les notes al peu, si n’hi ha)

Pots controlar exactament on apareixen utilitzant  i  al teu Markdown:

Aquest paràgraf apareix abans de la introducció de la sèrie.
+
+<!-- series_intro -->
+
+Contingut principal de l'article.
+
+<!-- series_outro -->
+
+## Recursos d'aprenentatge
+
+Contingut addicional...
+
+[^1]: Les notes al peu sempre apareixeran al final.
+

Variables

Les plantilles de sèries utilitzen un sistema flexible de variables que et permet:

Fer referència a informació de la sèrie (títol, enllaços)
Afegir navegació entre articles
Mostrar indicadors de progrés
Incloure informació personalitzada utilitzant les teves pròpies variables

Les variables són marcadors que comencen amb $ i es reemplacen amb contingut real quan es construeix el teu lloc. Per exemple, $SERIES_HTML_LINK es converteix en un enllaç clicable a la pàgina índex de la teva sèrie.

Hi ha tres tipus de variables:

Variables bàsiques de sèrie: Informació general sobre la sèrie
Variables de navegació: Enllaços a articles anterior/següent
Variables personalitzades: Els teus propis marcadors per a informació addicional

Variables bàsiques de sèrie

Variable	Disponibilitat	Retorna	Descripció	Exemple d’ús	Exemple de sortida
`$SERIES_TITLE`	Sempre	Text	Títol de la sèrie en text pla	`Part de $SERIES_TITLE`	Part d’Aprenent Rust
`$SERIES_PERMALINK`	Sempre	Text	URL a l’índex de la sèrie	`[Veure totes les publicacions]($SERIES_PERMALINK)`	Veure totes les publicacions
`$SERIES_HTML_LINK`	Sempre	HTML	Enllaç llest per usar a la sèrie	`Benvingut a $SERIES_HTML_LINK!`	Benvingut a Aprenent Rust!
`$SERIES_PAGES_NUMBER`	Sempre	Nombre	Total d’articles a la sèrie	`Una sèrie de $SERIES_PAGES_NUMBER parts`	Una sèrie de 5 parts
`$SERIES_PAGE_INDEX`	Sempre	Nombre	Posició de l’article actual	`Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER`	Part 3 de 5
`$SERIES_PAGES_OLIST`	Sempre	HTML	Llista ordenada de tots els articles	`Articles a la sèrie: $SERIES_PAGES_OLIST`	Articles a la sèrie: Article actual Altres articles
`$SERIES_PAGES_ULIST`	Sempre	HTML	Llista desordenada de tots els articles	`Articles a la sèrie: $SERIES_PAGES_ULIST`	Articles a la sèrie: Article actual Altres articles

{{ admonition(type=“tip”, title=“CONSELL: Text personalitzat amb permalinks”, text=‘Els enllaços markdown com [text]($SERIES_PERMALINK) seran marcats (i estilitzats) com externs. Si necessites text personalitzat i vols evitar l'estil extern, utilitza HTML: <a href=\"$SERIES_PERMALINK\">el teu text</a>.’) }}

Variables de navegació

Variable	Disponibilitat	Retorna	Descripció	Exemple d’ús	Exemple de sortida
`$PREV_TITLE`	Existeix anterior	Text	Títol de l’article anterior	`Anteriorment: $PREV_TITLE`	Anteriorment: Configurant el teu entorn
`$PREV_PERMALINK`	Existeix anterior	Text	URL a l’article anterior	`[← Enrere]($PREV_PERMALINK)`	← Enrere
`$PREV_HTML_LINK`	Existeix anterior	HTML	Enllaç llest per usar a l’anterior	`Llegeix primer $PREV_HTML_LINK`	Llegeix primer Configurant el teu entorn
`$PREV_DESCRIPTION`	Existeix anterior	Text	Descripció de l’article anterior	`Resum: $PREV_DESCRIPTION`	Resum: Configurant Rust
`$NEXT_TITLE`	Existeix següent	Text	Títol del següent article	`Següent: $NEXT_TITLE`	Següent: Patrons avançats
`$NEXT_PERMALINK`	Existeix següent	Text	URL al següent article	`[Continuar →]($NEXT_PERMALINK)`	Continuar →
`$NEXT_HTML_LINK`	Existeix següent	HTML	Enllaç llest per usar al següent	`Continua amb $NEXT_HTML_LINK`	Continua amb Patrons avançats
`$NEXT_DESCRIPTION`	Existeix següent	Text	Descripció del següent article	`Properament: $NEXT_DESCRIPTION`	Properament: Aprèn sobre les característiques avançades de pattern matching en Rust

Referència al primer article

Variable	Disponibilitat	Retorna	Descripció	Exemple d’ús	Exemple de sortida
`$FIRST_TITLE`	Sempre	Text	Títol del primer article	`Comença amb $FIRST_TITLE`	Comença amb Introducció a Rust
`$FIRST_HTML_LINK`	Sempre	HTML	Enllaç llest per usar al primer article	`Comença a $FIRST_HTML_LINK`	Comença a Introducció a Rust

Exemple de plantilla

Variables HTML vs text

Utilitza variables HTML (que acaben en _HTML_LINK) quan vulguis enllaços preparats per usar. Utilitza variables de text (que acaben en _TITLE o _PERMALINK) quan vulguis més control sobre el format.

# Introducció
+[extra.series_intro_templates]
+next_only = """
+Benvingut a $SERIES_HTML_LINK! Aquesta sèrie de $SERIES_PAGES_NUMBER parts t'ensenyarà Rust des de zero.
+
+Següent: $NEXT_HTML_LINK - $NEXT_DESCRIPTION
+"""
+
+middle = """
+📚 Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER a $SERIES_HTML_LINK
+
+Anterior: $PREV_HTML_LINK
+Següent: $NEXT_HTML_LINK
+"""
+
+prev_only = """
+Benvingut a l'última part de $SERIES_HTML_LINK!
+Ets nou? Comença amb $FIRST_HTML_LINK per construir una base sòlida.
+
+Anterior: $PREV_HTML_LINK
+"""
+
+# Plantilla de respatller
+default = "Aquest article és part de la sèrie $SERIES_HTML_LINK."
+
+# Conclusió
+[extra.series_outro_templates]
+next_only = """
+Gràcies per llegir! 🙌
+
+Continua el teu viatge amb $NEXT_HTML_LINK, on $NEXT_DESCRIPTION
+O revisa l'esquema complet de la sèrie [$SERIES_TITLE]($SERIES_PERMALINK).
+"""
+
+middle = """
+---
+📝 Navegació de la sèrie
+
+- Anterior: $PREV_HTML_LINK
+- Següent: $NEXT_HTML_LINK
+- [Resum de la sèrie]($SERIES_PERMALINK)
+"""
+
+prev_only = """
+🎉 Felicitats! Has completat $SERIES_HTML_LINK.
+
+Vols repassar? Aquí vam començar: $FIRST_HTML_LINK
+O revisa el que acabem de veure a $PREV_HTML_LINK.
+"""
+
+# Respatller.
+default = """
+---
+Aquest article és la part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER a $SERIES_HTML_LINK.
+"""
+

Variables personalitzades

Les plantilles de sèries admeten variables personalitzades per incloure informació addicional a tota la teva sèrie. El procés té dos passos:

Primer, defineix els teus marcadors a la configuració de la teva sèrie (_index.md):

[extra]
+series = true
+series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
+

Després, a cada article de la sèrie, proporciona els valors per a aquests marcadors a series_template_variables:

[extra.series_template_variables]
+position = "primer"
+topic = "Variables i tipus"
+difficulty = "Principiant"
+

Ús de variables personalitzades

Pots usar les teves variables personalitzades a qualsevol plantilla, juntament amb les variables integrades:

[extra.series_intro_templates]
+default = """
+Aquest és l'article $POSITION a $SERIES_HTML_LINK.
+Tema d'avui: $TOPIC
+Nivell de dificultat: $DIFFICULTY
+"""
+

WARNING

Encara que els marcadors es defineixen en majúscules ($POSITION), els noms de variables a series_template_variables han d’estar en minúscules (position).

Exemple amb variables personalitzades

# A la configuració de la sèrie.
+[extra]
+series = true
+series_template_placeholders = ["$LEARNING_TIME", "$KEY_CONCEPTS"]
+
+series_intro_templates.default = """
+📚 Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER
+⏱️ Temps estimat: $LEARNING_TIME
+🔑 Conceptes clau: $KEY_CONCEPTS
+"""
+

# En un article de la sèrie.
+[extra.series_template_variables]
+learning_time = "30 minuts"
+key_concepts = "Funcions, gestió d'errors, coincidència de patrons"
+

Això generarà:

📚 Part 2 de 5
+⏱️ Temps estimat: 30 minuts
+🔑 Conceptes clau: Funcions, gestió d'errors, coincidència de patrons
+

Variables que falten

Si uses un marcador a les teves plantilles però no proporciones el seu valor a series_template_variables, la compilació fallarà amb un error que llista les variables que falten.

\ No newline at end of file diff --git a/ca/blog/series/social_cards/blog_series.jpg b/ca/blog/series/social_cards/blog_series.jpg new file mode 100644 index 0000000..0de6828 Binary files /dev/null and b/ca/blog/series/social_cards/blog_series.jpg differ diff --git a/ca/blog/series/social_cards/ca_blog_series.jpg b/ca/blog/series/social_cards/ca_blog_series.jpg new file mode 100644 index 0000000..12ccc6c Binary files /dev/null and b/ca/blog/series/social_cards/ca_blog_series.jpg differ diff --git a/ca/blog/series/social_cards/es_blog_series.jpg b/ca/blog/series/social_cards/es_blog_series.jpg new file mode 100644 index 0000000..3a24a96 Binary files /dev/null and b/ca/blog/series/social_cards/es_blog_series.jpg differ diff --git a/ca/blog/shortcodes/img/amsterdam_by_oskerwyld.webp b/ca/blog/shortcodes/img/amsterdam_by_oskerwyld.webp new file mode 100644 index 0000000..2e84a02 Binary files /dev/null and b/ca/blog/shortcodes/img/amsterdam_by_oskerwyld.webp differ diff --git a/ca/blog/shortcodes/img/desert_by_oskerwyld.webp b/ca/blog/shortcodes/img/desert_by_oskerwyld.webp new file mode 100644 index 0000000..71a0f12 Binary files /dev/null and b/ca/blog/shortcodes/img/desert_by_oskerwyld.webp differ diff --git a/ca/blog/shortcodes/img/edited.webp b/ca/blog/shortcodes/img/edited.webp new file mode 100644 index 0000000..ab5ae7f Binary files /dev/null and b/ca/blog/shortcodes/img/edited.webp differ diff --git a/ca/blog/shortcodes/img/graph.webp b/ca/blog/shortcodes/img/graph.webp new file mode 100644 index 0000000..5c2b9cd Binary files /dev/null and b/ca/blog/shortcodes/img/graph.webp differ diff --git a/ca/blog/shortcodes/img/mojave_day.webp b/ca/blog/shortcodes/img/mojave_day.webp new file mode 100644 index 0000000..dcba3fb Binary files /dev/null and b/ca/blog/shortcodes/img/mojave_day.webp differ diff --git a/ca/blog/shortcodes/img/mojave_night.webp b/ca/blog/shortcodes/img/mojave_night.webp new file mode 100644 index 0000000..20267c5 Binary files /dev/null and b/ca/blog/shortcodes/img/mojave_night.webp differ diff --git a/ca/blog/shortcodes/img/paris_day.webp b/ca/blog/shortcodes/img/paris_day.webp new file mode 100644 index 0000000..5dc219c Binary files /dev/null and b/ca/blog/shortcodes/img/paris_day.webp differ diff --git a/ca/blog/shortcodes/img/paris_night.webp b/ca/blog/shortcodes/img/paris_night.webp new file mode 100644 index 0000000..d445112 Binary files /dev/null and b/ca/blog/shortcodes/img/paris_night.webp differ diff --git a/ca/blog/shortcodes/img/raw.webp b/ca/blog/shortcodes/img/raw.webp new file mode 100644 index 0000000..d005c95 Binary files /dev/null and b/ca/blog/shortcodes/img/raw.webp differ diff --git a/ca/blog/shortcodes/index.html b/ca/blog/shortcodes/index.html new file mode 100644 index 0000000..4282c47 --- /dev/null +++ b/ca/blog/shortcodes/index.html @@ -0,0 +1,133 @@ + +~/tabi • Shortcodes personalitzats

Shortcodes personalitzats

19 de febr. 2023
5 mins de lectura
Etiquetes:
funcionalitat,
shortcodes

Actualitzat el 1 d’ag. 2025
Veure canvis

Shortcodes de diagrames

Diagrames de Mermaid

Mermaid és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més.

Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:

Estableix mermaid = true a la secció [extra] del front matter de la teva pàgina, secció o config.toml. Això carregarà el JavaScript necessari per renderitzar els diagrames.
Utilitza el shortcode mermaid() per definir el teu diagrama. Per exemple:

{% mermaid() %}
+classDiagram
+    class DistorsionsCognitives {
+        +PensamentTotORes()
+        +Sobregeneralitzacio()
+        +FiltreMental()
+        +TreureConclusionsPrecipitades()
+    }
+    class PensamentTotORes {
+        +VeureEnExtrems()
+    }
+    class Sobregeneralitzacio {
+        +GeneralitzarDUnic()
+    }
+    class FiltreMental {
+        +EnfocarseEnNegatiu()
+    }
+    class TreureConclusionsPrecipitades {
+        +FerSuposicions()
+    }
+    DistorsionsCognitives *-- PensamentTotORes
+    DistorsionsCognitives *-- Sobregeneralitzacio
+    DistorsionsCognitives *-- FiltreMental
+    DistorsionsCognitives *-- TreureConclusionsPrecipitades
+{% end %}
+

El diagrama es renderitzarà així:

+    classDiagram
+    class DistorsionsCognitives {
+        +PensamentTotORes()
+        +Sobregeneralitzacio()
+        +FiltreMental()
+        +TreureConclusionsPrecipitades()
+    }
+    class PensamentTotORes {
+        +VeureEnExtrems()
+    }
+    class Sobregeneralitzacio {
+        +GeneralitzarDUnic()
+    }
+    class FiltreMental {
+        +EnfocarseEnNegatiu()
+    }
+    class TreureConclusionsPrecipitades {
+        +FerSuposicions()
+    }
+    DistorsionsCognitives *-- PensamentTotORes
+    DistorsionsCognitives *-- Sobregeneralitzacio
+    DistorsionsCognitives *-- FiltreMental
+    DistorsionsCognitives *-- TreureConclusionsPrecipitades
+

El shortcode de Mermaid admet dos paràmetres:

invertible: Si s’estableix a true (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les imatges invertibles.
full_width: Permet que el diagrama ocupi l’amplada de la capçalera. Mira imatge d’amplada completa.

CONSELL

Empra l’editor de Mermaid per crear i previsualitzar els teus diagrames.

Ús

{% mermaid(invertible=true, full_width=false) %}
+
+El teu codi Mermaid va aquí.
+
+`invertible` or `full_width` poden ometre's per emprar els valors per defecte.
+
+{% end %}
+

Shortcodes d’imatge

Tots els shortcodes d’imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre src.

Tots els shortcodes d’imatge tenen els següents paràmetres opcionals:

raw_path. Per defecte és false. Si es configura a true, el paràmetre src s’utilitzarà tal qual. Útil per a actius ubicats a la mateixa carpeta que tenen un slug personalitzat (vegeu Zola issue #2598).
inline. Valor predeterminat: false. Si s’estableix a true, la imatge es mostrarà en línia amb el text.
full_width. Valor predeterminat: false (vegeu a sota).
lazy_loading. Valor predeterminat: true.

Imatges per a temes duals

Útil si vols utilitzar una imatge diferent pels temes clar i fosc:

Ús

{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }}
+

Imatge invertible

Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s’utilitzarà per al tema clar.

Ús

{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }}
+

Imatge regulable

Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d’una fotografia que s’atenua quan s’activa el tema fosc.

Ús

{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }}
+

Canvi d’imatge en passar el cursor

La imatge mostrada canvia quan l’usuari passa el cursor per sobre. Útil per a comparacions d’abans i després, per exemple.

Ús

{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
+

Canvi d’imatge via clic

Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l’atenció sobre detalls.

Ús

{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }}
+

Imatge d’amplada completa

La imatge s’expandirà per coincidir amb l’amplada de la capçalera, que normalment és més ampla que el text de l’article (excepte en mòbil/finestres petites).

Tots els altres shortcodes d’imatges poden utilizar l’amplada completa assignant true al paràmetre opcional full_width.

Ús

{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
+

Shortcodes socials

iine

Aquest shortcode et permet afegir botons addicionals d’iine.to a les teves publicacions, com aquest:

Ús

{{ iine(icon="heart", slug="/post/el-meu-slug-de-post/like", label="M'agrada aquesta publicació") }}
+

El shortcode accepta els següents paràmetres opcionals:

icon: La icona a mostrar. Pot ser heart, thumbs_up, upvote, o qualsevol emoji.
slug: Un identificador únic. Per defecte és la ruta de la pàgina actual. Útil si vols més d’un botó a la mateixa pàgina.
label: L’etiqueta d’accessibilitat per al botó. Per defecte és “M’agrada aquesta publicació”.

Shortcodes de codi

Mostrar ruta o URL

Pots mostrar una ruta o URL per a un bloc de codi utilitzant la sintaxi nativa de Zola:

```rust,name=src/main.rs
+fn main() {
+    println!("Hola, món!");
+}
+```
+

Això renderitza:

fn main() {
+    println!("Hola, món!");
+}
+

Si estableixes el name com una URL (és a dir, comença amb http o https), pots convertir-lo en un enllaç clicable. Això és particularment útil quan s’utilitza juntament amb el shortcode de text remot.

JavaScript necessari

La funció d’URLs clicables requereix JavaScript. Per habilitar-la, configura code_block_name_links = true a la secció [extra] de la teva pàgina, secció, o config.toml.

__pycache__/
+*coverage*
+.vscode/
+dist/
+

Suport de shortcode heretat

El shortcode add_src_to_code_block segueix funcionant per retrocompatibilitat però serà descontinuat en una versió futura. Si us plau, utilitza la sintaxi nativa de Zola:

# Forma antiga (descontinuada):
+{{ add_src_to_code_block(src="ruta/al/fitxer.rs") }}
+
+# Forma nova (recomanada):
+```rust,name=ruta/al/fitxer.rs
+

Ús

{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
+```.gitignore
+**pycache**/
+*coverage*
+.vscode/
+dist/
+```
+

Shortcodes de text

Aside (nota al marge)

Afegeix contingut complementari als marges en pantalles amples, o com a blocs distintius en mòbil.

El shortcode accepta dos paràmetres:

position: Establir com a "right" per col·locar al marge dret (per defecte, esquerre)
El contingut es pot proporcionar mitjançant el paràmetre text o entre les etiquetes del shortcode

Ús

WARNING

Separa la definició de la nota del shortcode amb dues línies en blanc per evitar errors de renderització.

Fent servir el paràmetre text:

{{ aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") }}
+

Fent servir el cos del contingut i indicant la posició a la dreta:

{% aside(position="right") %}
+Una nota més llarga que
+pot ocupar diverses línies.
+
+S'admet *Markdown*.
+{% end %}
+

Text remot

Afegeix text des d’una URL remota o un arxiu local.

El shortcode accepta tres paràmetres:

src: L’URL d’origen o ruta del fitxer (obligatori)
start: Primera línia a mostrar (opcional, comença a 1)
end: Número de l’última línia (opcional, per defecte és 0, l’última línia)

INFO

start i end són inclusius. start=3, end=3 mostrarà només la tercera línia.

Important:

Arxius remots VS arxius locals: Si src comença amb “http”, es tractarà com un arxiu remot. D’altra banda, s’assumeix que és una ruta d’arxiu local.
Accés a arxius: Atès que utilitza la funció load_data de Zola, els arxius locals han d’estar dins del directori de Zola —vegeu la lògica de cerca d’arxius. Desde tabi 2.16.0, el shortcode admet també rutes relatives.
Formateig de blocs de codi: Per mostrar el text com un bloc de codi, has d’afegir manualment les tanques de codi Markdown (cometes inverses) i, opcionalment, especificar el llenguatge de programació per al ressaltat sintàctic.

Ús

Afegeix un script de Python remot dins d’un bloc de codi amb ressaltat sintàctic:

```python
+{{ remote_text(src="https://example.com/script.py") }}
+```
+

Mostra el text d’un arxiu local:

{{ remote_text(src="ruta/a/arxiu.txt") }}
+

Mostreu només les línies 3 a 5 d’un arxiu local:

{{ remote_text(src="ruta/a/arxiu.txt", start=3, end=5) }}
+

Advertències

Destaca informació amb aquests shortcodes. Hi ha cinc tipus (type): note, tip, info, warning, i danger.

NOTE

Contingut amb sintaxi Markdown. Consulta aquesta api.

TIP

Contingut amb sintaxi Markdown. Consulta aquesta api.

INFO

Contingut amb sintaxi Markdown. Consulta aquesta api.

WARNING

Contingut amb sintaxi Markdown. Consulta aquesta api.

DANGER

Contingut amb sintaxi Markdown. Consulta aquesta api.

Pots canviar el title i la icon de l’advertència. Ambdós paràmetres accepten text i per defecte coincideixen amb el tipus d’advertència. icon pot ser qualsevol dels tipus d’advertència disponibles.

Títol i icona personalitzats

Contingut amb sintaxi Markdown. Consulta aquesta api.

Ús

Pots utilitzar les advertències de dues maneres:

En línia amb paràmetres:

{{ admonition(type="danger", icon="tip", title="Un consell important", text="Mantingues-te hidratat") }}
+

Amb contingut al cos:

{% admonition(type="danger", icon="tip", title="Un consell important") %}
+Mantingues-te hidratat
+
+Aquest mètode és especialment útil per a contingut llarg o múltiples paràgrafs.
+{% end %}
+

Ambdós mètodes admeten els mateixos paràmetres (type, icon, i title).

Cites multillenguatge

Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original:

«La lògica, encara que inquebrantable, no resisteix a un home que vol viure.»
— Franz Kafka (Mostra la cita original)

«Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.»
— Franz Kafka (Mostra la traducció)

Ús

{{ multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") }}
+

Referències amb sagnat invertit

Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera:

Alderson, E. (2015). Ciberseguretat i justícia social: Una crítica a la hegemonia corporativa en un món digital. New York Journal of Technology, 11(2), 24-39. https://doi.org/10.1007/s10198-022-01497-6.

Funkhouser, M. (2012). Les normes socials d’indecència: Un anàlisi del comportament desviat a la societat contemporània. Los Angeles Journal of Sociology, 16(3), 41-58. https://doi.org/10.1093/jmp/jhx037.

Schrute, D. (2005). La revolució de l’agricultura de remolatxa: Un anàlisi de la innovació agrícola. Scranton Agricultural Quarterly, 38(3), 67-81.

Steinbrenner, G. (1997). L’anàlisi cost-benefici de George Costanza: Un anàlisi del comportament de presa de riscos en el lloc de treball. New York Journal of Business, 12(4), 112-125.

Winger, J. A. (2010). L’art del debat: Un examen de la retòrica en el model de les Nacions Unides del Greendale Community College. Colorado Journal of Communication Studies, 19(2), 73-86. https://doi.org/10.1093/6seaons/1movie.

Ús

{% references() %}
+
+Les teves referències van aquí.
+
+Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva…).
+
+{% end %}
+

Spoiler

Aquest shortcode amaga el text fins que l’usuari fa clic per revelar-lo. Per exemple: A l’antiga Roma, el vomitorium era l’entrada a través de la qual les multituds entraven i sortien d’un estadi, no un espai especial utilitzat per a vomitar durant els àpats. Sí, de debó.

Com veus, el Markdown es renderitza.

Aquest shortcode té l’opció fixed_blur per difuminar el text “SPOILER”, en lloc de difuminar el contingut real. Per exemple: és innecessari esperar 24 hores abans de denunciar la desaparició d’una persona.

Ús

{{ spoiler(text="text a amagar", fixed_blur=false) }}
+

Contenidors

Contenidor ample

Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l’escriptori, ocuparà l’amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal.

Títol	Any	Director	Director de fotografia	Gènere	IMDb	Durada
Beoning	2018	Lee Chang-dong	Hong Kyung-pyo	Drama/Misteri	7.5	148 min
The Master	2012	Paul Thomas Anderson	Mihai Mălaimare Jr.	Drama/Història	7.1	137 min
The Tree of Life	2011	Terrence Malick	Emmanuel Lubezki	Drama	6.8	139 min

Ús

{% wide_container() %}
+
+Posa el teu bloc de codi, paràgraf, taula… aquí.
+
+El Markdown, per suposat, serà interpretat.
+
+{% end %}
+

Forçar direcció del text

Força la direcció del text d’un bloc de contingut. Substitueix tant la configuració global force_codeblock_ltr com la direcció general del document.

Accepta el paràmetre direction: la direcció de text desitjada. Pot ser “ltr” (d’esquerra a dreta) o “rtl” (de dreta a esquerra). Per defecte és “ltr”.

def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+

Ús

En una pàgina LTR podem forçar que un bloc de codi sigui RTL (com es mostra a dalt) de la següent manera:

{% force_text_direction(direction="rtl") %}
+
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+
+{% end %}
+

\ No newline at end of file diff --git a/ca/blog/shortcodes/social_cards/blog_shortcodes.jpg b/ca/blog/shortcodes/social_cards/blog_shortcodes.jpg new file mode 100644 index 0000000..3a60ea1 Binary files /dev/null and b/ca/blog/shortcodes/social_cards/blog_shortcodes.jpg differ diff --git a/ca/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg b/ca/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg new file mode 100644 index 0000000..d6daafb Binary files /dev/null and b/ca/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg differ diff --git a/ca/blog/shortcodes/social_cards/es_blog_shortcodes.jpg b/ca/blog/shortcodes/social_cards/es_blog_shortcodes.jpg new file mode 100644 index 0000000..f9a36dc Binary files /dev/null and b/ca/blog/shortcodes/social_cards/es_blog_shortcodes.jpg differ diff --git a/ca/blog/toc/index.html b/ca/blog/toc/index.html new file mode 100644 index 0000000..9bde3da --- /dev/null +++ b/ca/blog/toc/index.html @@ -0,0 +1,26 @@ + +~/tabi • Taula de contingut

Taula de contingut

1 de nov. 2022
10 mins de lectura
Etiquetes:
funcionalitat,
markdown,
tutorial

Actualitzat el 16 de febr. 2024
Veure canvis

Taula de contingut

Documentació

Habilitant (i posicionant) la Taula de Contingut

Hi ha dues formes d’habilitar la Taula de Contingut (TdC). Si vols que estigui just a sota del capçalera (com en aquesta pàgina), configura aquesta variable en el front matter del teu post:

[extra]
+toc = true
+

Si prefereixes col·locar la TdC a un altre lloc (per exemple, després d’una introducció), pots fer-ho afegint una línia amb aquest contingut allà on vulguis que aparegui la TdC:

<!-- toc -->
+

També pots utilitzar el shortcode {{ toc() }}, que simplement inserirà aquest text per tu (idea de Michael Clayton).

Aquest mètode renderitzarà la TdC sense el capçalera “Taula de Contingut”. Això et permet utilitzar un capçalera diferent (o cap) per la TdC, o fins i tot ocultar-la de forma predeterminada:

TdC oculta

El codi per aconseguir-ho:

<details>
+    <summary>TdC oculta</summary>
+    <!-- toc -->
+</details>
+

Nota: Si actives la TdC amb toc = true i també afegeixes  en algun lloc del teu text, obtindràs múltiples TdCs.

Si col·loques la TdC en un lloc diferent del predeterminat i li afegeixes un capçalera, segurament voldràs ocultar aquest capçalera de la TdC (consulta la secció per ocultar capçaleres). Pots fer-ho així:

+++
+title = "El títol del teu post"
+date = 2034-01-11
+
+[extra]
+toc_ignore_pattern = "^(Taula de contingut)"
++++
+
+Aquí va algun text introductori.
+
+### Taula de contingut
+
+<!-- toc -->
+
+## Primer encapçalament de contingut
+

Establint la profunditat màxima

Pots establir la profunditat màxima per la TdC especificant la variable toc_levels, que accepta un número enter entre 1 i 4:

[extra]
+toc_levels = 2
+

En aquest exemple, només els dos primers nivells d’encapçalaments s’inclourien a la TdC, independentment de les seves etiquetes HTML reals (h1, h2, h3, etc.). Si vols incloure només el nivell principal d’encapçalaments, estableix toc_levels = 1. El valor per defecte de toc_levels és 3.

Tingues en compte als teus lectors quan establertis toc_levels. Encara que pot ser temptador incloure molts nivells imbricats per a una navegació detallada, una TdC més curta i senzilla sovint és més amigable i menys aclaparadora.

Ocultant capçaleres de la TdC

És possible que vulguis amagar certes capçaleres. Per exemple, si el teu article té moltes Figures o Taules, aquestes podrien saturar la TdC. Pots ocultar capçaleres específiques a la TdC configurant la variable toc_ignore_pattern en la secció [extra] del front matter del teu post.

Aquesta variable espera una expressió regular (regex), ja que utilitza el test matching de Tera. El toc_ignore_pattern es prova contra el text del capçalera. Per exemple, per a la capçalera ### Lectura addicional, només el text Lectura addicional s’utilitzaria per comprovar si coincideix amb el patró.

Aquí tens alguns valors d’exemple per a toc_ignore_pattern juntament amb les capçaleres que amagarien:
toc_ignore_pattern Exclou capçaleres que…
Taula continguin “Taula”
^Figura comencin amb “Figura”
(?i)(taula|figura) comencin amb “Taula” o “Figura” (insensible a majúscules/minúscules)
\[Esborrany\]$ acabin amb “[Esborrany]”.

Pots provar la teva expressió regular en plataformes com regex101 per assegurar-te que funciona com esperes.

Nota: Les capacitats de “look-around”, incloent look-ahead i look-behind, no estan suportades.

Capçalera 1

Capçalera 2

Capçalera 3.1

Capçalera 4.1

Capçalera 4.2

Capçalera 3.2

Capçalera 4

Capçalera 2

Capçalera 3.1

Capçalera 4.1

Capçalera 4.2

Capçalera 3.2

Capçalera 4.1

\ No newline at end of file diff --git a/ca/blog/toc/social_cards/blog_toc.jpg b/ca/blog/toc/social_cards/blog_toc.jpg new file mode 100644 index 0000000..534e3cd Binary files /dev/null and b/ca/blog/toc/social_cards/blog_toc.jpg differ diff --git a/ca/blog/toc/social_cards/ca_blog_toc.jpg b/ca/blog/toc/social_cards/ca_blog_toc.jpg new file mode 100644 index 0000000..bf6ca88 Binary files /dev/null and b/ca/blog/toc/social_cards/ca_blog_toc.jpg differ diff --git a/ca/blog/toc/social_cards/es_blog_toc.jpg b/ca/blog/toc/social_cards/es_blog_toc.jpg new file mode 100644 index 0000000..355cc05 Binary files /dev/null and b/ca/blog/toc/social_cards/es_blog_toc.jpg differ diff --git a/ca/ca.jpg b/ca/ca.jpg new file mode 100644 index 0000000..985bb7c Binary files /dev/null and b/ca/ca.jpg differ diff --git a/ca/es.jpg b/ca/es.jpg new file mode 100644 index 0000000..c56f364 Binary files /dev/null and b/ca/es.jpg differ diff --git a/ca/index.html b/ca/index.html new file mode 100644 index 0000000..4338050 --- /dev/null +++ b/ca/index.html @@ -0,0 +1,2 @@ + +~/tabi

Publicacions recents

18 de setembre 2023

Fixada

Domina la configuració de tabi: guia completa

funcionalitat tutorial preguntes freqüents

Descobreix les múltiples maneres en què pots personalitzar tabi.

Llegir més →

08 de novembre 2024

Guia completa sobre sèries

funcionalitat tutorial preguntes freqüents sèries

Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts.

Llegir més →

12 de setembre 2023

Lost in Translation? Explora les capacitats multilingües de tabi

funcionalitat tutorial Preguntes Freqüents

Llegir més →

09 d’agost 2023

Personalitza el color de tabi i el tema per defecte

funcionalitat tutorial

Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic.

Llegir més →

Totes les entrades ⟶

Projectes destacats

git-sumi

El linter de missatges de commit no opinat basat en Rust.

iine

Botons d’apreciació centrats en la privadesa i accessibles per a la web petita/independent.

shuku

Condensa pel·lícules i sèries per quedar-te només amb el diàleg. Dissenyat per aprendre idiomes.

Tots els projectes ⟶

\ No newline at end of file diff --git a/ca/index.jpg b/ca/index.jpg new file mode 100644 index 0000000..d8c846d Binary files /dev/null and b/ca/index.jpg differ diff --git a/ca/privacy/index.html b/ca/privacy/index.html new file mode 100644 index 0000000..d2369bc --- /dev/null +++ b/ca/privacy/index.html @@ -0,0 +1,2 @@ + +~/tabi • Política de privacitat

Política de privacitat

31 d’oct. 2023
4 mins de lectura

Actualitzat el 12 de maig 2024
Veure canvis

Aquesta política de privacitat detalla com recollim i processem les teves dades en aquest lloc web.

Quines dades recollim?

Navegació general

Mentre navegues pel lloc, no es recull cap informació personal.

Comentaris

No recollim cap dada quan envieu un comentari o reacció, però GitHub sí que ho fa per proporcionar el servei.

Anàlisis

Per a la millora del lloc web, es recullen les dades no personals següents:

Referent: la font que t’ha portat a aquest lloc.
URL sol·licitat: la pàgina específica que visites.
Agent d’usuari: identifica el navegador i el sistema operatiu que utilitzes (per exemple, “Safari 17.0, Mac OS X”).
Nom del país: el país des d’on estàs visitant, determinat per la teva adreça IP.
Mida de pantalla: les dimensions de la pantalla del teu dispositiu.
Data i hora: quan accedeixes al lloc.
Sessió de navegació: un codi d’identificació temporal generat a partir de la adreça IP, informació del navegador i un número aleatori. Aquest s’utilitza per reconèixer la sessió de navegació durant 8 hores. Passat aquest temps, el codi s’esborra de la memòria i no s’emmagatzema enlloc.

No seguim els visitants únics a través de sessions, ni seguim quant de temps et quedes al lloc o on vas en marxar.

Com recollim aquestes dades?

Comentaris

Les dades associades als comentaris es recullen utilitzant giscus, una plataforma que permet comentaris basada en GitHub.

Anàlisis

Les dades no personals es recullen utilitzant una instància autoallotjada de GoatCounter, una plataforma d’anàlisis web de codi obert i respectuosa amb la privacitat.

Com utilitzarem les dades?

Les dades enviades a GitHub s’utilitzen per mostrar el teu comentari al lloc.

Les dades no personals s’utilitzen per generar estadístiques sobre el lloc, com el nombre de visitants per dia, o les pàgines i referents més populars. Aquestes dades s’utilitzen per millorar aquest lloc de demostració i el tema tabi. Pots veure les estadístiques generades a partir d’aquestes dades a la pàgina d’estadístiques públiques.

Totes les dades recollides estan públicament disponibles, ja sigui en forma de comentaris o estadístiques.

No utilitzem les dades per cap altre propòsit.

Com emmagatzemem les dades?

Les dades dels comentaris no s’emmagatzemen per Giscus, tal com s’especifica a la seva política de privacitat. Les dades s’emmagatzemen als servidors de GitHub. Vegeu la política de privacitat de GitHub.

Les dades d’anàlisis s’emmagatzemen en un servidor allotjat per Vultr. El servidor es troba a París, França.

El servidor segueix les millors pràctiques de la indústria per a la seguretat, incloent actualitzacions de seguretat automàtiques, una política de seguretat de contingut estricta, un tallafocs, accés SSH basat en claus, etc.

Quant de temps emmagatzemarem les dades?

Els comentaris s’emmagatzemen indefinidament, o fins que sol·licitis la seva eliminació.

La resta de dades s’emmagatzemen indefinidament.

Quins són els teves drets de protecció de dades?

Depenent del processament i de la base legal, hi ha diverses possibilitats disponibles per a que mantinguis el control sobre les teves dades personals:

Dret d’accés a les teves dades
Dret de modificar les teves dades
Dret d’oposar-se al processament de les teves dades personals
Dret de limitar el processament de les teves dades
Dret de supressió de les teves dades
Dret de retirar el teu consentiment

Si fas una sol·licitud, tenim un mes per respondre’t. Si vols exercir algun d’aquests drets, si us plau, posa’t en contacte amb nosaltres utilitzant la icona de correu electrònic al peu de pàgina del lloc.

Galetes (cookies)

El lloc no utilitza galetes.

Polítiques de privacitat d’altres llocs web

Aquest lloc web conté enllaços a altres llocs web. Aquesta política de privacitat només s’aplica a aquest lloc web, així que si cliques en un enllaç cap a un altre lloc web, hauries de llegir la seva política de privacitat.

Canvis a la política de privacitat

Mantindrem aquesta política de privacitat sota revisió regular i col·locarem qualsevol actualització en aquesta pàgina web. Pots veure l’última data d’actualització d’aquesta política de privacitat, així com l’historial de canvis sota el títol d’aquesta pàgina.

Com posar-te en contacte amb nosaltres

Si tens alguna pregunta sobre aquesta política de privacitat, les dades que tenim sobre tu, o vols exercir algun dels teus drets de protecció de dades, si us plau, no dubtis a posar-te en contacte amb nosaltres utilitzant la icona de correu electrònic al peu de pàgina del lloc.

\ No newline at end of file diff --git a/ca/projects/ca_projects.jpg b/ca/projects/ca_projects.jpg new file mode 100644 index 0000000..5de0a33 Binary files /dev/null and b/ca/projects/ca_projects.jpg differ diff --git a/ca/projects/doteki/doteki_logo.webp b/ca/projects/doteki/doteki_logo.webp new file mode 100644 index 0000000..ee76f41 Binary files /dev/null and b/ca/projects/doteki/doteki_logo.webp differ diff --git a/ca/projects/doteki/index.html b/ca/projects/doteki/index.html new file mode 100644 index 0000000..dc925b6 --- /dev/null +++ b/ca/projects/doteki/index.html @@ -0,0 +1,11 @@ + +~/tabi • dōteki

dōteki

dōteki actualitza el teu perfil de GitHub automàticament. Afegeix les teves últimes publicacions del blog, la música que escoltes o qualsevol altre contingut dinàmic mitjançant plugins.

GitHub • Lloc web • Documentació

Com funciona

Afegeix marcadors al teu README:

<!-- blog start -->
+<!-- blog end -->
+

Configura què hi va:

[sections.blog]
+plugin = "feed"
+url = "https://osc.garden/atom.xml"  # Substitueix amb el teu feed.
+
+[sections.last_updated]
+plugin = "current_date"
+inline = true
+

Configura l’Acció de GitHub.

Això és tot! El teu README s’actualitzarà automàticament.

Característiques

Sistema de plugins: Mostra entrades del blog, música, o crea el teu propi plugin
Configuració simple: Un arxiu TOML, una Acció de GitHub
Flexible: Cada plugin té les seves pròpies opcions (ordre, entrades màximes, format…)
Documentació detallada: Informació detallada sobre com configurar i utilitzar dōteki i els seus plugins. Inclou instruccions clares per als desenvolupadors que vulguin contribuir.

Documentació

Consulta la documentació per a:

\ No newline at end of file diff --git a/ca/projects/doteki/social_cards/projects_doteki.jpg b/ca/projects/doteki/social_cards/projects_doteki.jpg new file mode 100644 index 0000000..df96747 Binary files /dev/null and b/ca/projects/doteki/social_cards/projects_doteki.jpg differ diff --git a/ca/projects/es_projects.jpg b/ca/projects/es_projects.jpg new file mode 100644 index 0000000..ebd9689 Binary files /dev/null and b/ca/projects/es_projects.jpg differ diff --git a/ca/projects/git-sumi/git-sumi_logo.webp b/ca/projects/git-sumi/git-sumi_logo.webp new file mode 100644 index 0000000..90fd11b Binary files /dev/null and b/ca/projects/git-sumi/git-sumi_logo.webp differ diff --git a/ca/projects/git-sumi/index.html b/ca/projects/git-sumi/index.html new file mode 100644 index 0000000..6102640 --- /dev/null +++ b/ca/projects/git-sumi/index.html @@ -0,0 +1,2 @@ + +~/tabi • git-sumi

git-sumi

git-sumi és el linter de missatges de commit no opinat escrit en Rust.

GitHub • Lloc web • Documentació

Característiques principals

Regles personalitzables: Configura regles per a Conventional Commits, límits de longitud, ús de Gitmoji i més.
Informe d’errors clar: Proporciona errors detallats, fent que la correcció sigui senzilla i educativa.
Integració senzilla: Com a binari únic, git-sumi s’integra fàcilment al teu flux de treball. També pots fer servir l’Acció de GitHub per validar commits (o títols de PR) sense instal·lar res.

Bones pràctiques de desenvolupament

Cobertura de codi: 98% de cobertura en tests; un linter ha de ser fiable.
Integració i publicació contínua: Fluxos automatitzats per a testing i publicació de binaris multiplataforma a crates.io, PyPI i GitHub releases.
Documentació: Documentació completa amb guia ràpida, exemples, regles, integració, FAQ…

\ No newline at end of file diff --git a/ca/projects/git-sumi/social_cards/projects_git-sumi.jpg b/ca/projects/git-sumi/social_cards/projects_git-sumi.jpg new file mode 100644 index 0000000..3f609f8 Binary files /dev/null and b/ca/projects/git-sumi/social_cards/projects_git-sumi.jpg differ diff --git a/ca/projects/iine/iine_logo.webp b/ca/projects/iine/iine_logo.webp new file mode 100644 index 0000000..f6681dd Binary files /dev/null and b/ca/projects/iine/iine_logo.webp differ diff --git a/ca/projects/iine/index.html b/ca/projects/iine/index.html new file mode 100644 index 0000000..dab6ef5 --- /dev/null +++ b/ca/projects/iine/index.html @@ -0,0 +1,4 @@ + +~/tabi • iine

iine

Botons d’apreciació per al teu blog, jardí digital, portafoli… No cal compte. Sense seguiment.

GitHub • Web

Característiques

Sense marques de temps, sense IPs, sense seguiment
~3KB de JavaScript vanilla
Funciona sense JavaScript
Diverses icones: cor, polze amunt, vot positiu, o qualsevol emoji
Construït per a la web petita/independent
Gratuït per sempre
Accessible per disseny
Auto-hostejable

Inici ràpid

Afegeix botons d’apreciació al teu lloc amb dues línies. Carrega l’script:

<script defer src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>
+

Afegeix el botó:

<button class="iine-button" aria-hidden="true"></button>
+

Fet. Els teus visitants ja poden mostrar apreciació anònima pel teu contingut.

Per què iine?

Volia afegir botons de m’agrada/felicitacions/alegria/apreciació al meu blog sense registrar-me a res, i assegurant-me que els meus visitants no fossin rastrejats.

Esperant que altres ho trobin útil, vaig fer el servei públic (codi obert) i gratuït per sempre (almenys fins que doni suport a més de 100k llocs web).

Construït per a blogs, portafolis, jardins digitals, i qualsevol que cregui que la web hauria de ser més humana.

\ No newline at end of file diff --git a/ca/projects/iine/social_cards/projects_iine.jpg b/ca/projects/iine/social_cards/projects_iine.jpg new file mode 100644 index 0000000..bdb1d9a Binary files /dev/null and b/ca/projects/iine/social_cards/projects_iine.jpg differ diff --git a/ca/projects/index.html b/ca/projects/index.html new file mode 100644 index 0000000..69784a5 --- /dev/null +++ b/ca/projects/index.html @@ -0,0 +1,2 @@ + +~/tabi • Projectes

Projectes

git-sumi

El linter de missatges de commit no opinat basat en Rust.

iine

Botons d’apreciació centrats en la privadesa i accessibles per a la web petita/independent.

shuku

Condensa pel·lícules i sèries per quedar-te només amb el diàleg. Dissenyat per aprendre idiomes.

nemui

Ajusta gradualment el teu horari de son amb suport per horari d’estiu.

dōteki

Afegeix contingut dinàmic al teu perfil de GitHub amb un sistema intuïtiu de plugins.

zutsu

Una aplicació minimalista i privada de gestió de tasques.

ramu

Una aplicació web per practicar la lectura i comprensió auditiva de nombres en japonès.

tabi

Un tema de Zola ràpid, lleuger i modern amb suport multilingüe.

Calculadora de royalties de streaming

Una eina per calcular els royalties de streaming per a músics.

nani

Script Bash per crear URLs públiques a partir d’arxius o text en servidors remots.

\ No newline at end of file diff --git a/ca/projects/nani/index.html b/ca/projects/nani/index.html new file mode 100644 index 0000000..56b4d3f --- /dev/null +++ b/ca/projects/nani/index.html @@ -0,0 +1,36 @@ + +~/tabi • nani

nani

Etiquetes:
bash,
CLI

Si treballes en un servidor remot, saps que compartir arxius amb altres persones pot ser un procés feixuc. nani és un script en Bash dissenyat per simplificar aquesta tasca. Amb una sola comanda, pots convertir arxius locals o URLs en enllaços accessibles, facilitant el procés de compartir directament des del teu servidor.

Veure a GitHub

Característiques clau

Tot tipus d’arxius: gestiona directoris, arxius FLAC, arxius de text i fins i tot URLs a vídeos.
Personalitzable: adapta els ajustos editant l’script o un arxiu de configuració.
Notificacions: notificacions a l’escriptori i integració amb el portaretrats per a una millor experiència.

Inici ràpid

Col·loca nani en un directori dins del teu PATH.
Fes que l’script sigui executable.

Per a passos d’instal·lació més detallats, consulta la documentació completa.

Ús

$ nani Ruta/A/foto.png
+https://example.com/nani/hjRGLZB.png
+

Compartir un directori mantenint el seu nom original:

$ nani -o Ruta/A/Directori
+https://example.com/nani/Directori.zip
+

Pots configurar diverses opcions a través dels paràmetres. Aquí tens la sortida de nani --help:

Usage: nani [options] <infile>
+Provides public URL from input.
+
+Input handling:
+    Directory                       Will be stored using zip (or symbolic link)
+    FLAC                            Can be transcoded to MP3
+    Text (html, php...)             Extension can be set to .txt
+    Other files                     New copy/hard link/symbolic link at output directory
+    URL to video (e.g: youtube)     Downloaded using yt-dlp
+    Other URLs                      Downloaded using wget
+
+Modify the first lines of the script to change how nani behaves: quiet mode,
+enabling/disabling transcoding, length of the string, extension truncation...
+
+Settings and options:
+    -a, --alias      Revert the hard link setting
+    -c, --cleanup    Remove all files on /nani/ except index.html
+    -h, --help       Display this help and exit
+    -i, --insert     Open nano to enter text. Saved in output directory as .txt
+    -k, --keep       Output dir becomes /nani/k/, to set different cleanup rules
+    -l, --list       List files in output directory /nani/
+    -n, --name       Use custom name (e.g. nani -n DesiredName <file>)
+    -N, --notify     Revert the notify option
+    -o, --original   Preserve original file name
+    -p, --push       Send push notification
+    -q, --quiet      Revert the quiet setting
+    -s, --string     Force a certain string length (e.g. nani -s 32 <file>)
+    -t, --transcode  Revert the transcode setting
+    -x, --xclip      Revert the xclip setting
+    -y, --symbolic   Create a symbolic link for files and directories
+

\ No newline at end of file diff --git a/ca/projects/nani/nani_logo.webp b/ca/projects/nani/nani_logo.webp new file mode 100644 index 0000000..08d7175 Binary files /dev/null and b/ca/projects/nani/nani_logo.webp differ diff --git a/ca/projects/nani/social_cards/ca_projects_nani.jpg b/ca/projects/nani/social_cards/ca_projects_nani.jpg new file mode 100644 index 0000000..a5e960a Binary files /dev/null and b/ca/projects/nani/social_cards/ca_projects_nani.jpg differ diff --git a/ca/projects/nani/social_cards/es_projects_nani.jpg b/ca/projects/nani/social_cards/es_projects_nani.jpg new file mode 100644 index 0000000..520a876 Binary files /dev/null and b/ca/projects/nani/social_cards/es_projects_nani.jpg differ diff --git a/ca/projects/nani/social_cards/projects_nani.jpg b/ca/projects/nani/social_cards/projects_nani.jpg new file mode 100644 index 0000000..a454908 Binary files /dev/null and b/ca/projects/nani/social_cards/projects_nani.jpg differ diff --git a/ca/projects/nemui/index.html b/ca/projects/nemui/index.html new file mode 100644 index 0000000..cab67ee --- /dev/null +++ b/ca/projects/nemui/index.html @@ -0,0 +1,2 @@ + +~/tabi • nemui

nemui

nemui és una aplicació web que t’ajuda a fer una transició suau a un nou horari de son. El seu nom ve de les paraules japoneses per dormir (眠nemu) i transició (移i), que es llegeix com 眠いnemui (somnolent).

Prova-la ara • GitHub • Blog

Característiques

Interfície interactiva de rellotge inspirada en Apple
Ajust gradual de l’horari de son basat en la ciència del son
Suport complet per a l’horari d’estiu (DST)
Exportació a calendari (.ics) amb recordatoris per anar a dormir
Emmagatzematge local per seguir el teu progrés
Accessible: compatible amb navegació per teclat i lectors de pantalla

Per què nemui?

A diferència dels canvis bruscos que poden alterar el teu ritme circadià, nemui t’ajuda a ajustar el teu horari de son de manera gradual. És especialment útil per a:

Adaptar-te a nous horaris de feina/estudi
Preparar-te per a canvis de zona horària
Fer una transició suau durant els canvis d’hora
Corregir un horari de son desajustat

\ No newline at end of file diff --git a/ca/projects/nemui/nemui_logo.webp b/ca/projects/nemui/nemui_logo.webp new file mode 100644 index 0000000..454203f Binary files /dev/null and b/ca/projects/nemui/nemui_logo.webp differ diff --git a/ca/projects/nemui/social_cards/projects_nemui.jpg b/ca/projects/nemui/social_cards/projects_nemui.jpg new file mode 100644 index 0000000..d7b6ea0 Binary files /dev/null and b/ca/projects/nemui/social_cards/projects_nemui.jpg differ diff --git a/ca/projects/projects.jpg b/ca/projects/projects.jpg new file mode 100644 index 0000000..dce4ac0 Binary files /dev/null and b/ca/projects/projects.jpg differ diff --git a/ca/projects/ramu/index.html b/ca/projects/ramu/index.html new file mode 100644 index 0000000..f15a40e --- /dev/null +++ b/ca/projects/ramu/index.html @@ -0,0 +1,2 @@ + +~/tabi • ramu

ramu

ラraムmu és una aplicació web progressiva per practicar la lectura i comprensió auditiva de nombres en japonès. El nom reflecteix el seu propòsit: aconseguir accès aleatori (RAM; memòria d’accés aleatori) als nombres, en contraposició a una memòria seqüencial (1, 2, 3…).

Prova-la ara • GitHub • Article

Característiques

Pràctica amb nombres aràbics (123…) i japonesos (一二三…)
Dos modes de pràctica: lectura i comprensió auditiva
Rangs numèrics configurables (des de 0 fins a més de 100.000.000)
Pràctica de comptadors (個、本、匹…)
Funciona sense connexió com a aplicació web progressiva
Control complet per teclat (espai/→ per següent, esc per aturar)
Compatible amb lectors de pantalla per a la pràctica amb nombres aràbics

\ No newline at end of file diff --git a/ca/projects/ramu/media/ラム_demo.mp4 b/ca/projects/ramu/media/ラム_demo.mp4 new file mode 100644 index 0000000..0a96a11 Binary files /dev/null and b/ca/projects/ramu/media/ラム_demo.mp4 differ diff --git a/ca/projects/ramu/ramu_logo.webp b/ca/projects/ramu/ramu_logo.webp new file mode 100644 index 0000000..1eee491 Binary files /dev/null and b/ca/projects/ramu/ramu_logo.webp differ diff --git a/ca/projects/ramu/social_cards/projects_ramu.jpg b/ca/projects/ramu/social_cards/projects_ramu.jpg new file mode 100644 index 0000000..09757fd Binary files /dev/null and b/ca/projects/ramu/social_cards/projects_ramu.jpg differ diff --git a/ca/projects/shuku/index.html b/ca/projects/shuku/index.html new file mode 100644 index 0000000..fc992e4 --- /dev/null +++ b/ca/projects/shuku/index.html @@ -0,0 +1,2 @@ + +~/tabi • shuku

shuku

Etiquetes:
Python,
media,
linguistics,
CLI

shuku (縮しゅく小しょう: «minificació») crea versions condensades de pel·lícules i sèries conservant només els diàlegs.

GitHub • Blog • Documentació • PyPI

Característiques

Gestió intel·ligent de continguts

Detecció i correspondència automàtica de subtítols amb cerca difusa (fuzzy matching)
Selecció intel·ligent de pistes d’àudio/subtítols
Extracció de metadades (títol, temporada, número d’episodi)

Output flexible

Àudio condensat (MP3, FLAC, AAC, Opus…)
Vídeo condensat
Subtítols sincronitzats (SRT, ASS, o LRC per a apps tipus karaoke)

Alta personalització

Qualitat i còdecs d’àudio/vídeo configurables
Ajust de temps de subtítols i farciment
Filtra subtítols (efectes de so, lletres, capítols específics)
Suport per a arguments personalitzats de FFmpeg

Experiència de l’usuari

Multiplataforma: GNU+Linux, macOS i Windows
Logging detallat amb indicadors de progrés
Suport per a processament per lots

\ No newline at end of file diff --git a/ca/projects/shuku/shuku_logo.webp b/ca/projects/shuku/shuku_logo.webp new file mode 100644 index 0000000..900a598 Binary files /dev/null and b/ca/projects/shuku/shuku_logo.webp differ diff --git a/ca/projects/shuku/social_cards/projects_shuku.jpg b/ca/projects/shuku/social_cards/projects_shuku.jpg new file mode 100644 index 0000000..24d2bed Binary files /dev/null and b/ca/projects/shuku/social_cards/projects_shuku.jpg differ diff --git a/ca/projects/streaming-royalties-calculator/index.html b/ca/projects/streaming-royalties-calculator/index.html new file mode 100644 index 0000000..fe6ebe1 --- /dev/null +++ b/ca/projects/streaming-royalties-calculator/index.html @@ -0,0 +1,2 @@ + +~/tabi • Calculadora de royalties de streaming

Calculadora de royalties de streaming

La Calculadora de royalties de streaming permet als músics estimar els seus guanys de plataformes com Spotify, Apple Music, Instagram, TikTok i més.

Pots introduir una quantitat objectiu de guanys per veure quantes reproduccions es necessiten a cada plataforma, o introduir el nombre de reproduccions per servei per calcular les royalties esperades. Aquí tens una captura de pantalla:

Prova-la! • Codi font (JavaScript)

Característiques principals

Dades precises: Basades en l’últim any de les meves pròpies dades de royalties.
Múltiples plataformes: Inclou Tidal, Spotify, Apple Music, Facebook, Deezer, TikTok i més.
Modes de càlcul: Utilitza la taxa de pagament mitjana, mediana, mínima o màxima per estimar els guanys.

\ No newline at end of file diff --git a/ca/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg b/ca/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg new file mode 100644 index 0000000..f2402a9 Binary files /dev/null and b/ca/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg differ diff --git a/ca/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg b/ca/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg new file mode 100644 index 0000000..228b063 Binary files /dev/null and b/ca/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg differ diff --git a/ca/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg b/ca/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg new file mode 100644 index 0000000..3bb7530 Binary files /dev/null and b/ca/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg differ diff --git a/ca/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp b/ca/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp new file mode 100644 index 0000000..19c8fe4 Binary files /dev/null and b/ca/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp differ diff --git a/ca/projects/tabi/index.html b/ca/projects/tabi/index.html new file mode 100644 index 0000000..afa8e1a --- /dev/null +++ b/ca/projects/tabi/index.html @@ -0,0 +1,2 @@ + +~/tabi • tabi

tabi

Etiquetes:
web,
JavaScript

tabi és un tema modern i ric en funcionalitat per a Zola, un generador de llocs web estàtics molt ràpid.

Veure a GitHub • Demo i documentación

Característiques

Estableix qualsevol idioma com a predeterminat. Configura el teu lloc en xinès, espanyol, francès, hindi… o qualsevol altre idioma compatible. La interfície del tema es traduirà en conseqüència.
Integració amb repositoris remots a GitHub, GitLab, Gitea i Codeberg per a l’historial de commits i mostrar el codi font del lloc.
Tema clar i fosc. S’adapta a la configuració del sistema operatiu, amb un interruptor a la barra de navegació.
Suport multilingüe complet. Afegeix tants idiomes com vulguis i deixa que els teus usuaris triin amb el selector d’idioma.
Suport per a sèries per crear contingut seqüencial com tutorials, cursos i històries multipart.
Puntuació perfecta en Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO).
Suport per a Indieweb amb microformats, suport per a hcard i webmentions.
Suport per a diagrames de Mermaid per a crear diagrames i gràfics amb text.
Botons de «m’agrada» d’iine per mostrar apreciació anònima pel teu contingut.
Ressaltat de sintaxi de codi amb colors basats en Catppuccin Frappé.
Suport per a comentaris usant giscus, utterances, Hyvor Talk o Isso.
Cerca local amb una interfície accessible i multilingüe.
Tot el JavaScript es pot deshabilitar completament.
Codificació de correu per a protecció contra spam.
Mapa del lloc estilitzat i llegible per humans.
Capçaleres de seguretat personalitzables.
Feed Atom estilitzat i llegible per humans.
Enllaços de retrocés per a notes al peu.
Taula de continguts personalitzable.
Avís de drets d’autor personalitzat.
Botó de copiar per a blocs de codi.
URL canòniques personalitzables.
Targetes per a xarxes socials.
Botons de navegació ràpida.
Shortcodes personalitzats.
Skins personalitzables.
Publicacions fixades.
Pàgina de projectes.
Disseny responsive.
Suport de KaTeX.
Enllaços socials.
Pàgina d’arxiu.
Etiquetes.

Pràctiques de desenvolupament

Conventional Commits i Gitmoji: els missatges de commit segueixen formats estandarditzats per facilitar la llegibilitat.
Seguiment d’incidències: cada error o nova funcionalitat té el seu propi tiquet, que s’enllaça amb els commits de codi i PRs o problemes relacionats.
Comentaris detallats: els tiquets es documenten amb imatges, vídeos i descripcions detallades per facilitar una comunicació i resolució de problemes efectives.
Referències creuades: enllacem tots els tiquets amb els commits de codi, pull requests o problemes relacionats per a una traçabilitat completa.

Evolució del projecte

tabi va néixer com a disseny per al meu lloc web personal, osc.garden. Malgrat les seves arrels personals, des del principi es van implementar bones pràctiques per assegurar la qualitat i la mantenibilitat. Des d’aleshores, el tema ha aconseguit atraure una comunitat activa de col·laboradors a GitHub.

Inicia el teu recorregut com a escriptor amb tabi

Tens alguna cosa a dir. Potser vols parlar sobre com els lingüistes encara no han acordat una definició de “paraula”, o sobre la teva experiència explorant els diferents palos del flamenc, o de com vas aconseguir resoldre un error d’un projecte de codi obert popular.

tabi t’ofereix la base ideal per al teu espai d’escriptura, permetent-te centrar-te en les teves paraules mentre Zola i tabi s’encarreguen de l’aspecte tècnic. Submergeix-te en el món dels blogs amb un sistema que fa que cada publicació sigui un plaer escriure i llegir. La teva veu té valor; comparteix-la amb el món.

\ No newline at end of file diff --git a/ca/projects/tabi/social_cards/ca_projects_tabi.jpg b/ca/projects/tabi/social_cards/ca_projects_tabi.jpg new file mode 100644 index 0000000..6fec2e6 Binary files /dev/null and b/ca/projects/tabi/social_cards/ca_projects_tabi.jpg differ diff --git a/ca/projects/tabi/social_cards/es_projects_tabi.jpg b/ca/projects/tabi/social_cards/es_projects_tabi.jpg new file mode 100644 index 0000000..4d58e5b Binary files /dev/null and b/ca/projects/tabi/social_cards/es_projects_tabi.jpg differ diff --git a/ca/projects/tabi/social_cards/projects_tabi.jpg b/ca/projects/tabi/social_cards/projects_tabi.jpg new file mode 100644 index 0000000..11f51c8 Binary files /dev/null and b/ca/projects/tabi/social_cards/projects_tabi.jpg differ diff --git a/ca/projects/tabi/tabi.webp b/ca/projects/tabi/tabi.webp new file mode 100644 index 0000000..c05d2a7 Binary files /dev/null and b/ca/projects/tabi/tabi.webp differ diff --git a/ca/projects/zutsu/index.html b/ca/projects/zutsu/index.html new file mode 100644 index 0000000..7f529e9 --- /dev/null +++ b/ca/projects/zutsu/index.html @@ -0,0 +1,2 @@ + +~/tabi • zutsu

zutsu

Prova-la ara • GitHub • Article

ずzuつtsu és una aplicació web de gestió de tasques dissenyada per ajudar-te a centrar-te en una tasca cada vegada. El nom ve de 一つhitotsuずつzutsu, que significa «d’un en un» en 日本語japonès.

Per què?

Volia substituir els esdeveniments de calendari inflexibles per a les sessions d’estudi per alguna cosa senzilla i adaptable. Sense aplicacions de tercers, sense sincronització al núvol, només un espai centrat en a la gestió de tasques.

Funcionalitats

Principals

Gestió de tasques amb possibilitat de reordenar-les arrossegant
Temporitzador amb durada personalitzable per tasca
Privada i offline —sense comptes, seguiment ni emmagatzematge al servidor
Importació/exportació de llistes de tasques (JSON)

Utilitats

Temporitzador Pomodoro
Calendari d’activitat (vista de 30 dies)
Comptador i cronòmetre
Espai per prendre notes
Selectors aleatoris

Qualitat de vida

Tema fosc i clar
Notificacions del navegador i so
Dreceres de teclat
Disseny responsive

\ No newline at end of file diff --git a/ca/projects/zutsu/social_cards/projects_zutsu.jpg b/ca/projects/zutsu/social_cards/projects_zutsu.jpg new file mode 100644 index 0000000..9373a35 Binary files /dev/null and b/ca/projects/zutsu/social_cards/projects_zutsu.jpg differ diff --git a/ca/projects/zutsu/zutsu_logo.webp b/ca/projects/zutsu/zutsu_logo.webp new file mode 100644 index 0000000..8432797 Binary files /dev/null and b/ca/projects/zutsu/zutsu_logo.webp differ diff --git a/ca/tags/analisi-de-dades/atom.xml b/ca/tags/analisi-de-dades/atom.xml new file mode 100644 index 0000000..9b4cc66 --- /dev/null +++ b/ca/tags/analisi-de-dades/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + anàlisi de dades + ~/tabi - anàlisi de dades + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/analisi-de-dades/atom.xml + diff --git a/ca/tags/analisi-de-dades/index.html b/ca/tags/analisi-de-dades/index.html new file mode 100644 index 0000000..fc64c62 --- /dev/null +++ b/ca/tags/analisi-de-dades/index.html @@ -0,0 +1,2 @@ + +~/tabi • anàlisi de dades

anàlisi de dades

Calculadora de royalties de streaming

música interactiu web app web JavaScript anàlisi de dades

Una eina per calcular els royalties de streaming per a músics.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/automatitzacio/atom.xml b/ca/tags/automatitzacio/atom.xml new file mode 100644 index 0000000..d60608a --- /dev/null +++ b/ca/tags/automatitzacio/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + automatització + ~/tabi - automatització + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/automatitzacio/atom.xml + diff --git a/ca/tags/automatitzacio/index.html b/ca/tags/automatitzacio/index.html new file mode 100644 index 0000000..610d681 --- /dev/null +++ b/ca/tags/automatitzacio/index.html @@ -0,0 +1,2 @@ + +~/tabi • automatització

automatització

git-sumi

Git Rust Continuous Integration GitHub Actions CLI automatització

El linter de missatges de commit no opinat basat en Rust.

Llegir més →

dōteki

GitHub Actions automatització Python

Afegeix contingut dinàmic al teu perfil de GitHub amb un sistema intuïtiu de plugins.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/backend/atom.xml b/ca/tags/backend/atom.xml new file mode 100644 index 0000000..c7e9c59 --- /dev/null +++ b/ca/tags/backend/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + backend + ~/tabi - backend + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/backend/atom.xml + diff --git a/ca/tags/backend/index.html b/ca/tags/backend/index.html new file mode 100644 index 0000000..5671698 --- /dev/null +++ b/ca/tags/backend/index.html @@ -0,0 +1,2 @@ + +~/tabi • backend

backend

iine

web JavaScript privadesa backend

Botons d’apreciació centrats en la privadesa i accessibles per a la web petita/independent.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/bash/atom.xml b/ca/tags/bash/atom.xml new file mode 100644 index 0000000..21dbc1e --- /dev/null +++ b/ca/tags/bash/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + bash + ~/tabi - bash + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/bash/atom.xml + diff --git a/ca/tags/bash/index.html b/ca/tags/bash/index.html new file mode 100644 index 0000000..6a5c5c3 --- /dev/null +++ b/ca/tags/bash/index.html @@ -0,0 +1,2 @@ + +~/tabi • bash

bash

nani

bash CLI

Script Bash per crear URLs públiques a partir d’arxius o text en servidors remots.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/cli/atom.xml b/ca/tags/cli/atom.xml new file mode 100644 index 0000000..b654347 --- /dev/null +++ b/ca/tags/cli/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + CLI + ~/tabi - CLI + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/cli/atom.xml + diff --git a/ca/tags/cli/index.html b/ca/tags/cli/index.html new file mode 100644 index 0000000..70ca4bc --- /dev/null +++ b/ca/tags/cli/index.html @@ -0,0 +1,2 @@ + +~/tabi • CLI

CLI

git-sumi

Git Rust Continuous Integration GitHub Actions CLI automatització

El linter de missatges de commit no opinat basat en Rust.

Llegir més →

nani

bash CLI

Script Bash per crear URLs públiques a partir d’arxius o text en servidors remots.

Llegir més →

shuku

Python media linguistics CLI

Condensa pel·lícules i sèries per quedar-te només amb el diàleg. Dissenyat per aprendre idiomes.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/continuous-integration/atom.xml b/ca/tags/continuous-integration/atom.xml new file mode 100644 index 0000000..cc2776a --- /dev/null +++ b/ca/tags/continuous-integration/atom.xml @@ -0,0 +1,21 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + Continuous Integration + ~/tabi - Continuous Integration + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zolahttps://welpo.github.io/tabi/ca/tags/continuous-integration/atom.xml + diff --git a/ca/tags/continuous-integration/index.html b/ca/tags/continuous-integration/index.html new file mode 100644 index 0000000..6b939a6 --- /dev/null +++ b/ca/tags/continuous-integration/index.html @@ -0,0 +1,2 @@ + +~/tabi • Continuous Integration

Continuous Integration

git-sumi

Git Rust Continuous Integration GitHub Actions CLI automatització

El linter de missatges de commit no opinat basat en Rust.

Llegir més →

← Totes les etiquetes

\ No newline at end of file diff --git a/ca/tags/funcionalitat/atom.xml b/ca/tags/funcionalitat/atom.xml new file mode 100644 index 0000000..d2ccca7 --- /dev/null +++ b/ca/tags/funcionalitat/atom.xml @@ -0,0 +1,131 @@ + + + + + https://welpo.github.io/tabi + + • + + Aquest és un canal web, també conegut com a canal Atom. Subscriu-te copiant l'URL de la barra d'adreces al teu lector de notícies. Visita About Feeds per aprendre més i començar. És gratuït. + Visita la web + Publicacions recents + Actualitzat el $DATE + + date + funcionalitat + ~/tabi - funcionalitat + tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. + + + Zola2025-09-14T00:00:00+00:00https://welpo.github.io/tabi/ca/tags/funcionalitat/atom.xml + Guia completa sobre sèries + 2024-11-08T00:00:00+00:00 + 2025-02-21T00:00:00+00:00 + + welpo + + + https://welpo.github.io/tabi/ca/blog/series/ +