ما هي أفضل طريقة لاختصار الروابط في html

هيكلة الروابط لديك لا مشكلة بها وجيدة لمحركات البحث، ولا أنصحك باختصارها أكثر من ذلك مثل site.com/h/c1 لأن ذلك سيضر بظهور موقعك في جوجل، فالروابط الواضحة التي تحتوي على الكلمات المفتاحية هي الأفضل.

ما تريده يسمى التوجيه Routing، والتوجيه من خلال fetch لا أنصحك به، لأنّ محركات البحث تواجه صعوبة في أرشفة المحتوى الذي يتم جلبه بـ fetch() بعد تحميل الصفحة، وستحتاج لكتابة نظام توجيه بنفسك بواسطة window.history لتحديث الرابط في شريط العنوان، والأزرار أي الرجوع والأمام، وربما لا تعمل بشكل صحيح بدون إعدادات معقدة.

لذا الحلول أمامك، هي استخدام إطار عمل مثل Astro وهو الأسرع والأسهل بالنسبة لنوع المحتوى في موقعك، يليه إطار عمل Next.js وهو أثقل قليلاً وأكثر تعقيداً من Astro فالمحتوى تعليمي لا يحتاج لتفاعلات معقدة كثيرة.

أو بدون إطارات عمل  باستخدام الخادم أي واجهة خلفية من خلال PHP أو Node.js.

بالطبع إن كنت تتعلم البرمجة فقم بتعلم إطار Next.js لأنه مطلوب أكثر.

جزاك الله خيرا أستاذ مصطفى على معلوماتك القيمة

وعليكم السلام ورحمة الله وبركاته.

لا تُستخدم fetch() لإختصار الروابط أو إدارة هيكل الصفحات. حيث أن fetch() هي أداة لجلب البيانات من الخادم بعد تحميل الصفحة مثل تحميل محتوى درس دون إعادة تحميل الصفحة أما تنظيم العناوين مثل site.com/html/course1 فهذا يتم على مستوى التوجيه (Routing) في الخادم أو في إطار عمل الواجهة الأمامية لديك.

وإذا كنت تبني موقع تعليمي ثابت (HTML/CSS/JS فقط بدون خادم معقد) فأفضل طريقة هي استخدام نظام ملفات عادي على الخادم وهذا ليس اختصارا بل تنظيما هيكليا:

public_html/
├── html/
│   ├── index.html
│   ├── course1.html
│   ├── course2.html
│   └── ...
├── css/
│   ├── index.html
│   ├── course1.html
│   └── ...
└── js/
    ├── index.html
    └── ...

ثم يمكنك استخدام JavaScript في المتصفح لإنشاء قائمة دروس ديناميكية مثلا تجلب قائمة الملفات عبر fetch من واجهة خادم بسيطة ولكن الروابط نفسها ستكون كاملة.

استخدام fetch() هنا:
مفيد لو أردت تحميل محتوى الدرس بدون مغادرة الصفحة مثلا:

• صفحة رئيسية html/index.html تحتوي على قائمة دروس.
• عند النقر على course1 يتم إرسال fetch('/html/course1.html') وعرض النص داخل نفس الصفحة.

ولكن عنوان المتصفح يبقى site.com/html وليس site.com/html/course1 .إذا الخلاصة أن fetch() لا تختصر الروابط بل تغير طريقة تحميل المحتوى.

إذا كنت تريد روابط نظيفة واختصارا في كتابتها وإدارتها فأنت تحتاج إلى إطار عمل للتوجيه (Router). والخياران هما:

• إطار عمل للواجهة الأمامية (Front-end Framework) مثل React مع React Router أو Vue مع Vue Router
• إطار عمل للخادم (Back-end Framework) وهو الأنسب لموقع تعليمي به دروس كثيرة وديناميكي.

شكرا جزيلا أستاذ محمد على تعليقك المفيد

وعليكم السلام ورحمة الله وبركاته.

ما تصفه هو نظام توجيه (Routing)، أي أن الموقع يعرض محتوى مختلفاً بحسب الرابط دون أن تعيد تحميل الصفحة بالكامل في كل مرة. هذا النوع من المواقع يسمى SPA (Single Page Application).

ويوجد ثلاث مسارات لتنفيذ ما تريده كالتالي

المسار الأول Vanilla JS مع History API حيث يمكنك استخدام window.history.pushState() مع fetch() لبناء نظام توجيه بسيط يدوياً. هذا مناسب فقط إذا كان موقعك صغيراً جداً وتريد تجنب أي مكتبة خارجية، لكنه يتطلب منك كتابة الكثير من الكود المتكرر.

أما المسار الثاني هو إطار عمل JavaScript هنا تحصل على نظام توجيه جاهز، وإدارة للحالة، وأداء محسن تلقائياً. 

وأخيراً المسار الثالث هو Static Site Generator مثل Astro أو Next.js