افتح مقال WeChat مصمَّمًا جيدًا فتلاحظ أن الأجزاء التي تجعله يبدو احترافيًا ليست الكلمات — بل الكتل المنسّقة. بطاقة العنوان المتدرّجة في الأعلى، ترويسات الأقسام الصغيرة بشريط ملوّن، بطاقة "تابعنا" في النهاية، صناديق الاقتباس بزوايا مدوّرة. كثير منها مبنيّ كـ SVG، وSVG هو ما يتيح لها الاحتفاظ بشكلها ولونها الدقيقين مهما عرضها هاتف.
إليك الجزء المحبط: حين تجد واحدة تعجبك وتحاول إعادة استخدامها، نسخها عادةً يكسرها. تلصق في محرّر WeChat فينهار التخطيط، تصبح الألوان مسطحة، أو يختفي نصف الكتلة. يشرح هذا الدليل لماذا يحدث ذلك وكيف تستخرج تلك الكتل كي تبقى سليمة.
لماذا يعتمد WeChat على SVG للتخطيط
محرّر WeChat يجرّد معظم CSS. لا يمكنك إرفاق ورقة أنماط، وكثير من الأنماط المضمّنة تُصفّى. فوجد المصمّمون التفافًا: بناء القطع الزخرفية كـ SVG، حيث يعيش الشكل والتدرّج وتموضع النص كلها داخل ترميز SVG. يترك WeChat ذلك الترميز معظمه دون مساس، فتُعرَض الكتلة نفسها في كل مكان.
ذلك أيضًا سبب كون هذه الكتل قابلة لإعادة الاستخدام مبدئيًا. بطاقة عنوان SVG قائمة بذاتها. لا تعتمد على ملف خارجي أو صنف معرّف في مكان آخر من الصفحة. نظريًا يمكنك انتزاعها وإفلاتها في مقالك أنت. المشكلة فقط في الانتزاع.
لماذا يكسر النسخ الساذج الكتلة
حين تحدّد كتلة منسّقة على صفحة مُعروَضة وتنسخها، فأنت عادةً تلتقط نسخة المتصفح المُعروَضة، لا المصدر الأصلي. ثلاثة أمور تسوء:
- ترميز التغليف يُفقَد. الكتلة غالبًا تجلس داخل حاويات متداخلة تحمل التموضع. التقط الجزء المرئي فقط فتفقد صندوقها.
- القطع المُرمَّزة تتشوّه. SVG كثيرًا ما يحمل صور خلفية أو خطوطًا كبيانات مُرمَّزة. نسخ-لصق عبر مسار خاطئ قد يُتلف تلك السلسلة.
- لا يمكنك إعادة تلوينها بنظافة. حتى لو نجت، الألوان مخبوزة في عشرات المواضع في الترميز. تغيير السمة يدويًا يعني البحث خلال شيفرة خام.
لإعادة استخدام هذه الكتل بموثوقية لا تريد لقطة شاشة ولا تخمين حافظة المتصفح. تريد ترميز الكتلة الفعلي، مسحوبًا كوحدة مستقلة.
استخراج الكتل بالطريقة الموثوقة
النهج النظيف هو نسخ محتوى مصدر المقال كله وترك أداة تحلّله، بدلاً من محاولة تحديد كتلة واحدة يدويًا على الشاشة. تفعل أداة استخراج وحدات التخطيط من IMG.DIY هذا بالضبط: تلصق المحتوى، فتقرأ الترميز بمحلّل DOM الخاص بالمتصفح، وتعزل الكتل المنسّقة القابلة لإعادة الاستخدام — بطاقات طباعة SVG، ترويسات معنونة، بطاقات تابعنا، اقتباسات منسّقة، فواصل — كلٌّ كوحدة مستقلة.
تحذير مهم واحد، مذكور بوضوح: لا تستطيع الأداة جلب مقال برابطه. المتصفحات تحجب جلب mp.weixin.qq.com عبر المواقع، فلا أداة داخل المتصفح تستطيع سحب صفحة WeChat برابط. تنسخ المحتوى وتلصقه. ليس ذلك قيدًا للالتفاف حوله بقدر ما هو كيفية عمل نموذج أمان الويب.
ولأن كل كتلة معزولة ومُعايَنة في صندوق Shadow DOM خاص بها، لا يمكن لأنماط وحدة أن تتسرّب إلى أخرى. ما تراه في المعاينة هو ما تكونه تلك الكتلة فعلاً.
إعادة التلوين دون لمس الشيفرة
بمجرد استخراج كتلة، تُحلّ لك مشكلة اللون التي ذكرتها سابقًا. انقر أي لون في وحدة وغيّره — ويتحدّث اللون نفسه أينما ظهر في تلك الكتلة. فتصبح بطاقة عنوان زرقاء خضراءَ علامتك في حركة واحدة، بدلاً من تحريرك ست قيم hex مدفونة في SVG. يمكنك أيضًا استبدال الصور النائبة داخل وحدة بصورك أنت.
هنا تتوقّف "إعادة الاستخدام" عن كونها نظرية. كتلة أعجبتك من مقال شخص آخر تصبح كتلة في لوحتك، بـألوانك، جاهزة للإفلات في قطعتك التالية.
بناء مكتبة وحداتك الخاصة
العائد الحقيقي هو فعل هذا بضع مرات والاحتفاظ بما تستخرجه. كل وحدة تعجبك يمكن حفظها في مكتبة محلية تعيش في متصفحك (عبر localStorage)، ويمكنك تصدير المكتبة كلها إلى ملف JSON لنسخها احتياطيًا أو نقلها إلى جهاز آخر. لا يُرفع أي شيء ولا يوجد حساب — المكتبة ملكك، على جهازك.
عبر بضعة أسابيع تبني عدّة شخصية: بضع بطاقات عناوين، ترويسة قسم تثق بها، بطاقة تذييل، فاصل أو اثنان. حين يحين وقت تخطيط مقال جديد، تسحب من مجموعتك بدلاً من البحث خلال منشورات الآخرين مجددًا. لإدخال كتلة منسّقة إلى المحرّر، تنسخها كـ HTML مضمّن وتلصقها — تحتفظ الكتلة بتنسيقها لأن التنسيق يسافر مع الترميز.
ابدأ بكتلة أحببتها دائمًا، استخرجها بنظافة، أعد تلوينها إلى علامتك، واحفظها. تلك هي الدورة كلها، وهي تتراكم.