تعرف في هذا الدرس من دليل تعلم Astro على نظام الصفحات Astro ، آلية عمل ملفات .astro، مفهوم Frontmatter، وتمرير البيانات، وكيفية إنشاء Layouts. شرح عملي شامل مع أمثلة جاهزة للتطبيق.
مقدمة الجزء
الآن بعد أن أنشأنا أول مشروع، وحركنا أول مكوّن، ووضعنا أول صفحة…
حان الوقت لفهم “قلب” Astro الحقيقي:
كيف يعمل نظام الصفحات؟
وما هو سر ملفات .astro؟
ولماذا لا نحتاج Router؟
اليوم سنغوص في هذا العالم بطريقة سهلة، ممتعة، وعمليّة جدًا.
أولًا: كيف يعمل نظام الصفحات في Astro؟
القاعدة الذهبية التي تجعل Astro بسيطاً هي:
كل ملف داخل
src/pages= صفحة تلقائيًا.
يعني:
src/pages/index.astro → /
src/pages/about.astro → /about
src/pages/blog/post.astro → /blog/post
بدون إعدادات.
بدون Router.
بدون ملفات config معقدة.
عندما تحفظ ملفًا في pages/ يصبح صفحة Static جاهزة.
مثال سريع:
src/pages/contact.astro
<h1>اتصل بنا</h1>
<p>هذه صفحة Contact تم إنشاؤها دون أي إعداد إضافي.</p>
اكتب في المتصفح:
http://localhost:4321/contact
صفحة جديدة جاهزة.
ثانياً: ما هو ملف .astro؟
ملفات .astro هي قلب Astro.
وهي عبارة عن مزيج ذكي من:
- HTML
- JavaScript (اختياري)
- مكوّنات
- CSS
- Frontmatter
صيغة الملف تحتوي على قسمين رئيسيين:
1) قسم الـ Frontmatter
هذا الجزء بين --- و --- في أعلى الملف.
يسمح لك بكتابة JavaScript أو TypeScript للتحضير قبل عرض الصفحة.
مثال:
---
const pageTitle = "مرحبا بك!";
const today = new Date().toLocaleDateString();
---
2) قسم HTML
وهو الجزء الذي يرى المستخدم في المتصفح.
<h1>{pageTitle}</h1>
<p>التاريخ اليوم: {today}</p>
مثال ملف كامل:
---
const username = "أحمد";
---
<html lang="ar">
<body>
<h1>أهلاً، {username}</h1>
<p>مرحباً بك في موقعك المبني بـ Astro!</p>
</body>
</html>
النتيجة:
أهلاً، أحمد
مرحباً بك في موقعك المبني بـ Astro!
ثالثًا: تمرير المتغيرات للصفحة (Props)
نفس فكرة Components في React أو Vue، يمكنك تمرير بيانات لصفحة Astro من Layout.
مثال:
ملف Layout:
src/layouts/Base.astro
---
const { title } = Astro.props;
---
<html lang="ar">
<body>
<header>
<h1>{title}</h1>
</header>
<slot />
</body>
</html>
الآن صفحة تستخدم هذا Layout:
---
import Base from "../layouts/Base.astro";
---
<Base title="مقال جديد">
<p>هذا المحتوى داخل صفحة تستخدم Layout.</p>
</Base>
النتيجة:
عنوان + محتوى — بدون تكرار الكود.
رابعاً: مفهوم Slot (أهم جزء في Layouts)
تخيل أن Layout هو قالب ثابت يحتوي على أجزاء لا تتغير:
- الهيدر
- الفوتر
- اللون العام
- الحواف
- القوائم
لكن وسط الصفحة يتغير. هنا يأتي دور:
<slot />
يمثل المكان الذي سيظهر فيه محتوى الصفحة.
خامسًا: الصفحات الديناميكية (Dynamic Routes)
Astro يدعم الصفحات الديناميكية بشكل بسيط جدًا مثل Next.js.
سيناريو:
لديك مدونة، وتريد صفحة لكل مقال:
/posts/how-to-learn-astro
/posts/astro-best-practices
/posts/intro-to-markdown
الطريقة:
أنشئ ملفًا اسمه:
src/pages/posts/[slug].astro
الكود:
---
const { slug } = Astro.params;
---
<h1>أنت الآن في صفحة: {slug}</h1>
الآن افتح:
/posts/anything-you-want
وسيظهر:
أنت الآن في صفحة: anything-you-want
سادسًا: قراءة ملفات Markdown داخل الصفحات
لو لديك مقال Markdown داخل:
src/content/blog/first-post.md
يمكن قراءته في صفحة Astro:
---
import { getEntryBySlug } from 'astro:content';
const post = await getEntryBySlug("blog", "first-post");
const { Content } = await post.render();
---
<h1>{post.data.title}</h1>
<article>
<Content />
</article>
Astro يحول Markdown تلقائيًا إلى HTML جاهز.
سابعًا: مثال صفحة كاملة مع Layout + Frontmatter + محتوى
النتيجة التي نطمح لها:
صفحة نظيفة
Layout ثابت
عنوان ديناميكي
محتوى مخصص للمقال
الصفحة:
---
import Base from "../layouts/Base.astro";
const title = "صفحة عن Astro";
const description = "شرح لنظام الصفحات في Astro";
---
<Base title={title}>
<p>{description}</p>
<p>هذه الصفحة تستخدم Layout وتعرض محتوى ديناميكي.</p>
</Base>
ماذا تعلمت اليوم؟
✔ كيف يعمل النظام المذهل للصفحات في Astro
✔ ماذا يوجد داخل ملف .astro
✔ Frontmatter وكيفية استخدامه
✔ إنشاء Layouts و Slots لصفحات احترافية
✔ الصفحات الديناميكية Dynamic Routes
✔ كيفية تمرير Props للصفحات
✔ كيفية قراءة Markdown داخل المشروع