تخطَّ إلى المحتوى

الصفحات

الصفحات هي الملفات التي تعيش في src/pages/ من مشروع أسترو الخاص بك. إنهم مسؤولون عن التعامل مع توجيه وتحميل البيانات والتخطيط العام للصفحة لكل صفحة في موقع الويب الخاص بك.

ملفات الصفحات المدعومة

قسم بعنوان ملفات الصفحات المدعومة

يدعم أسترو أنواع الملفات التالية في المجلد src/pages/:

التوجيه القائم على الملف

قسم بعنوان التوجيه القائم على الملف

يستفيد أسترو من استراتيجية توجيه تسمى التوجيه المستند إلى الملف. كل ملف في src/pages/ الخاص بك يصبح نقطة نهاية على موقعك بناءً على مسار الملف الخاص به.

يمكن لملف واحد أيضًا إنشاء صفحات متعددة باستخدام التوجيه الديناميكي. يتيح لك ذلك إنشاء صفحات حتى لو كان المحتوى الخاص بك موجودًا خارج الدليل /pages/ الخاص، كما هو الحال في جمع المحتوى أو CMS.

اقرأ المزيد عن التوجيه في أسترو.

الربط بين الصفحات

قسم بعنوان الربط بين الصفحات

اكتب HTML القياسي عناصر <a> في صفحات أسترو الخاصة بك للربط بصفحات أخرى على موقعك. استخدم مسار عنوان URL المتعلق بنطاقك الجذر كرابط خاص بك، وليس مسار ملف نسبي.

على سبيل المثال، لربط /https://example.com/authors/sonali من أي صفحة أخرى example.com:

src/pages/index.astro
Read more <a href="/authors/sonali/">about Sonali</a>.

صفحات استرو

قسم بعنوان صفحات استرو

تستخدم صفحات استرو astro. امتداد الملف ودعم نفس الميزات مثل مكونات استرو.

src/pages/index.astro
---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

يجب أن تنتج الصفحة مستند HTML كاملاً. إذا لم يتم تضمينه بشكل صريح، فسيضيف استرو الإعلان الضروري <!DOCTYPE html> ومحتوى <head> إلى أي مكون astro. موجود داخل src/pages/ بشكل افتراضي. يمكنك إلغاء الاشتراك في هذا السلوك على أساس كل مكون عن طريق وضع علامة عليه كصفحة جزئية.

لتجنب تكرار نفس عناصر HTML في كل صفحة، يمكنك نقل العناصر <head> و<body> الشائعة إلى مكونات التخطيط الخاصة بك. يمكنك استخدام أكبر عدد ممكن أو قليل من مكونات التخطيط كما تريد.

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>
اقرأ المزيد عن مكونات التخطيط في استرو.

صفحات ماركداون/MDX

قسم بعنوان صفحات ماركداون/MDX

يعامل استرو أيضًا أي ماركداون (md.) الملفات الموجودة داخل src/pages/ كصفحات في موقع الويب النهائي الخاص بك. إذا كان التكامل MDX مثبتًا لديك، فإنه يتعامل أيضًا مع ملفات MDX بنفس الطريقة. يتم استخدامها بشكل شائع للصفحات ذات النصوص الثقيلة مثل منشورات المدونات والوثائق.

مجموعات من محتوى صفحة ماركداون أو MDX في src/content/ يمكن استخدامها لـ إنشاء الصفحات ديناميكيًا.

تعد تخطيطات الصفحة مفيدة بشكل خاص لـ ملفات ماركداون. يمكن لملفات ماركداون استخدام خاصية الواجهة الأمامية الخاصة layout لتحديد مكون التخطيط الذي سيغلف محتوى ماركداون الخاص بها في مستند صفحة <html>...</html> كامل .

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title


This is my page, written in **Markdown.**
اقرأ المزيد عن ماركداون في استرو.

صفحات HTML

قسم بعنوان صفحات HTML

يمكن وضع الملفات ذات امتداد الملف html. في الدليل src/pages/ واستخدامها مباشرة كصفحات على موقعك. لاحظ أن بعض ميزات استرو الرئيسية غير مدعومة في مكونات HTML.

صفحة خطأ 404 المخصصة

قسم بعنوان صفحة خطأ 404 المخصصة

بالنسبة لصفحة خطأ 404 مخصصة، يمكنك إنشاء ملف 404.astro أو 404.md في /src/pages.

سيتم إنشاء هذا في صفحة 404.html. معظم خدمات النشر ستجدها وتستخدمها.

أجزاء الصفحة

قسم بعنوان أجزاء الصفحة

أُضيفت في: astro@3.4.0

الأجزاء الجزئية هي مكونات صفحة موجودة ضمن src/pages/ وليس المقصود منها عرضها كصفحات كاملة.

مثل المكونات الموجودة خارج هذا المجلد، لا تتضمن هذه الملفات تلقائيًا إعلان <!DOCTYPE html> ولا أي محتوى <head> مثل الأنماط والبرامج النصية المحددة النطاق.

ومع ذلك، ونظرًا لوجودها في الدليل src/pages/ الخاص، فإن HTML الذي تم إنشاؤه متاح على عنوان URL المطابق لمسار الملف الخاص به. يسمح هذا لمكتبة العرض (مثل htmx وStimulus وjQuery) بالوصول إليها على العميل وتحميل أقسام HTML ديناميكيًا على الصفحة دون تحديث المتصفح أو التنقل في الصفحة.

توفر الأجزاء الجزئية، عند دمجها مع مكتبة العرض، بديلاً لـ جزر استرو وعلامات <script> لبناء المحتوى الديناميكي في استرو.

يمكن وضع علامة على ملفات الصفحات التي يمكنها تصدير قيمة (مثل astro ، .mdx.) كأجزاء جزئية.

قم بتكوين ملف داخل الدليل src/pages/ ليكون جزئيًا عن طريق إضافة التصدير التالي:

src/pages/partial.astro
---
export const partial = true;
---


<li>I'm a partial!</li>

يجب أن يكون export const partial قابلاً للتعريف بشكل ثابت. يمكن أن يكون لها قيمة:

  • المنطق true.
  • متغير بيئة يستخدم import.meta.env مثل import.meta.env.USE_PARTIALS.

باستخدام مع مكتبة ما

قسم بعنوان باستخدام مع مكتبة ما

تُستخدم الأجزاء لتحديث قسم من الصفحة ديناميكيًا باستخدام مكتبة مثل htmx.

يوضح المثال التالي سمة hx-post التي تم تعيينها على عنوان URL الجزئي. سيتم استخدام المحتوى من الصفحة الجزئية لتحديث عنصر HTML المستهدف في هذه الصفحة.

src/pages/index.astro
<html>
  <head>
    <title>My page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Target here</div>


  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Click Me!
  </button>
</section>

يجب أن يكون الجزء astro. موجودًا في مسار الملف المقابل، ويتضمن تصديرًا يحدد الصفحة على أنها جزئية:

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>I was clicked!</div>

راجع وثائق htmx لمزيد من التفاصيل حول استخدام htmx.