احتمالاً برایتان پیش آمده. یک بلوک قشنگ استایلدار را کپی میکنید — یک کارت عنوان، یک کالاوت رنگی — و در ویرایشگر WeChat یا یک CMS میچسبانید. گاهی دقیقاً درست از آب درمیآید. بار دیگر بهصورت متن لخت با همه طرح جداشده میافتد. همان اقدام، نتیجه متفاوت، و تصادفی حس میشود. نیست. تفاوت این است که آیا HTML درونخطی را کپی کردهاید.
فهمیدن این یک ایده چسباندن محتوای استایلدار را بهجای یک قمار قابلپیشبینی میکند.
HTML درونخطی واقعاً چیست
استایل وب میتواند در دو جا زندگی کند. در یک وبسایت معمولی، استایل در یک برگهسبک جدا مینشیند و HTML فقط با نام کلاس به آن ارجاع میدهد: <div class="title-card">. آن div بهتنهایی بیمعنی است — طرح در یک فایل CSS جای دیگری زندگی میکند.
HTML درونخطی استایل را درون خود عنصر میگذارد: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. هر چیزی که برای رندر بلوک نیاز است با بلوک سفر میکند. هیچ فایل بیرونیای برای وابستگی نیست.
آن تمایز کل داستان این است که چرا بعضی چسباندنها طرحشان را نگه میدارند و بقیه نه. وقتی در یک ویرایشگر میچسبانید، ویرایشگر برگهسبک وبسایت منبع را نمیگیرد. اگر طرح در آن برگهسبک زندگی میکرد، رفته — ساختار لخت را میگیرید، یعنی متنی که ساده به نظر میرسد. اگر طرح درونخطی بود، همراه میآید و بلوک درست رندر میشود.
چرا WeChat و ویرایشگرهای غنی به آن نیاز دارند
ویرایشگر WeChat سختگیر است. برگهسبکهای بیرونی را حذف میکند و بخش زیادی از استایل را فیلتر میکند. یک بلوکی که به یک کلاس تعریفشده جای دیگری تکیه داشت، وقتی درون WeChat است چیزی برای عقبنشینی ندارد. خیلی از ویرایشگرهای متن غنی و فیلدهای چسباندن CMS همینطور رفتار میکنند — آنچه میچسبانید را پاکسازی میکنند و فقط صفتهای درونخطی را نگه میدارند.
پس راه قابلاعتماد برای انتقال یک بلوک استایلدار به این ویرایشگرها کپی آن بهصورت HTML درونخطی است، جایی که استایل خودبسنده است. آنوقت حتی یک ویرایشگر سختگیر هر چیزی که برای نشان دادن بلوک بهصورت طراحیشده نیاز دارد را دارد.
کپی یک بلوک «با قالببندی» چطور کار میکند
مرورگرهای امروزی یک Clipboard API دارند که میتواند محتوای غنی — HTML با قالببندی — را روی کلیپبورد بگذارد، نه فقط متن ساده. وقتی یک ابزار یک بلوک را «بهصورت HTML درونخطی» کپی میکند، از آن API استفاده میکند تا نشانهگذاری خودبسنده بلوک را روی کلیپبورد شما بگذارد. بعد در ویرایشگر میچسبانید (Ctrl/Cmd+V) و چون استایل درونخطی بود و کلیپبورد HTML را حمل کرد، بلوک استایلدار ظاهر میشود.
دو چیز باید درست باشد تا این کار کند:
- نشانهگذاری باید درونخطیاستایل باشد، پس هیچ فایل بیرونیای نیاز نیست.
- کلیپبورد باید آن را بهصورت HTML حمل کند، نه بهصورت یک تخلیه متن ساده از علامتهای زاویهای.
هر دو را درست کنید و چسباندن «فقط کار میکند». هرکدام را از دست بدهید و متن ساده یا یک دیوار از کد دیدهشدنی میگیرید.
انجامش بدون ویرایش دستی کد
در اصل میتوانستید یک بلوک استایلدار را بگیرید و هر استایل را دستی درونخطی کنید — قواعد هر کلاس را به یک صفت style="" روی هر عنصر منتقل کنید. برای هر چیزی فراتر از یک بلوک بیاهمیت، این خستهکننده و خطاخیز است، بهویژه با کارتهای SVG که استایل در بسیاری گرهها پخش است.
یک ابزاری که این را از پس برمیآید آسانتر است. استخراجکننده ماژول چیدمان از IMG.DIY بلوکهای استایلدار را از محتوای چسباندهشده WeChat استخراج میکند و به هرکدام یک دکمه کپی میدهد که آن را بهصورت HTML درونخطی از طریق Clipboard API روی کلیپبورد شما میگذارد. کپی را کلیک میکنید، به ویرایشگر WeChat (یا CMS یا یک فیلد متن غنی) میروید، میچسبانید و بلوک قالببندیاش را نگه میدارد. بدون درونخطی کردن دستی، بدون درست کردن نشانهگذاری خراب.
یک چکلیست سریع چسباندن
وقتی یک چسباندن استایلدار خراب میشود، این را طی کنید:
- آیا HTML درونخطی کپی کردید، یا یک اسکرینشات/متن ساده؟ فقط HTML درونخطی بهصورت یک بلوک استایلدار کارآمد چسبانده میشود.
- در بدنه معمولی ویرایشگر بچسبانید، نه یک حالت «کد منبع» یا «متن ساده»، که ممکن است نشانهگذاری را جدا یا فرار کند.
- بلوک را در پیشنمایش بررسی کنید. پیشنمایش خود WeChat نشان میدهد بلوک واقعاً روی یک موبایل چطور رندر میشود — پیش از انتشار آنجا تأیید کنید.
- اگر رنگها مشکلدار به نظر میرسند، پیش از کپی دوبارهرنگ کنید. در استخراجکننده میتوانید روی یک رنگ کلیک کنید و در همهجای بلوک عوضش کنید، پس آن را از قبل در رنگهای برندتان کپی میکنید.
یک محدودیت صادقانه که ارزش تکرار دارد: ابزاری مثل این بلوکها را کپی و سازماندهی میکند — یک استخراجکننده است، نه یک طراح قالب ازصفر، و نمیتواند یک مقاله را با URL بگیرد (مرورگرها گرفتن بینسایتی صفحات WeChat را مسدود میکنند، پس شما محتوا را میچسبانید). درون آن مرزها، HTML درونخطی همان چیزی است که میگذارد یک بلوک استایلدار سفر از یک ویرایشگر به دیگری را با طرح دستنخورده جان سالم به در ببرد.
وقتی چند بار کامل چسبانده شدن یک بلوک را دیدید، تصادفی بودن قبلی معنا پیدا میکند: هرگز تصادفی نبود. همیشه درباره این بود که آیا استایل درون بلوک سفر میکرد.