باستخدام Express في تطوير تطبيقات الويب باستخدام Node.js، يمكنك بسهولة إرسال ملف HTML مع CSS مرفقة لتنسيق الصفحة. الكود الذي قدمته يُرسل الملف HTML فقط، لذا يجب عليك تحديد ملف CSS أيضًا وإرساله إلى العميل.
لإرسال الملفين HTML و CSS معًا ودمجهما في الجانب العميل، يجب عليك تحميل محتوى الملف CSS داخل الملف HTML بحيث يمكن للمتصفح تحميله وتطبيق الأنماط المحددة على العناصر في الصفحة.
اليك كيفية تعديل الكود لتحقيق هذا الغرض:
- قم بتعديل ملف الـ HTML (index.html) ليتضمن وصلة (link) تشير إلى ملف CSS:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Pagetitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<h1>Welcome to my website!h1>
<p>This is a paragraph.p>
body>
html>
- ثم، قم بتعديل الكود في Node.js ليُرسل كل من ملف HTML و CSS:
javascriptvar express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.get('/style.css', function(req, res) {
res.sendFile(path.join(__dirname, 'style.css'));
});
app.listen(3000, function() {
console.log('Server is running on port 3000');
});
بهذا التعديل، عندما يطلب المتصفح الصفحة الرئيسية (/)، ستُرسل Express الملف HTML (index.html)، وعندما يطلب المتصفح ملف الـ CSS، سيتم إرساله أيضًا. سيقوم المتصفح بتطبيق الأنماط المحددة في ملف الـ CSS على عناصر الصفحة الـ HTML.
باستخدام هذا النهج، يمكنك تحقيق الهدف المطلوب من توصيل ملف HTML و CSS معًا وتنسيق الصفحة بالشكل المطلوب على الجانب العميل.
المزيد من المعلومات
بالطبع، إليك المزيد من المعلومات لتعزيز فهمك حول كيفية إرسال ملفات HTML و CSS معًا باستخدام Express و Node.js:
-
استخدام
express.static: بدلاً من إرسال كل ملف عن طريقres.sendFile()بشكل منفصل، يمكنك استخدام مجلدٍ عام لتخزين الملفات الثابتة مثل HTML و CSS ومن ثم استخدامexpress.staticلتقديم هذه الملفات مباشرةً. يسمح هذا النهج بتبسيط الكود وجعله أكثر قابلية للتوسع.قم بإنشاء مجلد لتخزين الملفات الثابتة (مثل
public) وانقل ملفات HTML و CSS إليه. ثم، قم بتضمين الكود التالي في ملف الخادم:javascriptapp.use(express.static(path.join(__dirname, 'public')));الآن يمكن لـ Express التعرف على الملفات الموجودة في المجلد
publicوتقديمها عند الطلب. -
ضبط محتوى ملف الـ CSS: تأكد من أن ملف الـ CSS يحتوي على أنماط CSS الصحيحة لتنسيق العناصر في صفحتك. يجب أن تكون القواعد المحددة في ملف الـ CSS متوافقة مع بنية وعناصر HTML الموجودة في ملف الـ HTML.
-
استخدام
لتضمين ملف الـ CSS: بالنسبة لملف الـ HTML، يجب أن تستخدم عنصرداخل عنصرلتضمين ملف الـ CSS. هذا يسمح للمتصفح بتحميل ملف الـ CSS وتطبيق الأنماط المحددة على العناصر في الصفحة. -
تأكد من الرابط الصحيح: تأكد من أن الرابط الموجود في عنصر
في ملف الـ HTML يشير بشكل صحيح إلى ملف الـ CSS. يجب أن يكون المسار الذي تحدده في عنصرمتطابقًا مع موقع ملف الـ CSS على الخادم.
مع تطبيق هذه النصائح، يمكنك تحقيق الهدف من إرسال ملفات HTML و CSS معًا وتنسيق الصفحة بالشكل المطلوب على الجانب العميل.
