المكوّنات
مكوّنات نظام التصميم بصيغة Markdown، ومعها المعارض والفواصل والمخططات والتضمينات.
مكوّنات تكتبها في Markdown، كما يتيح Zola منذ الإصدار 0.23: {{ <name … /> }}، أو {% <name …> %} و{% </name> %} حول نص بصيغة Markdown. وتُكتب القيمة التي ليست نصًا بين قوسين معقوصين: {["8", "19"]}، {true}. يكتب كل منها بنية مكوّن نظام التصميم كما تنص عليها مواصفاته بالضبط. تراها هنا تعمل، ومعها طريقة كتابتها. أما المعارض والمخططات والتضمينات فتراها كلها تعمل في مقالتها.
تنبيه
رسالة داخل الصفحة: معلومة (الافتراضي)، أو نجاح، أو تحذير، أو خطر للأخطاء وحدها. وإن لم يكن له عنوان، فعنوانه كلمة نوعه.
قبل أن تبدأ
يحتاج القالب إلى Zola بالإصدار 0.23 أو أحدث.
تنبيه
تغيير base_url يغيّر عنوان كل صفحة.
{% <notice kind="warning" title="عنوان اختياري"> %}
نص بصيغة Markdown.
{% </notice> %}إفصاح
تفاصيل لا يحتاجها أكثر الناس، مطوية. وتقول القيمة بجانب الملخص ما في داخلها وهي مغلقة.
إصدارات Zola المدعومة 0.23 وما بعده
القالب مكتوب بالمكوّنات وبـ Tera 2، وقد وصلا في الإصدار 0.23.
{% <details summary="…" value="…"> %}
نص بصيغة Markdown.
{% </details> %}اقتباس
هذا أول قالب لم تبدُ فيه الصفحات العربية كأنها فكرة لاحقة.
{% <quote name="…" role="…"> %}
كلماته هو.
{% </quote> %}أرقام وخطوات
-
1
اكتشف
ابدأ بالمشكلة الحقيقية.
-
2
صمّم
ثم شكلها.
{{ <stats labels={["…", "…"]} values={["8", "19"]} /> }}
{{ <steps titles={["…", "…"]} bodies={["…", "…"]} /> }}أزرار وشارات ومفاتيح
جديد في هذا الإصدار: تجريبي. ابحث بـ Ctrl+K.
{{ <button url="@/docs/installation.md" text="ثبّت القالب" /> }}
{{ <badge text="تجريبي" kind="warning" /> }}
{{ <kbd keys="Ctrl+K" /> }}أمر وشيفرة
zola build
{{ <command text="zola build" /> }}
{% <code caption="config.toml"> %}
…كتلة شيفرة…
{% </code> %}فاصل
فاصل بين المشاهد أو الأقسام، بخمسة عشر نمطًا، منها النجمة العربية ونجمة الزخرفة.
{{ <separator style="arabic" /> }}
{{ <separator style="star" gap="lg" /> }}مخطط Mermaid
مخطط يُكتب نصًّا، ويُرسم في المتصفح بألوان القالب، ثم يُرسم من جديد إذا بدّل القارئ المظهر. لا يُحمَّل نص Mermaid البرمجي إلا في الصفحة التي فيها مخطط.
flowchart RL
system[إعداد النظام] --> theme{المظهر}
choice[اختيار القارئ] --> theme
theme --> light[فاتح]
theme --> dark[داكن]
{% <mermaid label="ما يعرضه المخطط، لقارئات الشاشة"> %}
flowchart RL
A --> B
{% </mermaid> %}معرض وتضمينات
- معرض الصور التي بجانب الصفحة:
{{ <gallery /> }} - فيديو من YouTube:
{{ <youtube id="…" title="…" /> }} - ملف PDF مع رابط لتنزيله:
{{ <pdf src="report.pdf" /> }} - gist من GitHub:
{{ <gist user="…" gist="…" /> }} - منشور من Instagram:
{{ <instagram id="…" /> }}
تُحمَّل التضمينات من مواقعها، وفي الصفحات التي فيها وحدها. تجد معاملات كل منها في الصفحة الإنجليزية.