كل الرموز المختصرة (shortcodes) التي يمكنك استخدامها في مقال بالمدونة أو في أي ملف MDX آخر، ومع كل منها الكود الذي ينتجه. توجد القائمة في src/lib/shortcodes.ts.
مربع التنبيه
أبرِز نصيحة أو تحذيرًا خارج سياق النص. قيمة type هي note (الافتراضية) أو tip أو warning أو danger. وبدون title، يظهر اسم النوع.
<Callout type="tip" title="حدّد محبس الإغلاق أولًا">
قبل أن تلمس حنفية أو مرحاضًا، أغلق المحبس الصغير تحته وتأكد من توقف الماء.
</Callout>ملاحظة
غالبًا ما يحتاج المرحاض الذي يسيل ماؤه باستمرار إلى سدادة جديدة، لا إلى مرحاض جديد. وثمن القطعة بضعة دولارات.
حدّد محبس الإغلاق أولًا
قبل أن تلمس حنفية أو مرحاضًا، أغلق المحبس الصغير تحته وتأكد من توقف الماء.
تحذير
لا تسكب أبدًا مادة كيميائية لفتح المصارف في مصرف مسدود تمامًا. فهي تبقى في الأنبوب وقد تُتلف الوصلات القديمة.
افصل الكهرباء والغاز أولًا
قبل تفريغ سخان المياه، افصل القاطع الكهربائي أو اضبط محبس الغاز على وضع الشعلة الدليلية. فالعنصر الجاف يحترق في ثوانٍ.
ما زال <Notice> يعمل ويعرض مربع التنبيه نفسه: info ← note، وsuccess ← tip، وwarning ← warning، وerror ← danger.
الخطوات
ضع العناوين داخل <Steps> لترقيمها. يبدأ كل عنوان ## أو ### خطوة، وكل ما تحته ينتمي إلى تلك الخطوة.
<Steps>
### أغلق المياه
أدر المحبس تحت الحوض باتجاه عقارب الساعة حتى يتوقف، ثم افتح الحنفية لتخفيف الضغط.
### استبدل الخرطوشة
انزع المقبض، وفك صامولة التثبيت، وخذ الخرطوشة القديمة إلى المتجر لتشتري مثلها.
### افحص التسرّب
أعد فتح المياه ببطء، وأمسك منديلًا ورقيًا جافًا تحت كل وصلة لمدة دقيقة.
</Steps>أغلق المياه
أدر المحبس تحت الحوض باتجاه عقارب الساعة حتى يتوقف، ثم افتح الحنفية لتخفيف الضغط.
استبدل الخرطوشة
انزع المقبض، وفك صامولة التثبيت، وخذ الخرطوشة القديمة إلى المتجر لتشتري مثلها.
افحص التسرّب
أعد فتح المياه ببطء، وأمسك منديلًا ورقيًا جافًا تحت كل وصلة لمدة دقيقة.
قائمة الفحص
يحوّل <ListCheck> قائمة Markdown إلى قائمة فحص. أضف columns={2} لعرض عمودين على الشاشات الأعرض.
<ListCheck columns={2}>
- **سخان المياه**: فحص قضيب الأنود وشطف الخزان.
- **محابس الإغلاق**: تشغيل كل محبس وفحصه من التنقيط.
- **المصارف**: إزالة الرواسب من السيفونات واختبار التدفق.
- **المراحيض**: السدادة وصمام التعبئة وحلقة الشمع.
</ListCheck>- سخان المياه: فحص قضيب الأنود وشطف الخزان.
- محابس الإغلاق: تشغيل كل محبس وفحصه من التنقيط.
- المصارف: إزالة الرواسب من السيفونات واختبار التدفق.
- المراحيض: السدادة وصمام التعبئة وحلقة الشمع.
بطاقة العمل
يعرض <JobTicket> قائمة على شكل بطاقة عمل. يصبح كل عنصر في القائمة صفًا مؤشَّرًا. قيمة total نص حر؛ ومع service وبدون total، تعرض البطاقة سعر «ابتداءً من» لتلك الخدمة من بطاقة الأسعار، ويفتح زر «احصل على السعر» حاسبة التقدير والخدمة محددة.
<JobTicket title="قبل وصول السبّاك" code="TIP-021" label="فتح انسداد" service="drain-cleaning">
- أفرغ الخزانة تحت الحوض
- حدّد مكان محبس المياه الرئيسي
- اترك مفتاحًا أو رمز الباب
</JobTicket>رقم TIP-021
فتح انسداد
قبل وصول السبّاك
- أفرغ الخزانة تحت الحوض
- حدّد مكان محبس المياه الرئيسي
- اترك مفتاحًا أو رمز باب
ابتداءً من$129
شريط السعر
<PriceCta> هو السطر الذي ينتهي به كل مقال في المدونة: سعر «ابتداءً من» للخدمة وزر يقود إلى حاسبة التقدير. تعرضه مقالات المدونة تلقائيًا من حقل service في frontmatter؛ واستخدم الرمز المختصر في الصفحات الأخرى.
<PriceCta service="water-heater-repair" />الزر
<Button label="Book a plumber" url="/book/" />
<Button variant="outline" label="Call us" url="/contact/" />
<Button variant="text" label="See all services" url="/services/" />القائمة المطوية
الصفوف التي تحمل قيمة group نفسها يغلق بعضها بعضًا. ويفتح expanded="true" الصف عند التحميل.
<Accordion label="هل يجب أن يكون أحد موجودًا أثناء الزيارة؟" group="visit" expanded="true">
يجب أن يوافق أحد على السعر المكتوب. وبعد ذلك اترك مفتاحًا أو رمز الباب، ونرسل إليك الصور برسالة نصية عند المغادرة.
</Accordion>هل يجب أن يكون أحد موجودًا أثناء الزيارة؟
يجب أن يوافق أحد على السعر المكتوب. وبعد ذلك اترك مفتاحًا أو رمز باب، ونرسل إليك الصور برسالة نصية عند المغادرة.
هل تحضرون القطع؟
نعم: تحمل السيارة المحابس والخراطيش والسيفونات وخراطيم التغذية الشائعة. وما عدا ذلك نطلبه ونخبرك بتكلفته أولًا.
ماذا لو فشل الإصلاح؟
أخبرنا ونعود لإصلاحه مجانًا بموجب ضمان العمل لمدة سنة.
علامات التبويب
<Tabs>
<Tab name="المطبخ">
افحص خراطيم التغذية، واربط السيفون، واختبر خرطوم تصريف غسالة الصحون.
</Tab>
<Tab name="الحمام">
استبدل سدادة المرحاض، وأعد إحكام فوهة حوض الاستحمام، وافحص خلاط الدش من
التنقيط.
</Tab>
</Tabs>افحص خراطيم التغذية، واربط السيفون، واختبر خرطوم تصريف غسالة الصحون.
قائمة الصور
صور في شبكة، مع caption اختياري تحت كل منها. تحدد width="1/2" أو "1/3" حصة الصورة من الصف؛ ويضيف videoSrc زر تشغيل.
<ImageList>
<ImageItem
imageSrc="/images/blog/frozen-pipes.jpg"
imageAlt="جليد متدلٍّ على أنبوب خارجي"
caption="ثبّت الوصلة وأنت تدير الصامولة."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/slow-drain.jpg"
imageAlt="ماء يتصرّف من حوض أبيض"
caption="يظهر التسرّب البطيء خلف البلاط هنا أولًا."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/leak-signs.jpg"
imageAlt="عدادات مياه على أنابيب التغذية"
caption="ألقِ نظرة تحت الحوض مرة في الشهر."
/>
</ImageList>
الفيديو
<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/heroes/plumber-kitchen-sink-wide.jpg" />النص
غامق باستخدام **، و مائل باستخدام _، و مشطوب باستخدام ~~، وكود مضمّن باستخدام العلامات المائلة (backticks). وتُكتب الروابط هكذا [text](/url/): خدماتنا.
يبدأ الاقتباس بالعلامة
>. استخدمه لاقتباس قصير من عميل أو من أحد السبّاكين.
| العمل | الوقت | السبّاكون |
|---|---|---|
| استبدال سخان المياه | 3 ساعات | 2 |
| إصلاح مرحاض | ساعة | 1 |
| خرطوشة حنفية | 45 دقيقة | 1 |
## Heading 2 [.custom-class]
### Heading 3أضف فئات إلى العنوان بين قوسين، مثل [.h5] لحجم أصغر.
