توضح هذه المقالة بالتفصيل موقع تخزين التعليمات البرمجية المصدر لصفحة الويب في مراحل مختلفة، وتغطي بيئة التطوير المحلية، وعملية الإنشاء والنشر، والتخزين من جانب الخادم. من الهيكل التنظيمي للمجلد للمطورين المحليين، إلى دليل التكوين والإخراج لأداة الإنشاء، إلى موقع النشر والتحكم في الإصدار على الخادم، تقوم المقالة بفرز دورة الحياة الكاملة للكود المصدر لصفحة الويب بشكل منهجي. بالإضافة إلى ذلك، تقدم المقالة أيضًا كيف يمكن للمستخدمين عرض التعليمات البرمجية المصدر لصفحة الويب من خلال أدوات مطور المتصفح، وتوفر العديد من الأمثلة الشائعة لتسمية مجلد التعليمات البرمجية المصدر لمساعدة القراء على فهم إدارة التعليمات البرمجية المصدر لصفحة الويب والوصول إليها بشكل أفضل.
عادةً لا يتم تخزين ملفات التعليمات البرمجية المصدر لصفحات الويب في مجلدات محددة. عند زيارتك لموقع ويب، يرسل متصفحك طلبًا إلى خادم موقع الويب، ويستجيب الخادم للطلب وينقل ملفات HTML وCSS وJavaScript الخاصة بصفحة الويب إلى متصفحك. سيتم تحميل هذه الملفات مباشرة في ذاكرة المتصفح ويمكن عرضها من خلال أدوات مطور المتصفح. في بيئة التطوير المحلية، عادةً ما يتم تخزين الكود المصدري لصفحة الويب في مجلد تم تعيينه بواسطة المطور. ستختلف أسماء وهياكل هذه المجلدات وفقًا لتفضيلات المشروع والمطور، ولكنك غالبًا ما ترى ملفات مثل src. ، الأسماء الشائعة مثل العامة.
1. تخزين كود المصدر في بيئة تطوير مواقع الويب المحلية
عندما يعمل مطورو الويب في بيئة محلية، يكون لديهم بنية مجلد محددة لتنظيم ملفات التعليمات البرمجية المصدر لصفحة الويب. تتضمن هذه الملفات عادةً ملفات HTML وCSS وJavaScript وربما ملفات التعليمات البرمجية من جانب الخادم مثل PHP أو Python النصية.
ملف HTML
تحدد ملفات HTML بنية ومحتوى صفحات الويب. في بيئة التطوير المحلية، توجد ملفات HTML عادة في الدليل الجذر للمشروع أو في مجلد يسمى /public، أو /views، أو ما شابه ذلك. تحتوي هذه الملفات على ملحق .html.
ملفات CSS وجافا سكريبت
تكون ملفات CSS مسؤولة عن النمط وتخطيط الصفحة، بينما تتحكم ملفات JavaScript في سلوك الصفحة وتفاعلها. غالبًا ما يتم تخزين ملفات الموارد هذه في /css، و/styles، و/js، و/scripts والمجلدات الأخرى التي تحمل أسماء أنواع الموارد. تنتهي ملفات CSS بـ .css، وتنتهي ملفات JavaScript عادةً بـ .js.
2. تخزين كود المصدر أثناء إنشاء موقع الويب ونشره
قبل أن يتم نشر موقع الويب على الخادم، فإنه عادةً ما يمر عبر عملية إنشاء (أو تجميع). تتضمن العملية خطوات تحسين مثل ضغط التعليمات البرمجية ودمج الملفات لتحسين سرعة تحميل موقع الويب وأدائه.
تكوين أداة البناء
غالبًا ما يستخدم تطوير مواقع الويب الحديثة أدوات البناء مثل Webpack أو Gulp أو Grunt لأتمتة عملية التطوير. تعمل هذه الأدوات استنادًا إلى webpack.config.js أو gulpfile.js أو ملفات التكوين المشابهة.
بناء مجلد الإخراج
عادةً ما يتم وضع الملفات المحسنة التي تم إنشاؤها أثناء عملية الإنشاء في مجلدات تسمى /dist (التوزيع)، و/build، و/out، وما إلى ذلك. سيتم تحميل الملفات من هذا المجلد إلى الخادم لاستخدامها في البيئة عبر الإنترنت.
3. تخزين كود المصدر على الخادم
يعتمد موقع الكود الذي تم تحميله على الخادم على تكوين الخادم واستراتيجية النشر. عادةً، سيتم وضع ملفات موقع الويب في أدلة محددة على الخادم، مثل /www و/public_html والمجلدات الأخرى في الدليل الجذر للخادم.
تكوين برنامج الخادم
تحدد ملفات تكوين برنامج الخادم، مثل .htaccess الخاص بـ Apache أو nginx.conf الخاص بـ Nginx، مكان تخزين ملفات التعليمات البرمجية المصدر وتعليمات حول كيفية معالجة الخادم لهذه الملفات.
نظام التحكم في الإصدار
من الممارسات الشائعة استخدام نظام التحكم في الإصدار مثل Git لنشر التعليمات البرمجية وتحديثها على الخادم. في هذه الحالة، يتم تخزين التعليمات البرمجية المصدر في مجلد تتم إدارته من خلال Git.
4. عرض الكود المصدري لصفحة الويب من خلال أدوات المطور
حتى إذا لم يكن من الممكن الوصول مباشرة إلى ملفات التعليمات البرمجية المصدر الموجودة على الخادم، فلا يزال بإمكان المستخدمين عرض التعليمات البرمجية المصدر لصفحة الويب من خلال وسائل مختلفة.
أدوات مطور المتصفح
توفر المتصفحات الحديثة أدوات المطورين التي تسمح للمستخدمين بعرض وتصحيح التعليمات البرمجية المصدر لصفحات الويب، مثل HTML وCSS وJavaScript. يمكن للمستخدمين الوصول إلى هذه الأدوات عن طريق الضغط على F12 في متصفحهم أو عن طريق النقر بزر الماوس الأيمن على صفحة ويب واختيار "فحص".
عرض كود مصدر الصفحة
بالإضافة إلى أدوات المطورين، توفر المتصفحات عادةً وظيفة عرض كود مصدر الصفحة. يمكنك عرض كود مصدر HTML عن طريق النقر بزر الماوس الأيمن على صفحة الويب واختيار "عرض كود مصدر الصفحة".
ملخص: يمكن وضع ملفات التعليمات البرمجية المصدر لصفحات الويب في مجلدات مختلفة وفقًا لمراحل التطوير والإنشاء والنشر المختلفة. في بيئة التطوير المحلية، يتم توزيعها وفقًا للهيكل التنظيمي للمطور؛ أثناء عملية الإنشاء، يمكن تحسينها ووضعها في دليل مخرجات محدد، وبمجرد نشرها على الخادم، عادةً ما تكون هذه الملفات موجودة في دليل موقع الويب الخاص بـ تكوين الخادم الأوسط. لعرض الكود المصدري لصفحات الويب المنشورة، يمكن للمستخدمين القيام بذلك من خلال الأدوات التي يوفرها المتصفح.
1. في بنية ملف موقع الويب، عادةً ما يتم حفظ الكود المصدري لصفحة الويب في مجلد يسمى "src" أو "المصدر" في الدليل الجذر للمشروع.
يُستخدم هذا المجلد لتخزين ملفات التعليمات البرمجية الأصلية المطلوبة لتطوير الويب، بما في ذلك ملفات HTML وCSS وJavaScript. في هذا المجلد، يمكنك إنشاء مجلدات فرعية وفقًا لوظيفة أو نوع صفحة الويب. على سبيل المثال، يتم استخدام "الأنماط" لتخزين ملفات أنماط CSS، ويتم استخدام "البرامج النصية" لتخزين ملفات البرامج النصية لـ JavaScript.
2. يمكن أيضًا تخزين الكود المصدري لصفحة الويب في مجلد باسم "عام" أو "www".
وذلك لأن العديد من أطر أو أدوات تطوير الويب ستقوم تلقائيًا بإنشاء مجلد "عام" عند إنشاء موقع ويب لتخزين ملفات الموارد الثابتة لموقع الويب (بما في ذلك ملفات التعليمات البرمجية المصدر). ومن خلال حفظ الكود المصدري في هذا المجلد، يمكنك الوصول بسهولة إلى صفحة الويب ومعاينتها من خلال متصفحك. بالإضافة إلى ذلك، عادةً ما يطلب موفرو خدمة استضافة الويب وضع ملفات التعليمات البرمجية المصدر لصفحة الويب في المجلد "www" حتى يعمل موقع الويب بشكل صحيح.
3. يمكن تخزين ملفات التعليمات البرمجية المصدر لصفحة الويب في مجلدات مخصصة أخرى وفقًا للتفضيلات الشخصية أو التنظيمية.
على سبيل المثال، يفضل بعض المطورين حفظ ملفات HTML وملفات CSS وملفات JavaScript في مجلدات مختلفة لتنظيم التعليمات البرمجية وإدارتها بشكل أفضل. في هذه الحالة، يمكن وضع ملفات التعليمات البرمجية المصدر في مجلدات تسمى "html" و"css" و"js" على التوالي.
بغض النظر عن المجلد الذي تقوم بتخزين ملفات التعليمات البرمجية المصدر لصفحات الويب الخاصة بك، تأكد من أن بنية الملف واضحة ومنظمة وتتبع أفضل ممارسات الصناعة. وهذا يمكن أن يحسن كفاءة التطوير ويسهل الصيانة والتوسع اللاحق.
بشكل عام، يعد فهم مكان تخزين الكود المصدري لصفحة الويب أمرًا بالغ الأهمية لكل من المطورين والمستخدمين. يحتاج المطورون إلى تنظيم بنية التعليمات البرمجية بشكل معقول لتسهيل التطوير والصيانة، ويمكن للمستخدمين بسهولة عرض التعليمات البرمجية المصدر لصفحة الويب من خلال أدوات المتصفح لفهم كيفية عمل صفحة الويب بشكل أفضل. آمل أن تساعد هذه المقالة القراء على فهم إدارة التعليمات البرمجية المصدر لصفحة الويب والوصول إليها بشكل أفضل.