مشكلة الترويسة وتذييل الصفحة في HTML CSS

ان كنت تقوم ببناء مجموعة صفحات عن طريق الـ html و ال css وتريد عدم تكرار الاجزاء (او المكونات) المكررة في كل صفحة، فأنت ستحتاج في الغالب اما معرفة او خبرة بتطوير الواجهة الخلفية. وذلك لفصل هاته المكونات في ملفات وحقنها في كل ملف بسطر تضمين.

أو معرفة بأطر العمل القائمة على المكونات component-based framework من مثل React و VueJS. لعمل نفس الفكرة.

أقل المطلوب هو معرفة بأساسيات جافاسكربت لعمل نفس الفكرة. ولنقل مثلا ان هنالك ملف جافاسكربت رئيسي script.js يتم استعماله في كامل الصفحات على نحو:

<script src="script.js"></script>

يحوي هذا الملف شيفرة تقوم بالبحث عن عنصر حاوي الترويسة وعن عنصر حاوي التذييل وتقوم بحقن هذين المكونين بقالبيهما.

على سبيل المثال:

• تحوي صفحة index.html الحاويتين التاليتين:

<component id="header-component"></component>
<component id="footer-component"></component>

• سيقوم ملفنا بالبحث عنهما أولا وجلبهما:

var header = document.querySelector('#header-component');
var footer= document.querySelector('#footer-component');

• ثم سنقوم بتحضير قالبي هذين المكونين:

const headerTmpl = `<div> header template example </div>`;

const footerTmpl = `<div> footertemplate example </div>`;

• الآن سنقوم فقط بحقن headerTmpl داخل html الخاص بالعنصر header فيكون:

var header = document.querySelector('#header-component');
const headerTmpl = `<div> header template example </div>`;

header.innerHTML = headerTmpl;

• نفس الامر بالنسبة للعنصر footer:

var footer = document.querySelector('#footer -component');
const footerTmpl = `<div> header footer example </div>`;

footer.innerHTML = footerTmpl;

فتكون الشيفرة كاملة داخل الملف:

const headerTmpl = `<div> header template example </div>`;
const footerTmpl = `<div> footertemplate example </div>`;

var header = document.querySelector('#header-component');
var footer= document.querySelector('#footer-component');

header.innerHTML = headerTmpl;
footer.innerHTML = footerTmpl;

وأينما وجد هاذان العنصران:

<component id="header-component"></component>
<component id="footer-component"></component>

فانهما سيستبدلان عن طريق الجافاسكربت بالمحتوى الموصوف في الثابتين headerTmpl و footerTmpl

يمكنك وضع محتويا العنصرين الذان لديك مكانهما.

رغم بساطة الطريقة إلا انها غير مفضلة إلا في حالات استثنائية جدا، فلا الترويسة ولا التذييل ستتم فهرستهما عن طريق محركات البحث. ان كان لا بد، تعرف أكثر عن تطوير الواجهات الخلفية او عمل تطبيقات SSR عن طريق اطر عمل الواجهات الامامية.