forked from withastro/docs
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
i18n(ar): Add missing
astro-pages.mdx (withastro#8021)
* Fix typo mentioned by @X7md.
- Loading branch information
Showing
1 changed file
with
175 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| --- | ||
| title: الصفحات | ||
| description: مقدمة في صفحات أسترو | ||
| i18nReady: true | ||
| --- | ||
|
|
||
| import ReadMore from '~/components/ReadMore.astro'; | ||
| import Since from '~/components/Since.astro' | ||
|
|
||
| **الصفحات** هي الملفات التي تعيش في `src/pages/` من مشروع أسترو الخاص بك. إنهم مسؤولون عن التعامل مع توجيه وتحميل البيانات والتخطيط العام للصفحة لكل صفحة في موقع الويب الخاص بك. | ||
|
|
||
| ## ملفات الصفحات المدعومة | ||
|
|
||
| يدعم أسترو أنواع الملفات التالية في المجلد `src/pages/`: | ||
| - [`astro.`](#astro-pages) | ||
| - [`md.`](#markdownmdx-pages) | ||
| - `mdx.` (مع [MDX التكامل المثبت](/ar/guides/integrations-guide/mdx/#installation)) | ||
| - [`html.`](#html-pages) | ||
| - `js` / `.ts.` (ك [النهايات](/ar/guides/endpoints/)) | ||
|
|
||
| ## التوجيه القائم على الملف | ||
|
|
||
| يستفيد أسترو من استراتيجية توجيه تسمى **التوجيه المستند إلى الملف**. كل ملف في `src/pages/` الخاص بك يصبح نقطة نهاية على موقعك بناءً على مسار الملف الخاص به. | ||
|
|
||
| يمكن لملف واحد أيضًا إنشاء صفحات متعددة باستخدام [التوجيه الديناميكي](/ar/guides/routing/#dynamic-routes). يتيح لك ذلك إنشاء صفحات حتى لو كان المحتوى الخاص بك موجودًا خارج الدليل `/pages/` الخاص، كما هو الحال في [جمع المحتوى](/ar/guides/content-collections/) أو [CMS](/ar/guides/cms/). | ||
|
|
||
| <ReadMore>اقرأ المزيد عن [التوجيه في أسترو](/ar/guides/routing/).</ReadMore> | ||
|
|
||
| ### الربط بين الصفحات | ||
|
|
||
| اكتب HTML القياسي [عناصر `<a>` ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) في صفحات أسترو الخاصة بك للربط بصفحات أخرى على موقعك. استخدم **مسار عنوان URL المتعلق بنطاقك الجذر** كرابط خاص بك، وليس مسار ملف نسبي. | ||
|
|
||
| على سبيل المثال، لربط `/https://example.com/authors/sonali` من أي صفحة أخرى `example.com`: | ||
|
|
||
| ```astro title="src/pages/index.astro" | ||
| Read more <a href="/authors/sonali/">about Sonali</a>. | ||
| ``` | ||
|
|
||
| ## صفحات استرو | ||
|
|
||
| تستخدم صفحات استرو `astro.` امتداد الملف ودعم نفس الميزات مثل [مكونات استرو](/ar/basics/astro-components/). | ||
|
|
||
| ```astro title="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/` بشكل افتراضي. يمكنك إلغاء الاشتراك في هذا السلوك على أساس كل مكون عن طريق وضع علامة عليه كصفحة [جزئية](#page-partials). | ||
|
|
||
| لتجنب تكرار نفس عناصر HTML في كل صفحة، يمكنك نقل العناصر `<head>` و`<body>` الشائعة إلى [مكونات التخطيط](/ar/basics/layouts/) الخاصة بك. يمكنك استخدام أكبر عدد ممكن أو قليل من مكونات التخطيط كما تريد. | ||
|
|
||
| ```astro {3} /</?MySiteLayout>/ | ||
| --- | ||
| // src/pages/index.astro | ||
| import MySiteLayout from '../layouts/MySiteLayout.astro'; | ||
| --- | ||
| <MySiteLayout> | ||
| <p>My page content, wrapped in a layout!</p> | ||
| </MySiteLayout> | ||
| ``` | ||
|
|
||
| <ReadMore>اقرأ المزيد عن [مكونات التخطيط](/ar/basics/layouts/) في استرو.</ReadMore> | ||
|
|
||
| ## صفحات ماركداون/MDX | ||
|
|
||
| يعامل استرو أيضًا أي ماركداون (`md.`) الملفات الموجودة داخل `src/pages/` كصفحات في موقع الويب النهائي الخاص بك. إذا كان [ التكامل MDX مثبتًا لديك](/ar/guides/integrations-guide/mdx/#installation)، فإنه يتعامل أيضًا مع ملفات MDX بنفس الطريقة. يتم استخدامها بشكل شائع للصفحات ذات النصوص الثقيلة مثل منشورات المدونات والوثائق. | ||
|
|
||
| [مجموعات من محتوى صفحة ماركداون أو MDX](/ar/guides/content-collections/) في `src/content/` يمكن استخدامها لـ [إنشاء الصفحات ديناميكيًا](/ar/guides/routing/#dynamic-routes). | ||
|
|
||
| تعد تخطيطات الصفحة مفيدة بشكل خاص لـ [ملفات ماركداون](#markdownmdx-pages). يمكن لملفات ماركداون استخدام خاصية الواجهة الأمامية الخاصة `layout` لتحديد [مكون التخطيط](/ar/basics/layouts/) الذي سيغلف محتوى ماركداون الخاص بها في مستند صفحة `<html>...</html>` كامل . | ||
|
|
||
| ```md {3} | ||
| --- | ||
| # Example: src/pages/page.md | ||
| layout: '../layouts/MySiteLayout.astro' | ||
| title: 'My Markdown page' | ||
| --- | ||
| # Title | ||
|
|
||
| This is my page, written in **Markdown.** | ||
| ``` | ||
|
|
||
| <ReadMore>اقرأ المزيد عن [ماركداون](/ar/guides/markdown-content/) في استرو.</ReadMore> | ||
|
|
||
| ## صفحات HTML | ||
|
|
||
| يمكن وضع الملفات ذات امتداد الملف `html.` في الدليل `src/pages/` واستخدامها مباشرة كصفحات على موقعك. لاحظ أن بعض ميزات استرو الرئيسية غير مدعومة في [مكونات HTML](/ar/basics/astro-components/#html-components). | ||
|
|
||
| ## صفحة خطأ 404 المخصصة | ||
|
|
||
| بالنسبة لصفحة خطأ 404 مخصصة، يمكنك إنشاء ملف `404.astro` أو `404.md` في `/src/pages`. | ||
|
|
||
| سيتم إنشاء هذا في صفحة `404.html`. معظم [خدمات النشر](/ar/guides/deploy/) ستجدها وتستخدمها. | ||
|
|
||
| ## أجزاء الصفحة | ||
|
|
||
| <p><Since v="3.4.0" /></p> | ||
|
|
||
| :::caution | ||
| تهدف أجزاء الصفحة إلى استخدامها مع مكتبة الواجهة الأمامية، مثل [htmx](https://htmx.org/) أو [Unpoly](https://unpoly.com/). يمكنك أيضًا استخدامها إذا كنت مرتاحًا لكتابة JavaScript للواجهة الأمامية منخفضة المستوى. ولهذا السبب فهي ميزة متقدمة. | ||
|
|
||
| بالإضافة إلى ذلك، لا ينبغي استخدام الأجزاء إذا كان المكون يحتوي على أنماط أو نصوص برمجية محددة النطاق، حيث سيتم تجريد هذه العناصر من مخرجات HTML. إذا كنت بحاجة إلى أنماط محددة، فمن الأفضل استخدام صفحات عادية وغير جزئية إلى جانب مكتبة الواجهة الأمامية التي تعرف كيفية دمج المحتويات في الرأس. | ||
| ::: | ||
|
|
||
| الأجزاء الجزئية هي مكونات صفحة موجودة ضمن `src/pages/` وليس المقصود منها عرضها كصفحات كاملة. | ||
|
|
||
| مثل المكونات الموجودة خارج هذا المجلد، لا تتضمن هذه الملفات تلقائيًا إعلان `<!DOCTYPE html>` ولا أي محتوى `<head>` مثل الأنماط والبرامج النصية المحددة النطاق. | ||
|
|
||
| ومع ذلك، ونظرًا لوجودها في الدليل `src/pages/` الخاص، فإن HTML الذي تم إنشاؤه متاح على عنوان URL المطابق لمسار الملف الخاص به. يسمح هذا لمكتبة العرض (مثل htmx وStimulus وjQuery) بالوصول إليها على العميل وتحميل أقسام HTML ديناميكيًا على الصفحة دون تحديث المتصفح أو التنقل في الصفحة. | ||
|
|
||
| توفر الأجزاء الجزئية، عند دمجها مع مكتبة العرض، بديلاً لـ [جزر استرو](/ar/concepts/islands/) وعلامات [`<script>`](/ar/guides/client-side-scripts/) لبناء المحتوى الديناميكي في استرو. | ||
|
|
||
| يمكن وضع علامة على ملفات الصفحات التي يمكنها تصدير قيمة (مثل `astro` ، .`mdx`.) كأجزاء جزئية. | ||
|
|
||
| قم بتكوين ملف داخل الدليل `src/pages/` ليكون جزئيًا عن طريق إضافة التصدير التالي: | ||
|
|
||
| ```astro title="src/pages/partial.astro" ins={2} | ||
| --- | ||
| export const partial = true; | ||
| --- | ||
| <li>I'm a partial!</li> | ||
| ``` | ||
|
|
||
| يجب أن يكون `export const partial` قابلاً للتعريف بشكل ثابت. يمكن أن يكون لها قيمة: | ||
|
|
||
| - المنطق __`true`__. | ||
| - متغير بيئة يستخدم import.meta.env مثل `import.meta.env.USE_PARTIALS`. | ||
|
|
||
| ### باستخدام مع مكتبة ما | ||
|
|
||
| تُستخدم الأجزاء لتحديث قسم من الصفحة ديناميكيًا باستخدام مكتبة مثل [htmx](https://htmx.org/). | ||
|
|
||
| يوضح المثال التالي سمة `hx-post` التي تم تعيينها على عنوان URL الجزئي. سيتم استخدام المحتوى من الصفحة الجزئية لتحديث عنصر HTML المستهدف في هذه الصفحة. | ||
|
|
||
| ```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"' | ||
| <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.` موجودًا في مسار الملف المقابل، ويتضمن تصديرًا يحدد الصفحة على أنها جزئية: | ||
|
|
||
| ```astro title="src/pages/partials/clicked.astro" {2} | ||
| --- | ||
| export const partial = true; | ||
| --- | ||
| <div>I was clicked!</div> | ||
| ``` | ||
|
|
||
| راجع [وثائق htmx](https://htmx.org/docs/) لمزيد من التفاصيل حول استخدام htmx. |