كيفية استدعاء تصميم html و css بشكل ديناميكي باستخدام js

Abdelrahman Hamed · 24 أبريل 2023

السلام عليكم.. الآن لدي كود جاهز مصمم بالhtml و css

وأريد إستدعاء أو تنفيذ هذا التصميم في صفحات معينة انا أختارها من خلال كود js

كيف بإمكاني ذلك.. إذا أحد يدلني على درس تعليمي أو عنوان أقوم بالبحث عنه لتعلم كيفية تنفيذ ذلك أكون شاااكر جداً :)

عمر قره محمد · 24 أبريل 2023

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

يمكنك تحويل الـ html و الـ css إلى عناصر js وتضعها في ملف js منفصل وليكن script.js :

var style = document.createElement('style');
style.innerHTML = `
	#target {
	color: blueviolet;
	}
	`;
document.head.appendChild(style);

var style = document.createElement('div');
style.innerHTML = `
	<div id="target">
		hello world
	</div>
	`;
document.body.appendChild(style);

والملف السابق سيقوم بحقن الـ html و الـ CSS في الصفحة التي نريدها ولن نقوم باستدعائها إلا عندما نريد، فمثلاً في ملف الـ html التالي سنقوم باستدعاء الملف عند النقر على زر show target :

<!DOCTYPE html>
<html dir="ltr">

<head>
	<style>
		body {
			text-align: center;
		}
	</style>
</head>

<body>
	<button id="btn">show target</button>
	<script>
		var script = document.createElement('script');
		script.src = "./script.js"
		const btn = document.getElementById("btn");
		btn.onclick = () => {
			document.body.appendChild(script);
		}
	</script>
</body>

</html>

حيث ان الـ script.src يشير إلى مسار الملف script.js.

ويمكنك تعديل الملف السابق ليتم عرض الـ العنصر target عند تنفيذ شرط معين، فمثلاً في الكوت التالي سيتم عرض العنصر target عندما يكون الـ pathname هو / أي سيتم عرضه في الصفحة الرئيسية فقط :

<script>
  var script = document.createElement('script');
  script.src = "./script.js"
  const btn = document.getElementById("btn");
  if(window.location.pathname === "/" ) document.body.appendChild(script);
</script>

كذلك يمكنك استخدام react للقيام بنفس العملية وهي تسهل العمل عليك بشكل اكبر.

Abdelrahman Hamed · 24 أبريل 2023

شكراً جزيلاً لك استاذ محمد على إهتمامك بالموضوع..

المشكلة اني اريد اضافة هذه الأكواد في بلوجر.. لذلك فكرة اني اقوم بإنشاء ملف منفصل تكون صعبة

كل ما اريده ان اضيف كود الhtml والcss في ملف الxml لقالب بلوجر.. لأقوم بالذهاب لأي مقالة واضع مفتاح الjs الذي تم ربطه بأكواد الhtml و الcss ليمكنني من إستدعاء التصميم الخاص بي داخل هذا المقال

Mustafa Suleiman · 24 أبريل 2023

بتاريخ 1 ساعة قال Abdelrahman Hamed:

شكراً جزيلاً لك استاذ محمد على إهتمامك بالموضوع..

المشكلة اني اريد اضافة هذه الأكواد في بلوجر.. لذلك فكرة اني اقوم بإنشاء ملف منفصل تكون صعبة

كل ما اريده ان اضيف كود الhtml والcss في ملف الxml لقالب بلوجر.. لأقوم بالذهاب لأي مقالة واضع مفتاح الjs الذي تم ربطه بأكواد الhtml و الcss ليمكنني من إستدعاء التصميم الخاص بي داخل هذا المقال

في البداية، قم بفتح ملف الـ XML الخاص بقالب بلوجر وأضف أكواد HTML و CSS الخاصة بتصميمك.

كمثال:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <div class="featured-post">
    <img src="IMAGE_URL" alt="Featured Post Image">
    <h2><a href="POST_URL">عنوان المقال المميز</a></h2>
    <p>محتوى المقال المميز</p>
  </div>
</b:if>

<style>
  .featured-post {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
  }
  
  h2 a {
    color: #333;
    font-size: 24px;
    text-decoration: none;
  }
  
  p {
    color: #666;
    font-size: 16px;
  }
</style>

بعد ذلك، يمكنك إستدعاء تصميمك في أي مقالة بإستخدام الـ JavaScript.

مثلاً، إذا أردت إستدعاء التصميم في أول مقالة على الصفحة الرئيسية، يمكنك إضافة هذا الكود في صفحة المقال:

<div id="featured-post"></div>

<script>
  const featuredPost = document.getElementById("featured-post");
  const featuredPostHTML = '<b:if cond=\'data:blog.pageType == &quot;index&quot;\'>' +
                          '<div class="featured-post">' +
                            '<img src="IMAGE_URL" alt="Featured Post Image">' +
                            '<h2><a href="POST_URL">عنوان المقال المميز</a></h2>' +
                            '<p>محتوى المقال المميز</p>' +
                          '</div>' +
                        '</b:if>';
  const featuredPostCSS = '.featured-post { background-color: #f9f9f9; padding: 20px; border: 1px solid #ddd; } h2 a { color: #333; font-size: 24px; text-decoration: none; } p { color: #666; font-size: 16px; }';
  
  featuredPost.innerHTML = featuredPostHTML;
  const style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = featuredPostCSS;
  document.getElementsByTagName('head')[0].appendChild(style);
