اللاياوت ورأس الصفحة

اللاياوت مكوّن عادي

مفيش نوع ملف خاص. اللاياوت مكوّن Astro فيه slot، والصفحات بتلف نفسها بيه. الاتفاقة إنه يعيش في src/layouts، بس ده مش قانون.

---interface Props {  title: string;  description?: string;}const { title, description = "كشري ستيشن" } = Astro.props;const canonical = new URL(Astro.url.pathname, Astro.site);---<html lang="ar" dir="rtl">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>    <meta name="description" content={description} />    <link rel="canonical" href={canonical.href} />    <meta property="og:title" content={title} />  </head>  <body>    <header><a href="/">كشري ستيشن</a></header>    <slot />    <footer>آخر الطبق</footer>  </body></html>

---import Base from "../layouts/Base.astro";---<Base title="المنيو">  <h1>اختار طبقك</h1></Base>

الـ <head> في الصفحة البيت جوه اللاياوت بيتدمج مع <head> اللاياوت. تقدر تزود وسم من الصفحة وهو يطلع في الرأس، مش يضيع.

لاياوت جوه لاياوت عادي: Post يلف المحتوى ويستخدم Base للهيكل. متعملش سلسلة طويلة من غير سبب.

Markdown له لاياوت من الـ frontmatter

صفحة .md جوّه src/pages مش فيها مكوّن تستورده. بتمرر اللاياوت في الـ frontmatter:

---layout: ../layouts/Base.astrotitle: حكاية الطبقdescription: إزاي الكشري وصل---متن المقالة هنا.

اللاياوت بيستقبل frontmatter كـ prop فيها المفاتيح دي، والمحتوى يروح للـ slot. الأسماء الدقيقة للـ props بتاعة Markdown راجعها في الدليل لو المحرر اتلخبط، لأن الشكل اتظبط أكتر من مرة عبر النسخ.

عنوان الموقع مش في الكونفج

site في الكونفج عنوان النشر عشان الروابط المطلقة والسايت ماب. عنوان الصفحة ووصفها وصورة المشاركة حقول بتكتبها أنت في head. نمط شغال: مكوّن Head.astro ياخد title و description، واللاياوت يستخدمه. كده كل الصفحات ماشية على نفس العقد.

من غير site في الكونفج، Astro.site يبقى فاضي والـ canonical المطلق مش هيتبني. حط العنوان الحقيقي قبل النشر.

إيه اللي متتحطش في اللاياوت

سكربت تحليلات أو بيكسل حطه في اللاياوت مرة، ومتكررش في كل صفحة. جزيرة تفاعلية في الهيدر (قائمة موبايل) حط عليها client:* في اللاياوت، فتتبعت مرة واحدة لكل الصفحات اللي بتستخدمه. ده قرار أداء: هيدر متفاعل يعني جافاسكربت على كل الصفحات.

خلّصت الفصل لما

• تلف صفحة بـ layout فيه slot
• تطلع title و description و canonical من props
• تعرف إن head الصفحة يندمج مع head اللاياوت
• تربط صفحة Markdown بـ layout في الـ frontmatter
• متكتبش عنوان SEO جوه astro.config