اگر یک حساب رسمی WeChat (یا هر نشریهی متنغنی) اداره میکنید، چیدمانهایی دیدهاید که آرزو داشتید بتوانید دوباره استفاده کنید — یک کارت بخشِ عنواندار، یک بلوک «ما را دنبال کنید»، یک نقلقول استایلدار، یک جداکننده. کپی دستیشان یعنی کاوش در HTML تودرتو، و یک ویرایش اشتباه کل SVG را خراب میکند. این ابزار بخش کسلکننده را برای شما انجام میدهد: یک مقاله بچسبانید، و هر بلوک استایلدار را بهصورت یک ماژول مستقل و قابلاستفاده بیرون میکشد.
از آنجا میتوانید تصاویر داخل یک بلوک را جابهجا کنید (یکی جدید آپلود کنید یا یک URL بچسبانید)، با کلیک روی هر رنگی که به کار میبرد رنگآمیزی مجددش کنید، بلوک را بهصورت HTML درونخطی آمادهی چسباندن در ویرایشگر WeChat، یک CMS یا هر جعبهی متنغنی کپی کنید — و آنهایی را که میپسندید در یک کتابخانهی محلی که در همین مرورگر زندگی میکند ذخیره کنید. چیزی آپلود نمیشود؛ مواد شما مال خودتان است.
چون همهچیز سمت کلاینت با APIهای Clipboard و localStorage اجرا میشود، نه حسابی هست، نه ابری، و نه بکاندی — همان ایدهی محلیمحورِ پشت بقیهی IMG.DIY.
نحوه استفاده
- یک مقاله بچسبانیدیک مقالهی WeChat (یا هر محتوای غنی) را کپی کنید و در جعبه بچسبانید. میتوانید سورس خام HTML را هم بچسبانید.
- ماژولها را استخراج کنیدروی «استخراج» کلیک کنید — هر بلوک استایلدار بهصورت کارت پیشنمایش خودش ظاهر میشود، جدا شده تا استایلهای صفحه دخالت نکنند.
- ویرایش و استفادهی مجددتصاویر را جابهجا کنید، رنگآمیزی مجدد کنید، سپس با «کپی HTML» جای دیگر بچسبانید، یا با «ذخیره» در کتابخانهی محلی برای دفعهی بعد نگه دارید.
چرا ماژولهای چیدمان را استخراج کنیم بهجای بازسازیشان
بلوکهای خوشظاهر در مقالات WeChat — کارتهای بخش عنواندار، اعلانهای دنبالکنید، نقلقولهای سبکدار، جداکنندههای SVG — تقریباً همیشه HTML و SVG درونخطی دستمونتاژ هستند. بازسازی یکی از صفر یعنی هماهنگ کردن دقیق فاصلهگذاری، رنگها، گرادیانها و اسپنهای تودرتو، و یک ویرایش اشتباه واحد SVG را فرومیپاشد. بهجای آن استخراج بلوک تمامشده هر جزئیات را دستنخورده نگه میدارد و آن را به چیزی بدل میکند که در چند ثانیه میتوانید دوباره استفاده کنید.
این ابزار مقالهای را که میچسبانید تجزیه میکند و هر بلوک سبکدار را بهعنوان یک ماژول مستقل بیرون میکشد. کل یک صفحه را در یک تودهٔ واحد نمیخراشید؛ یک فهرست مرتب از قطعههای تکی و قابلاستفادهٔ مجدد میگیرید — دقیقاً همان چیزی که وقتی یک چیدمان قشنگ در پست دیگری دیدید میخواستید.
محلی-اول، پس داراییها واقعاً مال شمایند
ویرایشگرهای ابری بلوکهای ذخیرهشدهٔ شما را روی سرورهایشان پشت یک حساب نگه میدارند. اینجا کتابخانه در مرورگر خودتان از طریق localStorage زندگی میکند، و میتوانید آن را به یک فایل JSON خروجی بگیرید تا پشتیبان بگیرید یا میان دستگاهها جابهجا کنید. چیزی آپلود نمیشود، ثبتنامی نیست، و تجزیه، جابهجایی تصویر و رنگدهی مجدد همه روی دستگاه شما با DOM و Clipboard API خود مرورگر اجرا میشوند.
بازدهی عملی یک کتابخانهٔ ماژول شخصی و قابلحمل است که با کار شما رشد میکند: یک مقاله بچسبانید، دو یا سه بلوک ارزشمند برای استفادهٔ مجدد را نگه دارید، و دفعهٔ بعد آنها را مستقیم بهصورت HTML درونخطی بیرون بکشید.
مردم از آن برای چه استفاده میکنند
استفادهٔ مجدد از چیدمانی که پسندیدید — یک کارت عنواندار یا جداکنندهٔ قشنگ در مقالهٔ دیگری ببینید — آن را استخراج کنید، به برند خود رنگدهی کنید، و در پیشنویس خودتان کپی کنید.
ساختن یک کیت سبکخانه — سرفصلهای بخش، سبکهای نقلقول و کارتهای دنبالکنید را که هر شماره استفاده میکنید در یک کتابخانهٔ محلی جمع کنید.
جابهجایی تصاویر در یک بلوک قالب — یک چیدمان کارت-تصویر محبوب را نگه دارید و هر بار فقط عکس را با آپلود خودتان جایگزین کنید.
رنگدهی مجدد به برند شما — رنگ تأکید یک بلوک را یکجا همهجا عوض کنید بهجای جستجو در میان سبکهای درونخطی.
جابهجایی بلوکها میان ویرایشگرها — HTML درونخطی را که با سبک دستنخورده در ویرایشگر WeChat، یک CMS یا هر جعبهٔ متن غنی چسبانده میشود کپی کنید.
نگهداشتن یک ذخیرهٔ خصوصی و قابلحمل — کتابخانهٔ خود را بهصورت JSON خروجی بگیرید تا پشتیبان بگیرید یا به مرورگری دیگر ببرید — بدون حساب، بدون ابر.
بلوکهای چیدمان خوب درون مقالههای دیگران زندانیاند
هرکس یک اکانت رسمی WeChat را میگرداند بلوکهای چیدمان را به روش کند جمع میکند. مقالهای را با یک کارت عنوان SVG زیبا، یک پنل مرتب «ما را دنبال کنید»، یک تیتر بخش با یک زبانه رنگی در کنارش میخوانید، و فکر میکنید: من آن ساختار را میخواهم. پس کل مقاله را در ویرایشگرتان کپی میکنید، بعد بیست دقیقه صرف حذف همهچیز جز همان یک بلوک موردنظر میکنید، و دعا میکنید که یک <span> سرگردان را نبُرید که SVG را فرومیریزد. تایپوگرافی SVG وچت بهطرز بدنامی شکننده است — یک صفت بدجاگذاشته، یک تصویر که در جای اشتباه تغییر اندازهاش دادهاید، و کارت روی گوشی نیمی از خوانندگان مثل یک جعبه شکسته رندر میشود. بلوکهایی که میخواهید واقعی، قابلاستفادهمجدد و همانجا در HTML نشستهاند، اما هیچ راه تمیزی برای بیرونکشیدن یکی و نگهداشتنش نیست.
نیمه دیگر درد، مالکیت است. پاسخ بدیهی یک ویرایشگر قالب مثل 秀米 یا 135编辑器 است: کتابخانههای عظیم، بکشورهاکن، واقعاً قدرتمند. اما داراییها در ابر آنها زندگی میکنند، پشت یک حساب کاربری، و اغلب پشت یک سطح عضویت. کیت سبک با دقت سرهمشده شما یک پوشه که مالکش باشید نیست — یک ورودی است که اجارهاش میکنید. اگر بخواهید یک بلوک را به یک همتیمی بدهید، یک رنگ را در همه کارتها یکجا تغییر دهید، یا فقط یک کتابخانه شخصی از پنج تیتری که واقعاً دوباره استفاده میکنید نگه دارید، درون محصول کسی دیگر و با شرایط کسی دیگر کار میکنید.
این ابزار رویکرد عکس را دارد. یک مقاله (یا هر محتوای غنی، یا HTML خام) را میچسبانید و markup را همانجا در مرورگر شما پارس میکند، هر بلوک سبکدار قابلاستفادهمجدد را بیرون میکشد — کارتهای تایپوگرافی SVG، تیترهای بخش عنواندار، کارتهای دنبالکردن، نقلقولهای سبکدار، جداکنندهها — بهعنوان ماژول مستقل خودش. از آنجا هرکدام را مستقیم ویرایش میکنید: تصویر داخل یک کارت را عوض کنید، رنگش را تغییر دهید، آن را بهصورت HTML درونخطی تمیز آماده چسباندن در ویرایشگر WeChat یا هر جعبه متنغنی کپی کنید، و در یک کتابخانه محلی که میتوانید بهصورت JSON صادرش کنید ذخیره کنید. چیزی آپلود نمیشود، حساب کاربریای نیست، و همینکه صفحه بارگذاری شد آفلاین به کار ادامه میدهد. یک محدودیت صادقانه از همان اول: نمیتواند یک مقاله را با URLاش واکشی کند — مرورگرها درخواستهای میانسایتی به mp.weixin.qq.com را مسدود میکنند، پس ورودی همیشه کپیودرج است.
چه چیزی آن را متفاوت میکند
- محلیمحور، چیزی آپلود نمیشود. پارس با
DOMParserدر مرورگر انجام میشود. مقالهای که میچسبانید هرگز دستگاهتان را ترک نمیکند — نه سرور، نه حساب کاربری، نه بکاند. - استخراج هر ماژول. هر بلوک سبکدار بهصورت یک ماژول جداگانه و خودبسنده بیرون میآید بهجای یک دیوار از markup درهم که باید با دست هرسش کنید.
- جابهجایی تصویر، در جا. عکس داخل یک کارت را با آپلود یکی جدید یا چسباندن یک URL تصویر جایگزین کنید — بدون دستزدن به ساختار SVG اطراف که شکنندهاش میکند.
- تغییر رنگ همهجا یکجا. روی هر رنگی که یک ماژول استفاده میکند کلیک کنید و آن را در کل بلوک با یک حرکت تغییر دهید، تا یک کارت بدون گشتن میان کدهای hex با برندتان جور شود.
- کپی HTML درونخطی تمیز. یک کلیک ماژول را بهصورت HTML درونخطی (از طریق Clipboard API) روی کلیپبوردتان میگذارد، آماده چسباندن مستقیم در ویرایشگر WeChat، یک CMS، یا هر فیلد متنغنی.
- کتابخانهای که مالکش هستید. ماژولها را در local storage ذخیره کنید و کل مجموعه را بهصورت JSON صادر یا وارد کنید — یک کیت دارایی واقعی و قابلحمل، نه یک ورودی که اجارهاش کنید.
- پیشنمایشهای جداشده. هر ماژول درون Shadow DOM رندر میشود، پس سبکهای یک بلوک نمیتوانند به بلوک دیگر نشت کنند و پیشنمایش دقیقاً همان چیزی را که میچسبانید نشان میدهد.
- پس از بارگذاری آفلاین کار میکند. بعد از بارگذاری صفحه، برای استخراج، ویرایش یا کپی به اتصال نیازی نیست.
IMG.DIY در برابر سایر ابزارهای چیدمان
| استخراجکننده ماژول IMG.DIY | 秀米 (xiumi.us) | 135编辑器 | i排版 | کپی دستی HTML | |
|---|---|---|---|---|---|
| هدف اصلی | استخراج و مالکیت بلوکهای قابلاستفادهمجدد | ویرایشگر کامل قالب | ویرایشگر کامل قالب | ویرایشگر کامل قالب | — |
| کتابخانه قالب | ندارد (از آنچه میچسبانید میسازید) | عظیم | عظیم | بزرگ | ندارد |
| نیاز به حساب کاربری | خیر | بله | بله | بله | خیر |
| چیزی آپلود میشود | خیر | بله (ابر) | بله (ابر) | بله (ابر) | خیر |
| مالکیت داراییها | بله (JSON محلی) | اجارهای / ابری | اجارهای / ابری | اجارهای / ابری | بله، اما دستی |
| جابهجایی تصویر هر بلوک | بله | بله (در ویرایشگر) | بله (در ویرایشگر) | بله (در ویرایشگر) | دستی |
| تغییر رنگ یک بلوک کامل | بله، یک کلیک | بله (در ویرایشگر) | بله (در ویرایشگر) | بله (در ویرایشگر) | دستی |
| آفلاین کار میکند | بله، پس از بارگذاری | خیر | خیر | خیر | بله |
| قیمت | رایگان | سطح رایگان + پولی | سطح رایگان + پولی | سطح رایگان + پولی | رایگان |
برای انصاف، این جایگزین یک ویرایشگر قالب نیست، و ادعایش را هم ندارد. 秀米، 135编辑器 و i排版 محصولات بالغی با کتابخانههای عظیم قالب، چیدمان زنده بکشورهاکن، و سالها پرداختگی هستند — اگر یک مقاله غنی را از صفر میسازید، آنجاست که میروید، و شهرتشان را درمیآورند. آنچه به شما نمیدهند یک پوشه خصوصی و قابلحمل از بلوکهای مشخصی است که دوباره استفاده میکنید، قابلویرایش بدون یک ورود و عاری از هر چیزی که دستگاهتان را ترک کند. این ابزار یک استخراجکننده و سازماندهنده است، نه یک ویرایشگر: بلوکهایی را که در دنیای واقعی میپسندید به ماژولهایی تبدیل میکند که مالکشان هستید، رنگشان را عوض میکنید، تصویرشان را تغییر میدهید، و هرجا میچسبانید. برای ساختن از ویرایشگرهای بزرگ استفاده کنید؛ برای نگهداشتن قطعهها از این.
چرا IMG.DIY
استخراج بلوک
کارتهای SVG، هدرها، نقلقولها و جداکنندهها را بهصورت ماژولهای مستقل بیرون میکشد.
جابهجایی درونخطی تصویر
هر تصویر در یک بلوک را با تصویر خودتان جایگزین کنید — آپلود یا URL.
رنگآمیزی مجدد با یک کلیک
روی هر رنگی که یک بلوک به کار میبرد کلیک کنید و همهجا یکجا عوضش کنید.
کپی HTML درونخطی
مستقیم در ویرایشگر WeChat، یک CMS، یا هر جعبهی متنغنی بچسبانید.
کتابخانهی محلی
ماژولها را در این مرورگر ذخیره کنید و بهصورت JSON خروجی/ورودی بگیرید.
بدون آپلود
کاملاً در مرورگر شما اجرا میشود — مواد شما هرگز از دستگاهتان خارج نمیشوند.