</script>

حيث يقوم هذا الكود بإستدعاء تصميم المقال المميز الذي تم إضافته في ملف الـ XML ويعرضه في صفحة المقال.

ويمكنك تعديل هذا الكود ليتناسب مع تصميمك الخاص.

كمثال، تغيير مسار الملفات ليتماشى مع مسار ملفات تصميمك، ويمكنك أيضا تغيير المعرف الخاص بالعنصر الذي يستخدم لإدخال التصميم في الصفحة.

أيضا إضافة المزيد من الخصائص والأساليب إلى التصميم الخاص بك باستخدام CSS، كتغيير ألوان الخطوط والخلفيات، وتحديد المسافات بين العناصر.

أما إذا أردت استدعاء ملفات HTML و CSS :

فعليك باستخدام كود جافاسكريبت كالتالي:

function loadCSS(url) {
  const link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
}

function loadHTML(html) {
  const article = document.createElement('article');
  article.innerHTML = html;
  document.getElementById('article-container').appendChild(article);
}

loadCSS('styles.css');
loadHTML('<div class="my-div"><h1>Hello World!</h1></div>');

حيث يقوم الكود بتحميل ملف CSS عن طريق إنشاء عنصر link وإضافته إلى رأس الصفحة، ثم يقوم بإنشاء عنصر article ويضيف الـ HTML الذي تم تمريره كنص داخله.

ثم يضيف هذا العنصر إلى عنصر الـ article-container في صفحة المقال.

ويمكنك تعديل الـ HTML والـ CSS وتمريرها كمتغيرات إلى الدالة loadHTML و loadCSS على التوالي.

ولا تنسى تغيير article-container بمعرف العنصر الذي تريد عرض المقال فيه.

وهناك طريقة أخرى وهي إضافة أكواد HTML و CSS مباشرًة:

قم بتسجيل الدخول إلى حساب بلوجر الخاص بك.
اختر مدونتك وانتقل إلى صفحة "تخطيط" القالب.
اضغط على زر "تحرير HTML" الذي يوجد في الزاوية اليمنى العليا من الصفحة.
ابحث عن العنصر الذي تريد إضافة إليه الأكواد HTML و CSS، و قد يكون هذا العنصر، مثلاً، الجزء الخاص بمحتوى المدونة أو القائمة الجانبية أو الهيدر أو الفوتر.
انقر فوق موضع العنصر الذي تريد تعديله، ثم الصق الأكواد HTML و CSS الخاصة بك بالداخل.
بمجرد الانتهاء من الإضافات، انقر على زر "حفظ" في الزاوية اليمنى العليا للصفحة.

مثال:

<div class="header">
  <h1>عنوان المدونة</h1>
  <img src="رابط الشعار" alt="شعار المدونة">
</div>

أضف الأكواد CSS الخاصة بك في قسم الستايلات style الموجود في نفس صفحة التحرير:

<style>
  .header {
    background-color: #eee;
    padding: 20px;
    text-align: center;
  }
  
  h1 {
    color: #333;
    font-size: 36px;
    margin-bottom: 10px;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
</style>

بهذا، ستكون قد أضفت عنوانًا وشعارًا إلى الهيدر.

Adnane Kadri · 24 أبريل 2023

لتنفيذ التصميم الذي لديك في صفحات HTML معينة، يمكنك إنشاء ملف HTML جديد واستدعاء ملفات CSS و JS المرتبطة بالتصميم الذي لديك وحقن الهيكلة المرادة في شجرة الوثيقة. على سبيل المثال، إذا كان لديك ملف HTML يسمى index.html ولديك ملفات CSS و JS مرتبطة بالتصميم الذي تريد استدعائه، يمكنك استخدام العنصر <link> في <head> لاستدعاء ملفات CSS، والعنصر <script> في الجزء السفلي من <body> لاستدعاء ملفات JS.

فيكون:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>صفحة الاستدعاء</title>
	<link rel="stylesheet" href="path/to/your/style.css">
</head>
<body>
	<!-- هنا يمكنك استدعاء تصميمك -->
	<div id="my-design"></div>

	<script src="path/to/your/script.js"></script>
	<script>
		// هنا يمكنك تنفيذ الكود الذي يحدث العرض الذي تريده
		// وإضافة التصميم إلى الصفحة
		var myDesign = document.querySelector('#my-design');
		myDesign.innerHTML = 'تصميمك هنا';
	</script>
</body>
</html>

يمكنك استدعاء التصميم الخاص بك في العنصر <div> الذي يحمل id my-design وتنفيذ الكود الخاص بك في العنصر <script> الذي يليه.

كيفية استدعاء تصميم html و css بشكل ديناميكي باستخدام js

السؤال

Abdelrahman Hamed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Abdelrahman Hamed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية