يساعد تقسيم المقال الطويل إلى أجزاء على تنظيم الشروحات المتتابعة، خصوصاً عندما يحتوي الموضوع على مراحل يمكن قراءتها واحدة بعد الأخرى. وإذا كنت تبحث عن كود html يؤدي هذه المهمة في بلوجر، فمن المهم معرفة طريقة عمله قبل إضافته إلى القالب؛ فالمقطع الذي نشرحه يجمع بين وسوم بلوجر وCSS وJavaScript، ويغيّر طريقة عرض المقال داخل المتصفح.
 |
| كود html لتقسيم مقالات بلوجر وشرح تركيبه خطوة بخطوة. |
إجابة سريعة: يبحث الكود داخل جسم المقال عن الرمز 💫، ويحوّل العناصر إلى أجزاء مرقمة، ثم يعرض جزءاً واحداً ويضيف أسهم التنقل والأرقام. يظل المحتوى ضمن المقال نفسه، ويُحدَّد الجزء المطلوب بواسطة مقطع في نهاية الرابط مثل #split-Part2. الضغط على أزرار الإضافة يعيد تحميل الصفحة.
يستند هذا الشرح إلى قراءة المقطع المرفق ومراجعة صفحة الإضافة الأصلية. تختلف النتيجة باختلاف بنية القالب والعناصر الموجودة داخل المقال؛ ولم تُجرَ تجربة تركيب مباشرة على مدونتك.
يحيط هذا الشرط بالتنسيق والبرنامج، ويجعل المقطع مخصصاً لعرض التدوينات. الصفحات الثابتة والصفحة الرئيسية ليست ضمن هذا الشرط. وتُفسَّر وسوم b:if داخل قالب بلوجر؛ لذلك لا تُلصق المقطع الكامل في متن المقال باعتباره كود HTML عادياً.
تقلل الفئتان .split-start و.split-end وضوح السهم عند الوصول إلى طرف المقال وتمنعان نقر المؤشر. لكن pointer-events:none وحدها ليست معالجة كاملة لتعطيل الرابط لمستخدمي لوحة المفاتيح أو لتوضيح حالته لقارئات الشاشة.
هذا المتغير يحدد الرمز الذي يبحث عنه البرنامج في النص. ينتظر السكربت حدث DOMContentLoaded ثم يبحث عن أول عنصر يطابق .post-body. إذا لم يجده، أو لم يجد علامة فصل، يتوقف من دون بناء شريط التنقل.
الأسماء الطويلة مثل _0x278d والأرقام الست عشرية ناتجة عن تعمية JavaScript لجعله أصعب قراءة. التعمية ليست تشفيراً للمقال ولا دليلاً بحد ذاتها على أن البرنامج ضار. ومن قراءة المقطع، تتمثل وظيفته في تعديل محتوى الصفحة وإنشاء التنقل؛ ولا تظهر فيه أوامر إرسال بيانات مثل fetch أو XMLHttpRequest.
ابحث عن وسم الإغلاق </body>، وأدرج المقطع الكامل قبله، مع إبقاء وسمي الشرط في البداية والنهاية. أضف نسخة واحدة فقط.
تأكد من نسخ الأكواد بصيغتها الفعلية. يجب أن تكون البداية <b:if cond='data:view.isPost'> دون شرطة مائلة عكسية قبل الوسم أو قبل النقطة في data:view.isPost.
احفظ القالب، وافتح تدوينة تجريبية تحتوي على فقرات وعناوين واضحة. أضف رمز الفصل في بداية العنصر الذي سيبدأ الجزء التالي.
افتح التدوينة المنشورة واختبر الأرقام والأسهم على الحاسوب والهاتف، وتأكد من ظهور الصور والأدوات التفاعلية في كل جزء.
علامات CDATA الموجودة حول أجزاء التنسيق والبرنامج تساعد على إبقاء الرموز الخاصة ضمن سياق قالب XML. لا تحذفها عشوائياً، ولا تحذف جميع الشرطات المائلة العكسية داخل JavaScript؛ فبعضها، مثل \x22، يمثل ترميزاً مشروعاً داخل السلاسل النصية.
لا تحتاج إلى علامة قبل الجزء الأول. يبدأ الجزء الثاني عند عنوانه، والثالث عند عنوانه، ثم يزيل البرنامج الرمز من العناوين المعروضة. تجنب وضع علامة فصل منفردة في آخر المقال حتى لا تنشئ جزءاً يبدو فارغاً.
توجد أهم خيارات اللون في بداية قاعدة .split-pagination. غيّر القيم التالية داخل القاعدة الموجودة، ثم راجع التباين مع النص الأبيض:
ضع النصوص في فقرات أو عناوين، واختبر المقالات التي تضم نماذج أو فيديو أو إعلانات قبل تعميم الإضافة. كما أن السكربت لا يستمع إلى hashchange، لذلك تغيير الجزء من شريط العنوان أو الرجوع في سجل المتصفح لا يملك المعالجة نفسها التي تنفذها أزراره.
إخفاء الأجزاء لا يعني تقليل حجم HTML المُحمَّل أو ضمان تأجيل الصور والموارد داخلها. كما أن إعادة التحميل عند التنقل قد تؤثر في تجربة القراءة. لذلك لا تعتبر الإضافة ضماناً لزيادة السرعة أو الزيارات أو الأرباح، وقيّم فائدتها بناءً على قابلية الاستخدام الفعلية.
ما وظيفة كود html لتقسيم مقالات بلوجر
ينشئ الكود واجهة تنقل داخل التدوينة المنشورة. وهو مناسب لمقال طويل ذي أقسام واضحة، مثل دليل تركيب إضافة يليه شرح إعداداتها، لكنه قد يزيد عدد النقرات إذا استُخدم في مقال قصير. لذلك اختر حدود الأجزاء بحسب المعنى، واترك داخل كل جزء معلومات كافية تجعل القراءة مفيدة.يستند هذا الشرح إلى قراءة المقطع المرفق ومراجعة صفحة الإضافة الأصلية. تختلف النتيجة باختلاف بنية القالب والعناصر الموجودة داخل المقال؛ ولم تُجرَ تجربة تركيب مباشرة على مدونتك.
شرح أجزاء الكود البرمجي
<b:if cond='data:view.isPost'>
...
</b:if>تنسيق شريط التنقل باستخدام CSS
تحدد الفئة .split-pagination شكل الحاوية، وتستخدم Flexbox لتوزيع السهمين والأرقام. تمنح قيمة border-radius:50px الشريط حواف مستديرة، بينما تظهر الروابط على هيئة دوائر بعرض وارتفاع 48 بكسلاً. أما .split-current فتميز الجزء الحالي بلون مختلف وتمنع النقر عليه بالمؤشر.تقلل الفئتان .split-start و.split-end وضوح السهم عند الوصول إلى طرف المقال وتمنعان نقر المؤشر. لكن pointer-events:none وحدها ليست معالجة كاملة لتعطيل الرابط لمستخدمي لوحة المفاتيح أو لتوضيح حالته لقارئات الشاشة.
رمز الفصل وبداية تشغيل JavaScript
let splitSymbol = "💫";
الأسماء الطويلة مثل _0x278d والأرقام الست عشرية ناتجة عن تعمية JavaScript لجعله أصعب قراءة. التعمية ليست تشفيراً للمقال ولا دليلاً بحد ذاتها على أن البرنامج ضار. ومن قراءة المقطع، تتمثل وظيفته في تعديل محتوى الصفحة وإنشاء التنقل؛ ولا تظهر فيه أوامر إرسال بيانات مثل fetch أو XMLHttpRequest.
كيف يتحول المقال إلى أجزاء مرقمة
 |
