اذهب إلى المحتوى
  • 0

التبديل بين ملفي LTR و RTL المتعلقين بالبوتستراب ضمن موقع مبني ب React.

Mohammed Ammar Ammar

السؤال

كيف يتم استخدام Bootstrap5 ضمن React بحيث أقوم باستدعاء RTl file عندما يكون الموقع باللغة العربية، وعندما يكون باللغة الانجليزية استخدم الملف العادي (LTR)

الموقع الذي أعمل عليه يحتوي على بعض الصفحات باللغة العربية فقط وبعضها بالغة الانجليزية فقط
لقد قمت باستدعاء كل ملف وحده ضمن ال Components الخاص بكل صفحة.
اي أنني قمت باستدعاء
import "bootstrap/dist/css/bootstrap.min.css
في كل Component لصفحة لغتها انجليزية
و ايضا
import "bootstrap/dist/css/bootstrap.rtl.min.css";
في كل Component لصفحة لغتها عربية

لكن يتم استدعاء كلا الملفين بجميع الصفحات.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

حل هذه المشكلة يكون على عدة خطوتين:

أولاً تعيين متغير يقوم بتحديد لغة العرض الحالية.

ثانياً بانشاء دالة لاستداعاء الملف الصحيح استناداً إلى اللغة.

 

//  ينبغي تحديد اللغة، لنفرض أن القيمة الافتراضية لها العربية.
let language = "ar"; 

function getBootstrapCss() {
  return language === "ar" ? "bootstrap.rtl.min.css" : "bootstrap.min.css";
}

function App() {
  return (
    <div>
      <link
        rel="stylesheet"
        href={`/path/to/bootstrap/css/${getBootstrapCss()}`}
      />
      {/* Your components */}
    </div>
  );
}

انتبه لتعديل مسار ملفات css في الكود في الأعلى.

تم التعديل في بواسطة محمد خطيب
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 53 دقائق مضت قال عمر قره محمد:

هل يمكنك مشاركة ملفات المشروع ؟

ارفقت مشروعا صغيرا يوضح نفس المشكلة
npm install
npm start

http://localhost:3000
http://localhost:3000/ar

المشكلة موجودة بالصفحتين
لكن هي واضحة أكثر ب http://localhost:3000/ar

ملف الصفحة التي باللغة الانجليزية
CompanyEn.js

أول سطر فيه

import "bootstrap/dist/css/bootstrap.min.css

 

ملف الصحفة التي باللغة العربية

CompanyArOne.js

أول سطر فيه
import "bootstrap/dist/css/bootstrap.rtl.min.css

 

عند تعليق أحد السطرين يستخدم الموقع السطر الآخر في كلا الصفحتين
أما عند الابقاء على السطرين يصبح هناك تضارب في كلا الصفحتين

test.zip

 

 

بتاريخ 38 دقائق مضت قال محمد خطيب:

حل هذه المشكلة يكون على عدة خطوتين:

أولاً تعيين متغير يقوم بتحديد لغة العرض الحالية.

ثانياً بانشاء دالة لاستداعاء الملف الصحيح استناداً إلى اللغة.

 

//  ينبغي تحديد اللغة، لنفرض أن القيمة الافتراضية لها العربية.
let language = "ar"; 

function getBootstrapCss() {
  return language === "ar" ? "bootstrap.rtl.min.css" : "bootstrap.min.css";
}

function App() {
  return (
    <div>
      <link
        rel="stylesheet"
        href={`/path/to/bootstrap/css/${getBootstrapCss()}`}
      />
      {/* Your components */}
    </div>
  );
}

انتبه لتعديل مسار ملفات css في الكود في الأعلى.

شكرا لك نجحت الطريقة لكن عن طريق استدعاء الملفات المتعلقة ب ال Bootstrap ب ال CDN 

لكن:
من خلال المسار الذي قمت أنت بكتابه

href={`/path/to/bootstrap/css/${getBootstrapCss()}`}

كيف أصل إلى مجلد

node_modules

أم أنه حصرا يتوجب علي إضافة الملفات بمجلد ال Public داخل مشروع ال React ؟

