یک مقالهٔ خوشطراحیِ ویچت را باز کنید و متوجه میشوید بخشهایی که آن را حرفهای جلوه میدهند کلمات نیستند — بلوکهای سبکدار هستند. کارتِ عنوانِ گرادیانی در بالا، سرصفحههای کوچکِ بخش با یک نوارِ رنگی، کارتِ «ما را دنبال کنید» در پایان، جعبههای نقلقول با گوشههای گرد. بسیاری از آنها بهعنوانِ SVG ساخته شدهاند، و SVG همان است که اجازه میدهد شکل و رنگِ دقیقشان را حفظ کنند صرفنظر از اینکه چه گوشیای رندرشان میکند.
این بخشِ آزاردهنده است: وقتی یکی را که دوست دارید پیدا میکنید و میکوشید دوباره به کارش ببرید، کپیکردنش معمولاً خرابش میکند. در ویرایشگرِ ویچت میچسبانید و چیدمان فرومیریزد، رنگها تخت میشوند، یا نیمی از بلوک ناپدید میشود. این راهنما توضیح میدهد چرا این پیش میآید و چطور آن بلوکها را طوری استخراج کنید که دستنخورده بمانند.
چرا ویچت برای چیدمان به SVG تکیه میکند
ویرایشگرِ ویچت بیشترِ CSS را حذف میکند. نمیتوانید یک برگهٔ سبک بچسبانید، و بسیاری از سبکهای درونخطی فیلتر میشوند. پس طراحان یک راهِ دورزدن پیدا کردند: قطعاتِ تزئینی را بهعنوانِ SVG بسازند، جایی که شکل، گرادیان و جایگیریِ متن همه درونِ نشانهگذاریِ SVG زندگی میکنند. ویچت آن نشانهگذاری را بیشتر دستنخورده میگذارد، پس بلوک همهجا یکسان رندر میشود.
این هم دلیلی است که این بلوکها در اصل اینقدر قابلِ استفادهٔ دوبارهاند. یک کارتِ عنوانِ SVG خودبسنده است. به یک فایلِ بیرونی یا یک کلاسِ تعریفشده جای دیگری روی صفحه وابسته نیست. در تئوری میتوانید بیرونش بکشید و در مقالهٔ خودتان بیندازیدش. مشکل فقط در بیرونکشیدن است.
چرا کپیِ سادهلوحانه بلوک را میشکند
وقتی یک بلوکِ سبکدار را روی یک صفحهٔ رندرشده انتخاب و کپی میکنید، معمولاً نسخهٔ رندرشدهٔ مرورگر را میگیرید، نه منبعِ اصلی را. سه چیز خراب میشود:
- نشانهگذاریِ پیچشی گم میشود. بلوک اغلب درونِ ظرفهای تودرتو مینشیند که جایگیری را حمل میکنند. فقط بخشِ نمایان را بگیرید و جعبهاش را از دست میدهد.
- قطعاتِ کدشده مخدوش میشوند. SVG اغلب تصاویرِ پسزمینه یا فونتها را بهصورتِ دادهٔ کدشده نگه میدارد. یک کپی-چسباندن از مسیرِ غلط میتواند آن رشته را خراب کند.
- نمیتوانید تمیز دوبارهرنگش کنید. حتی اگر جان به در ببرد، رنگها در دهها جای نشانهگذاری پخته شدهاند. تغییرِ تمِ رنگی بهصورتِ دستی یعنی جستوجو در کدِ خام.
برای استفادهٔ دوبارهٔ قابلاعتمادِ این بلوکها نه یک اسکرینشات میخواهید و نه حدسِ کلیپبوردِ مرورگر. نشانهگذاریِ واقعیِ بلوک را میخواهید، بیرونکشیدهشده بهعنوانِ یک واحدِ مستقل.
استخراجِ بلوکها به روشِ قابلاعتماد
رویکردِ تمیز این است که کلِ محتوای منبعِ مقاله را کپی کنید و بگذارید یک ابزار تجزیهاش کند، بهجای تلاش برای انتخابِ دستیِ یک بلوک روی صفحه. استخراجکنندهٔ ماژولِ چیدمانِ IMG.DIY دقیقاً همین را میکند: محتوا را میچسبانید، نشانهگذاری را با تجزیهکنندهٔ DOM خودِ مرورگر میخواند، و بلوکهای سبکدارِ قابلِ استفادهٔ دوباره را جدا میکند — کارتهای حروفنگاریِ SVG، سرصفحههای عنواندار، کارتهای دنبالکنید، نقلقولهای سبکدار، جداکنندهها — هرکدام بهعنوانِ یک ماژولِ مستقل.
یک هشدارِ مهم، بهصراحت گفتهشده: ابزار نمیتواند یک مقاله را با URL آن واکشی کند. مرورگرها واکشیهای میانسایتیِ mp.weixin.qq.com را مسدود میکنند، پس هیچ ابزارِ مرورگریای نمیتواند یک صفحهٔ ویچت را با پیوند پایین بکشد. محتوا را کپی میکنید و میچسبانید. این محدودیتی برای دورزدن نیست بلکه شیوهٔ کارِ مدلِ امنیتیِ وب است.
چون هر بلوک جدا میشود و در جعبهشنیِ Shadow DOM خودش پیشنمایش میشود، سبکهای یک ماژول نمیتوانند در دیگری نشت کنند. آنچه در پیشنمایش میبینید همان است که آن بلوک واقعاً هست.
دوبارهرنگکردن بدونِ دستزدن به کد
وقتی یک بلوک استخراج شد، مشکلِ رنگی که پیشتر گفتم برایتان حل میشود. روی هر رنگی در یک ماژول کلیک کنید و تغییرش دهید — و همان رنگ هرجا که در آن بلوک ظاهر میشود بهروز میشود. پس یک کارتِ عنوانِ آبی در یک حرکت به سبزِ برندتان بدل میشود، بهجای اینکه شش مقدارِ هگزِ دفنشده در SVG را ویرایش کنید. میتوانید تصاویرِ جانگهدارِ درونِ یک ماژول را هم با مالِ خودتان عوض کنید.
اینجاست که «استفادهٔ دوباره» از تئوریکبودن دست میکشد. بلوکی که از مقالهٔ کسِ دیگری خوشتان آمد به بلوکی در پالتِ شما، در رنگهای شما، آمادهٔ انداختن در نوشتهٔ بعدیتان بدل میشود.
ساختنِ کتابخانهٔ ماژولِ خودتان
سودِ واقعی این است که این کار را چند بار انجام دهید و آنچه استخراج میکنید را نگه دارید. هر ماژولی که دوست دارید میتواند در یک کتابخانهٔ محلی که در مرورگرتان زندگی میکند (از طریقِ localStorage) ذخیره شود، و میتوانید کلِ کتابخانه را به یک فایلِ JSON صادر کنید تا از آن پشتیبان بگیرید یا به دستگاهی دیگر منتقلش کنید. چیزی آپلود نمیشود و حسابی نیست — کتابخانه مالِ شماست، روی دستگاهتان.
طیِ چند هفته یک کیتِ شخصی میسازید: چند کارتِ عنوان، یک سرصفحهٔ بخش که به آن اعتماد دارید، یک کارتِ پاورقی، یکیدو جداکننده. وقتِ چیدمانِ یک مقالهٔ جدید که رسید، از مجموعهٔ خودتان میکشید بهجای اینکه دوباره در پستهای دیگران بگردید. برای واردکردنِ یک بلوکِ سبکدار به ویرایشگر، آن را بهعنوانِ HTML درونخطی کپی میکنید و میچسبانید — بلوک قالببندیاش را حفظ میکند چون سبکدهی همراهِ نشانهگذاری سفر میکند.
با یک بلوکی که همیشه دوستش داشتهاید شروع کنید، تمیز استخراجش کنید، به برندتان دوبارهرنگش کنید، و ذخیرهاش کنید. این کلِ چرخه است، و روی هم انباشته میشود.