| كيف يتحول المقال إلى أجزاء مرقمة. |
يمر البرنامج على العقد النصية داخل جسم المقال بحثاً عن علامة الفصل. وعندما يجدها، يصعد إلى العنصر الأب الذي يقع مباشرة داخل .post-body ويعتبر ذلك العنصر بداية جزء جديد. بعد ذلك يحذف الرمز من نص العنصر ويجمع محتوى كل جزء باستخدام outerHTML.
هذه النقطة تفسر اختلاف النتيجة بين المقالات: وضع الرمز في منتصف فقرة يجعل الفصل قبل الفقرة بأكملها، وليس عند موضع الرمز داخل السطر. وإذا كان المقال كله داخل حاوية واحدة، فقد تصل عملية البحث إلى تلك الحاوية بدلاً من فصل الأقسام الداخلية كما تتوقع. كذلك لا ينشئ تكرار الرمز مرات عديدة داخل العنصر المباشر نفسه أجزاء مستقلة.
ينشئ البرنامج حاويات بأسماء مثل split-Part1 وsplit-Part2، ويعيد كتابة محتوى جسم المقال. ثم يقرأ الرقم من خاصية Location.hash، ويعرض الحاوية المطابقة ويخفي البقية باستخدام display:none. إذا لم يوجد مقطع مخصص للتقسيم، يبدأ بالجزء الأول.
عند الضغط على رقم أو سهم، يغير الكود نهاية الرابط ويستدعي الدالة Location.reload. لذلك يكون الانتقال مصحوباً بإعادة تحميل الصفحة، رغم أن الأجزاء كلها موجودة أصلاً داخل المقال.
هذه النقطة تفسر اختلاف النتيجة بين المقالات: وضع الرمز في منتصف فقرة يجعل الفصل قبل الفقرة بأكملها، وليس عند موضع الرمز داخل السطر. وإذا كان المقال كله داخل حاوية واحدة، فقد تصل عملية البحث إلى تلك الحاوية بدلاً من فصل الأقسام الداخلية كما تتوقع. كذلك لا ينشئ تكرار الرمز مرات عديدة داخل العنصر المباشر نفسه أجزاء مستقلة.
ينشئ البرنامج حاويات بأسماء مثل split-Part1 وsplit-Part2، ويعيد كتابة محتوى جسم المقال. ثم يقرأ الرقم من خاصية Location.hash، ويعرض الحاوية المطابقة ويخفي البقية باستخدام display:none. إذا لم يوجد مقطع مخصص للتقسيم، يبدأ بالجزء الأول.
عند الضغط على رقم أو سهم، يغير الكود نهاية الرابط ويستدعي الدالة Location.reload. لذلك يكون الانتقال مصحوباً بإعادة تحميل الصفحة، رغم أن الأجزاء كلها موجودة أصلاً داخل المقال.
تركيب كود html داخل قالب بلوجر
احتفظ بنسخة من قالبك قبل التعديل لتتمكن من الرجوع إليها إذا تعارضت الإضافة مع عناصر موجودة.
افتح المدونة، ثم المظهر، ثم القائمة المجاورة للقالب واختر تعديل HTML. يوضح دليل بلوجر لتغيير التصميم مسار الوصول إلى محرر القالب.
افتح المدونة، ثم المظهر، ثم القائمة المجاورة للقالب واختر تعديل HTML. يوضح دليل بلوجر لتغيير التصميم مسار الوصول إلى محرر القالب.
ابحث عن وسم الإغلاق </body>، وأدرج المقطع الكامل قبله، مع إبقاء وسمي الشرط في البداية والنهاية. أضف نسخة واحدة فقط.
تأكد من نسخ الأكواد بصيغتها الفعلية. يجب أن تكون البداية <b:if cond='data:view.isPost'> دون شرطة مائلة عكسية قبل الوسم أو قبل النقطة في data:view.isPost.
احفظ القالب، وافتح تدوينة تجريبية تحتوي على فقرات وعناوين واضحة. أضف رمز الفصل في بداية العنصر الذي سيبدأ الجزء التالي.
افتح التدوينة المنشورة واختبر الأرقام والأسهم على الحاسوب والهاتف، وتأكد من ظهور الصور والأدوات التفاعلية في كل جزء.
علامات CDATA الموجودة حول أجزاء التنسيق والبرنامج تساعد على إبقاء الرموز الخاصة ضمن سياق قالب XML. لا تحذفها عشوائياً، ولا تحذف جميع الشرطات المائلة العكسية داخل JavaScript؛ فبعضها، مثل \x22، يمثل ترميزاً مشروعاً داخل السلاسل النصية.
مثال عملي لتحديد بداية كل جزء
المثال التالي توضيحي لمتن المقال في وضع HTML، وليس بديلاً عن سكربت القالب. اجعل هذه العناصر أبناء مباشرين لحاوية المقال قدر الإمكان، ولا تغلفها كلها بعنصر إضافي واحد:<h2>الجزء الأول</h2>
<p>مقدمة المقال وخطوات التحضير.</p>
<h2>💫 الجزء الثاني</h2>
<p>خطوات التطبيق داخل القالب.</p>
<h2>💫 الجزء الثالث</h2>
<p>التخصيص والمراجعة النهائية.</p>لا تحتاج إلى علامة قبل الجزء الأول. يبدأ الجزء الثاني عند عنوانه، والثالث عند عنوانه، ثم يزيل البرنامج الرمز من العناوين المعروضة. تجنب وضع علامة فصل منفردة في آخر المقال حتى لا تنشئ جزءاً يبدو فارغاً.
تخصيص الألوان وأزرار التنقل
 |
