تصميم قوالب بلوجر هو عملية إنشاء تصاميم مخصصة لمنصة التدوين بلوجر، والتي تُستخدم لتغيير شكل ومظهر المدونة الإلكترونية. منصة بلوجر تقدم مجموعة متنوعة من القوالب القياسية التي يمكن للمستخدمين اختيارها واستخدامها مباشرةً، ولكن تصميم قالب مخصص يسمح بتحقيق مظهر فريد وتجربة مستخدم مُحسّنة تتوافق مع أهداف المدونة ورؤيتها.
في هذا الدرس سوف نتكلم عن كيفية تصميم الجزء الخاص بعرض منشورات المدونة وفيما يلي جميع الاكواد التي سوف نستعملها مع شرحها :
<b:section id='post' locked='true' maxwidgets='1' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Messages' type='Blog'>
</b:widget>
</b:section>
دعنا نقسم الكود خطوة بخطوة:
1. `<b:section id='post' locked='true' maxwidgets='1' showaddelement='no'>`:
- `<b:section>` هي علامة تُستخدم في قوالب Blogger لتحديد أقسام أو مناطق مختلفة في صفحة الويب.
- `locked='true'`: تشير هذه السمة إلى أن القسم مقفل، مما يعني أنه لا يمكن تعديل إعداداته من خلال محرر تخطيط Blogger.
- `maxwidgets='1'`: تحدد هذه السمة الحد الأقصى لعدد عناصر واجهة المستخدم (المكونات) التي يمكن وضعها في هذا القسم. هنا ، تم تعيينه للسماح بعنصر واجهة مستخدم واحد فقط.
- `showaddelement='no'`: تشير هذه السمة إلى ما إذا كان يجب إظهار الزر "إضافة أداة" لإضافة عناصر واجهة مستخدم جديدة (widget) إلى هذا القسم. هنا، تم ضبطه على "لا"، مما يعني أنه لن يتم عرض الزر.
في سياق قوالب Blogger وتحرير التخطيط (Blogger templates and layout editing) :
عندما تقوم بتصميم موقع الويب أو المدونة الخاصة بك على Blogger، فإنك غالبًا ما تعمل مع أقسام مختلفة (sections) حيث يمكنك وضع أدوات متنوعة (مثل قائمة المنشورات الحديثة، وشريط البحث، وما إلى ذلك). يمكن لكل قسم من هذه الأقسام أن يحتوي على عنصر واجهة مستخدم واحد أو أكثر(widgets)، اعتمادًا على التصميم.
يتم تشغيل السمة `showaddelement` عندما تريد أن تقرر ما إذا كنت، كمصمم أو مسؤول(designer or admin)، تريد السماح بإضافة عناصر واجهة مستخدم إضافية إلى قسم معين.
في هذا المثال، تم تعيين السمة `showaddelement` على ``no'` للعلامة `<b:section>`. وهذا يعني أنه عند استخدام محرر تخطيط Blogger لتخصيص تخطيط مدونتك، فلن ترى خيار إضافة المزيد من الأدوات (widgets) إلى قسم "post" عن طريق النقر على زر "إضافة أداة".
بشكل أساسي، يتم استخدام هذه السمة لتقييد إضافة المزيد من الأدوات إلى قسم معين. يتم استخدامه غالبًا عندما تريد الحفاظ على تصميم أو تخطيط معين ومنع التغييرات غير المقصودة من قبل مستخدمين آخرين أو حتى نفسك.
لذلك، باختصار، `showaddelement='no'` يمنع زر "إضافة أداة" من الظهور في محرر تخطيط Blogger لهذا القسم المحدد، مما يضمن بقاء الأداة المحددة فقط (في هذه الحالة، أداة "Blog") في هذا القسم ولا يمكن إضافة المزيد من الأدوات هناك.
2. `<b:widget id='Blog1' locked='true' title='رسائل المدونة' type='Blog'>`:
- `id='Blog1'`: يعطي هذا معرفًا فريدًا لهذه الأداة، والمعرف هنا هو "Blog1".
- `locked='true'`: على غرار سمة القسم، يشير هذا إلى أن الأداة مقفلة ولا يمكن تعديل إعداداتها في محرر التخطيط.
- `title='رسائل المدونة'`: تحدد هذه السمة عنوان عنصر واجهة المستخدم(widget)، والذي سيتم عرضه في محرر التخطيط.
- `type='Blog'`: تحدد هذه السمة نوع الأداة. في هذه الحالة، إنها أداة "المدونة"، المسؤولة عن عرض محتوى المدونة الرئيسي.
<p class='entry-excerpt excerpt'><b:eval expr='data:post.snippets.long snippet { length: 88 }'/></p>
1. `<p class='entry-excerpt excerpt'>`:
هذا عنصر HTML، وتحديدًا علامة فقرة (`<p>`)، مع فئتين مخصصتين له(classes): `'entry-excerpt'` و` "excerpt". تُستخدم الفئات (classes) لتصميم العناصر وتنسيقها باستخدام CSS.
2. `<b:eval expr='data:post.snippets.long snippet { length: 88 }'/>`:
هذا الجزء عبارة عن تعبير يستخدم علامة (`<b:eval>`) لتنفيذ بعض الإجراءات:
- `expr`: تعني "التعبير". التعبير هو جزء من التعليمات البرمجية التي تنفذ إجراءً أو حسابًا محددًا. في هذا السياق، يتم استخدامه لإخبار منصة Blogger/Blogspot بالعملية التي تريد تنفيذها.
في التعليمات البرمجية المتوفرة، يتم استخدام التعبير لجلب جزء من البيانات ومعالجته، وتحديدًا مقتطف من المحتوى من منشور مدونة. يتم وضع التعبير داخل العلامة `<b:eval>`، والسمة "expr" هي المكان الذي تضع فيه هذا التعبير لمنصة Blogger لتقييمه وتنفيذه.
لتبسيط الأمر بشكل أكبر: فكر في السمة "expr" باعتبارها المكان الذي تقدم فيه الإرشادات حول ما يجب فعله بالبيانات. في هذه الحالة، يسترد التعبير مقتطفًا من منشور مدونة ويحدد طوله بـ 88 حرفًا. تأخذ منصة Blogger هذا التعبير وتعالجه وتعرض النتيجة وفقًا لذلك على صفحة الويب.
- `data:post.snippets.long snippet { length: 88 }`:
يجلب هذا الجزء مقتطفًا (جزءًا قصيرًا من المحتوى) من منشور مدونة. تعد `data:post.snippets.long` طريقة للوصول إلى مقتطف أطول من بيانات مشاركة المدونة. تشير الأقواس المتعرجة `{}` إلى أنه يتم تمرير معلمات إضافية إلى هذا المقتطف.
- `length: 88`: تحدد هذه المعلمة الموجودة داخل الأقواس المتعرجة أن طول المقتطف يجب أن يقتصر على 88 حرفًا.
ضع كل شيء معا :
يتم استخدام عنصر فقرة (`<p>`) مع الفئتين (classes) ``entry-excerpt'` و``excerpt'` لعرض مقتطف من المحتوى من منشور مدونة. يتم جلب المقتطف من مصدر `data:post.snippets.long` ، ويقتصر على 88 حرفًا كحد أقصى. يمكن استخدام هذا لتوفير معاينة قصيرة أو ملخص لمنشور مدونة على صفحة ويب.
بعبارات أبسط، يقوم هذا الكود بعرض جزء قصير من مقالة من منشور مدونة. لن يزيد طول مقتطف المقالة عن 88 حرفًا لإبقائه موجزًا.
<img expr:alt='data:post.title' expr:data-src='data:post.featuredImage' id='speed' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<img> : هذه علامة HTML تستخدم لعرض الصور على صفحة ويب. إنها تعني "صورة".expr:alt='data:post.title' : يخبر هذا الجزء المتصفح بما يجب عرضه كسمة "alt" للصورة. الجزء data:post.title يعني أنه سيستخدم عنوان المنشور (title of the post) كنص بديل عندما لا يمكن عرض الصورة.
expr:data-src='data:post.featuredImage' : هنا، يتم تحديد مصدر الصورة باستخدام تعبير (expr). البيانات:post.featuredImage تشير إلى الصورة المميزة المرتبطة بالمنشور. وهذا يعني أن الصورة المعروضة ستكون هي الصورة المميزة للمنشور.
id='speed' : يؤدي هذا إلى تعيين سمة "id" لعلامة الصورة. يتم استخدام المعرفات لتعريف عناصر HTML بشكل فريد. في هذه الحالة، يتم تعيين المعرف كـ "السرعة".
src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
هذا هو مصدر الصورة (src). يبدأ ب (data) : للإشارة إلى أن بيانات الصورة مضمنة في HTML. تحدد image/png تنسيق الصورة (PNG). الجزء الذي يلي ; هو تمثيل للصورة بترميز base64. تمثل القيمة المقدمة R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=، صورة فارغة بحجم 1 × 1 بكسل.
لذلك، بعبارات أبسط:
يقوم الكود بإنشاء علامة <img> لعرض الصورة. ويستخدم post's title كنص بديل إذا تعذر عرض الصورة. الصورة نفسها تأتي من الصورة المميزة للمنشور (post's featured image) . يتم تعريف الصورة (id) بمعرف "speed". مصدر الصورة عبارة عن بكسل شفاف صغير بحجم 1 × 1 بتنسيق PNG، ويتم تضمين بيانات الصورة المشفرة هذه مباشرةً في كود HTML نفسه.
window.addEventListener('scroll',(event) => {
var ii2 = document. querySelectorAll("#speed");
for (let i = 0; i < ii2.length; i++) {
var imgoooo = ii2[i]. getAttribute("data-src");
ii2[i]. setAttribute("src", imgoooo);
}
});
window.addEventListener('scroll', (event) => { ... });:
يقوم هذا السطر بإعداد مستمع الأحداث الذي ينتظر قيام المستخدم بالتمرير على صفحة الويب. عند حدوث حدث تمرير (مثل التمرير لأعلى أو لأسفل)، سيتم تشغيل التعليمات البرمجية الموجودة داخل الأقواس المتعرجة { ... }.
var ii2 = document.querySelectorAll("#speed");:
يبحث هذا السطر عن كافة عناصر HTML مع تعيين سمة المعرف على "speed". فهو يختار هذه العناصر ويخزنها في متغير يسمى ii2.
for (let i = 0; i < ii2.length; i++) { ... }:
يؤدي هذا إلى بدء حلقة تمر عبر كل عنصر من العناصر المخزنة في المتغير ii2. يبدأ بالعنصر الأول (index 0) ويستمر حتى العنصر الأخير.
var imgoooo = ii2[i].getAttribute("data-src");:
داخل الحلقة، يستخرج هذا السطر قيمة السمة "data-src" من العنصر الحالي (العنصر i في الحلقة) ويخزنها في متغير يسمى imgoooo.
ii2[i].setAttribute("src", imgoooo);:
يقوم هذا السطر بعد ذلك بتعيين سمة "src" للعنصر الحالي على القيمة المخزنة في متغير imgoooo. يؤدي هذا إلى تغيير مصدر عنصر الصورة (<img>) بشكل فعال إلى القيمة من السمة "data-src".
بعبارات أبسط:
عندما يقوم المستخدم بالتمرير الى اسفل صفحة الويب، يتحقق الكود من جميع العناصر ذات المعرف (id) "speed".
بالنسبة لكل عنصر من هذه العناصر، فإنه يأخذ قيمة السمة "data-src" (والتي من المفترض أن تحمل عنوان URL الفعلي للصورة).
ثم يقوم بعد ذلك بتعيين السمة "src" لكل عنصر على عنوان URL للصورة، مما يؤدي إلى تغيير src الصورة.
يتم استخدام هذا الرمز لتحميل الصور ديناميكيًا (بمعرف "speed") أثناء قيام المستخدم بالتمرير إلى أسفل الصفحة. يمكن أن يساعد ذلك في تحسين أداء الصفحة عن طريق تحميل الصور حسب الحاجة فقط، وهو ما يمكن أن يكون مفيدًا بشكل خاص للصفحات التي تحتوي على الكثير من الصور.
التسميات
الدروس والتعليمات