وشكرا جزيلا لك.

تم التعديل في بواسطة Mohammed Ammar Ammar
لا أريد الدمج بين الردين فكل رد متعلق بأجابة مستقلة
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

اضافة اللغة العربية لا يلزم ان تقوم بفص الصفحات التي تدعم العربية عن الأنجليزية 

افضل طريقه هي بعمل العناصر الموقع بالكامل اوكل قسم باللغه الأنجليزية اولا ثم العربيه لأن التغيرات ستكون بسيطه

اما عن استخدام rtl في bootstrap فكما ذكر الأستاذ محمد الخطيب في التعليق السابق وهو بالتحكم في اتجاة الصفحه عن طريق الأب بدلاً من كل عنصر بمفرده 

وستقوم بعمل ملف css للتعديلات التي ستحتاجها عند التحويل الي العربية ويتم ربطه بنفس الطريقه

وبالنسبة للمحتوي نفسه فسنجعله ديناميكي بأن نقوم بعمل ملف js لكل لغه في كل ملف object في ه جميع النصوص التي ستتخدم في الموقع 

ومن ثم قم بإستدعائها وربطها

 img1.PNG.a61f4d789b8548d7b07b29407c921701.PNG

const data = {
  title: "hello",
  link: "google.com",
};

export default data;

او اجعل نوع الملف json او قم بعمل fetch  ان كان سيتم ربط الموقع في المستقبل بال back-end 

لا تهم الطريقه النتيجه واحدة 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال Mohammed Ammar Ammar:

ارفقت مشروعا صغيرا يوضح نفس المشكلة
npm install
npm start

http://localhost:3000
http://localhost:3000/ar

المشكلة موجودة بالصفحتين
لكن هي واضحة أكثر ب http://localhost:3000/ar

ملف الصفحة التي باللغة الانجليزية
CompanyEn.js

أول سطر فيه

import "bootstrap/dist/css/bootstrap.min.css

 

ملف الصحفة التي باللغة العربية

CompanyArOne.js

أول سطر فيه
import "bootstrap/dist/css/bootstrap.rtl.min.css

 

عند تعليق أحد السطرين يستخدم الموقع السطر الآخر في كلا الصفحتين
أما عند الابقاء على السطرين يصبح هناك تضارب في كلا الصفحتين

test.zip 2.77 MB · 12 تنزيلات

 

 

شكرا لك نجحت الطريقة لكن عن طريق استدعاء الملفات المتعلقة ب ال Bootstrap ب ال CDN 

لكن:
من خلال المسار الذي قمت أنت بكتابه

href={`/path/to/bootstrap/css/${getBootstrapCss()}`}

كيف أصل إلى مجلد

node_modules

أم أنه حصرا يتوجب علي إضافة الملفات بمجلد ال Public داخل مشروع ال React ؟

وشكرا جزيلا لك.

يمكنك القيام بشيء ما مثل :

export default function MainRoutes() {
	const [lan, setLan] = useState("en");
	return (
		<Router>
			<Routes>
				{lan === "en" && <Route path='/' element={<CompanyEn />} />}
				{/* <Route path='/ar' element={ <CompanyEn /> } /> */}
				{lan === "ar" && <Route path='/ar' element={<CompanyArOne />} />}
			</Routes>
		</Router>
	);
}

وبهذه الطريقة لن يتم تحميل اي ملف من المكون العربي إلا إذا كانت اللغة عربية ولن يتم تحميل اي مكون من اللانجليزي إلا اذا كانت انجليزية.

ويمكنك اضافة الشرط لأكثر من مكون مثل :

export default function MainRoutes() {
	const [lan, setLan] = useState("en");
	return (
		<>

			{lan === "en" &&
				<Routes>
					<Route path='/' element={<CompanyEn />} />
					<Route path='/example' element={<Example />} />
				</Routes>
			}{lan === "ar" &&
				<Router>
					<Route path='/ar' element={<CompanyArOne />} />
					<Route path='/ar/example' element={<Example />} />
				</Router>
			}
		</>
	);
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...