| تخصيص الألوان وأزرار التنقل. |
--splitm: #1b5a84;
--splits: #ff4801;| الإعداد | القيمة الأصلية | الوظيفة |
|---|---|---|
--splitm
|
#546e7a | لون خلفية شريط التنقل |
--splits
|
#ff4801 | لون الجزء الحالي وحالة مرور المؤشر |
width
و
height
|
48px | عرض أزرار التنقل وارتفاعها |
max-width
|
600px | تُخفى أرقام الأجزاء عندما يكون عرض نافذة العرض 600 بكسل أو أقل |
يمكن تغيير رمز الفصل من المتغير splitSymbol، لكن احتفظ برمز مميز لا يظهر عادة داخل النص. يستخدم البرنامج الرمز ضمن تعبير نمطي عند حذفه؛ لذلك لا تستبدله برمز مثل النقطة أو النجمة من دون تعديل المعالجة البرمجية، لأن لهذه الرموز معاني خاصة في التعبيرات النمطية.
الأخطاء الشائعة وحدود الكود الحالي
عدم ظهور التقسيم أو اختفاء الأسهم
إذا بقي المقال كاملاً، تحقق من وجود الرمز ومن اسم حاوية المحتوى. يعتمد الكود على أول عنصر يحمل الفئة post-body، وقد يستخدم قالبك بنية مختلفة. وإذا ظهرت دوائر فارغة مكان الأسهم، فتحقق من تحميل Font Awesome ودعم الفئتين fa-angle-right وfa-angle-left. لا يحمّل المقطع المكتبة بنفسه.
اختفاء المحتوى عند تغيير رقم الجزء
يقرأ البرنامج الرقم باستخدام parseInt، لكنه لا يحصره بين 1 وعدد الأجزاء. لذلك قد يؤدي فتح رابط ينتهي بـ#split-Part99 في مقال من ثلاثة أجزاء إلى إخفاء جميع الأجزاء. معالجة ذلك تحتاج إلى تعديل JavaScript للتحقق من الرقم قبل استخدامه؛ وهي ليست إصلاحاً موجوداً في النسخة المرفقة.تعطل أداة داخل المقال أو فقدان نص
يعيد السكربت إنشاء محتوى المقال باستخدام خاصية innerHTML. ومن آثار ذلك المحتملة فقدان مستمعات الأحداث المرتبطة بالعناصر القديمة، أو الحاجة إلى إعادة تهيئة أداة تفاعلية. كذلك فإن التجميع النهائي يمر على children، وهي العناصر فقط؛ ولذلك قد لا يحافظ على نص خام موجود مباشرة داخل حاوية المقال خارج أي عنصر.ضع النصوص في فقرات أو عناوين، واختبر المقالات التي تضم نماذج أو فيديو أو إعلانات قبل تعميم الإضافة. كما أن السكربت لا يستمع إلى hashchange، لذلك تغيير الجزء من شريط العنوان أو الرجوع في سجل المتصفح لا يملك المعالجة نفسها التي تنفذها أزراره.
هل تقسيم المقال يحسن السيو وسرعة الموقع
قد يساعد تقسيم شرح طويل على تنظيم القراءة إذا كانت الأجزاء مستقلة ومترابطة بوضوح. لكن الكود لا ينشئ تدوينات جديدة أو عناوين صفحات مستقلة. وتوضح إرشادات Google بشأن JavaScript والسيو أهمية الروابط القابلة للزحف وعدم الاعتماد على أجزاء الرابط لتغيير المحتوى باعتبارها صفحات مستقلة.إخفاء الأجزاء لا يعني تقليل حجم HTML المُحمَّل أو ضمان تأجيل الصور والموارد داخلها. كما أن إعادة التحميل عند التنقل قد تؤثر في تجربة القراءة. لذلك لا تعتبر الإضافة ضماناً لزيادة السرعة أو الزيارات أو الأرباح، وقيّم فائدتها بناءً على قابلية الاستخدام الفعلية.