Якщо ви ведете офіційний акаунт WeChat (чи будь-яке видання з насиченим текстом), ви бачили макети, які хотілося б повторно використати — картку розділу із заголовком, блок «підпишіться на нас», стильову цитату, роздільник. Копіювати їх вручну означає копирсатися у вкладеному HTML, і одна помилка руйнує весь SVG. Цей інструмент робить нудну частину за вас: вставте статтю, і він витягне кожен стильовий блок як незалежний, повторно використовуваний модуль.
Далі ви можете замінити зображення всередині блока (завантажити нове чи вставити URL), перефарбувати його, клацнувши будь-який колір, який він використовує, скопіювати блок як вбудований HTML, готовий до вставлення в редактор WeChat, CMS чи будь-яке поле насиченого тексту — і зберегти ті, що сподобалися, у локальну бібліотеку, що живе в цьому браузері. Нічого не завантажується на сервер; ваші матеріали належать вам.
Оскільки все працює на боці клієнта з API Clipboard і localStorage, немає ані акаунта, ані хмари, ані бекенду — та сама ідея local-first, що й у решти IMG.DIY.
Як користуватися
- Вставте статтюСкопіюйте статтю WeChat (чи будь-який насичений контент) і вставте в поле. Ви також можете вставити сирий HTML-код.
- Витягніть модуліНатисніть «Витягти» — кожен стильовий блок з'явиться як власна картка перегляду, ізольована, щоб стилі сторінки не заважали.
- Редагуйте й використовуйтеЗамінюйте зображення, перефарбовуйте, тоді «Скопіювати HTML» для вставлення деінде або «Зберегти» у локальну бібліотеку на майбутнє.
Чому витягати модулі розкладки, а не перебудовувати їх
Гарні блоки у статтях WeChat — заголовкові секційні картки, підказки «підпишіться», стилізовані цитати, SVG-роздільники — майже завжди зібраний вручну вбудований HTML і SVG. Перебудова одного з нуля означає точно підібрати відступи, кольори, градієнти й вкладені span, а одне неправильне редагування руйнує SVG. Витягання готового блоку натомість зберігає кожну деталь неушкодженою й перетворює його на те, що можна повторно використати за секунди.
Цей інструмент парсить статтю, яку ви вставляєте, і піднімає кожен стилізований блок як незалежний модуль. Ви не скрапите цілу сторінку в одну грудку; ви отримуєте охайний список окремих, багаторазових частин — рівно те, чого ви хотіли, коли побачили гарну розкладку в чужому дописі.
Спершу локально, тож ресурси справді ваші
Хмарні редактори тримають ваші збережені блоки на своїх серверах за акаунтом. Тут бібліотека живе у вашому власному браузері через localStorage, і ви можете експортувати її у файл JSON, щоб зробити резервну копію чи переносити між машинами. Нічого не завантажується, немає реєстрації, а парсинг, заміна зображень і перефарбування — усе працює на вашому пристрої за допомогою власних API браузера DOM і Clipboard.
Практичний виграш — це особиста, переносна бібліотека модулів, що росте, поки ви працюєте: вставте статтю, залиште два-три блоки, варті повторного використання, а наступного разу перетягніть їх просто назовні як вбудований HTML.
Для чого його використовують
Повторно використати розкладку, яка сподобалась — Побачили гарну заголовкову картку чи роздільник в іншій статті — витягніть її, перефарбуйте під ваш бренд і скопіюйте у власну чернетку.
Побудувати набір у фірмовому стилі — Зберіть секційні заголовки, стилі цитат і картки «підпишіться», які ви використовуєте щовипуску, в одну локальну бібліотеку.
Замінити зображення в шаблонному блоці — Залиште улюблену розкладку картки із зображенням і просто замінюйте картинку щоразу власним завантаженням.
Перефарбувати під ваш бренд — Змініть акцентний колір блоку всюди одразу замість пошуку по вбудованих стилях.
Переносити блоки між редакторами — Скопіюйте вбудований HTML, що вставляється зі збереженим стилем, у редактор WeChat, CMS чи будь-яке поле з форматованим текстом.
Тримати приватну, переносну заначку — Експортуйте вашу бібліотеку як JSON, щоб зробити резервну копію чи перенести в інший браузер — без акаунта, без хмари.
Хороші блоки розкладки замкнені всередині чужих статей
Кожен, хто веде офіційний акаунт WeChat, збирає блоки розкладки повільним способом. Ви читаєте статтю з гарною SVG-карткою заголовка, охайною панеллю «підпишіться на нас», заголовком секції з кольоровою вкладкою збоку й думаєте: я хочу цю структуру. Тож ви копіюєте всю статтю у свій редактор, а потім двадцять хвилин видаляєте все, крім того одного блоку, який хотіли, молячись, щоб не зачепити випадковий <span>, від якого SVG обвалиться. SVG-типографіка WeChat сумнозвісно крихка — один недоречний атрибут, одне зображення, розмір якого ви змінили не в тому місці, і картка рендериться як зламана коробка на половині телефонів читачів. Блоки, яких ви хочете, справжні, придатні для повторного використання й лежать прямо там, у HTML, але немає чистого способу витягнути один і зберегти його.
Друга половина болю — це власність. Очевидна відповідь — редактор шаблонів на кшталт 秀米 чи 135编辑器: величезні бібліотеки, drag-and-drop, справді потужно. Але ресурси живуть у їхній хмарі, за акаунтом і часто за рівнем членства. Ваш ретельно зібраний стильовий набір — це не тека, якою ви володієте, а вхід, який ви орендуєте. Якщо ви хочете передати блок колезі, підправити колір на всіх картках одразу чи просто тримати особисту бібліотеку з п'яти заголовків, які ви справді повторно використовуєте, ви працюєте всередині чужого продукту на чужих умовах.
Цей інструмент застосовує протилежний підхід. Ви вставляєте статтю (чи будь-який форматований контент, чи сирий HTML), і він парсить розмітку прямо у вашому браузері, витягуючи кожен придатний для повторного використання стилізований блок — SVG-картки типографіки, заголовки секцій, картки «підпишіться на нас», стилізовані цитати, роздільники — як окремий незалежний модуль. Звідти ви редагуєте кожен прямо: замініть зображення всередині картки, перефарбуйте її, скопіюйте як чистий вбудований HTML, готовий до вставлення в редактор WeChat чи будь-яке поле форматованого тексту, і збережіть у локальну бібліотеку, яку можна експортувати як JSON. Нічого не завантажується, немає акаунта, і коли сторінка завантажилася, вона продовжує працювати офлайн. Одне чесне обмеження одразу: він не може отримати статтю за її URL — браузери блокують міжсайтові запити до mp.weixin.qq.com, тож ввід завжди через копіювання-вставлення.
Чим це відрізняється
- Спершу локально, нічого не завантажується. Парсинг відбувається у браузері через
DOMParser. Стаття, яку ви вставляєте, ніколи не залишає вашу машину — без сервера, без акаунта, без бекенда. - Витягання по модулях. Кожен стилізований блок виходить як окремий, самодостатній модуль замість стіни заплутаної розмітки, яку доводиться підрізати вручну.
- Заміна зображення на місці. Замініть картинку всередині картки, завантаживши нову чи вставивши URL зображення — не торкаючись навколишньої SVG-структури, що робить її крихкою.
- Перефарбування скрізь одразу. Клацніть будь-який колір, який використовує модуль, і змініть його по всьому блоку за один рух, тож картка відповідає вашому бренду без полювання за hex-кодами.
- Чисте копіювання вбудованого HTML. Один клік кладе модуль у ваш буфер обміну як вбудований HTML (через Clipboard API), готовий до вставлення прямо в редактор WeChat, CMS чи будь-яке поле форматованого тексту.
- Бібліотека, якою ви володієте. Зберігайте модулі в локальне сховище й експортуйте чи імпортуйте всю колекцію як JSON — справжній, переносний набір ресурсів, а не вхід, який ви орендуєте.
- Ізольовані попередні перегляди. Кожен модуль рендериться всередині Shadow DOM, тож стилі одного блоку не можуть просочитися в інший, а попередній перегляд показує вам точно те, що ви вставите.
- Працює офлайн, коли завантажено. Після завантаження сторінки з'єднання не потрібне для витягання, редагування чи копіювання.
IMG.DIY проти інших інструментів розкладки
| IMG.DIY Module Extractor | 秀米 (xiumi.us) | 135编辑器 | i排版 | Копіювати HTML вручну | |
|---|---|---|---|---|---|
| Основна мета | Витягти й володіти придатними блоками | Повний редактор шаблонів | Повний редактор шаблонів | Повний редактор шаблонів | — |
| Бібліотека шаблонів | Немає (будуєте з того, що вставили) | Величезна | Величезна | Велика | Немає |
| Потрібен акаунт | Ні | Так | Так | Так | Ні |
| Щось завантажується | Ні | Так (хмара) | Так (хмара) | Так (хмара) | Ні |
| Володіння ресурсами | Так (локальний JSON) | Орендовано / хмара | Орендовано / хмара | Орендовано / хмара | Так, але вручну |
| Заміна зображення в блоці | Так | Так (у редакторі) | Так (у редакторі) | Так (у редакторі) | Вручну |
| Перефарбування всього блоку | Так, один клік | Так (у редакторі) | Так (у редакторі) | Так (у редакторі) | Вручну |
| Працює офлайн | Так, коли завантажено | Ні | Ні | Ні | Так |
| Ціна | Безкоштовно | Безкоштовний рівень + платно | Безкоштовний рівень + платно | Безкоштовний рівень + платно | Безкоштовно |
Заради справедливості: це не заміна редактора шаблонів, і він не вдає нею бути. 秀米, 135编辑器 та i排版 — зрілі продукти з величезними бібліотеками шаблонів, живою розкладкою drag-and-drop і роками шліфування — якщо ви будуєте багату статтю з нуля, туди й ідіть, і вони заслуговують своєї репутації. Чого вони вам не дають — це приватної, переносної теки з конкретними блоками, які ви повторно використовуєте, редагованими без входу й вільними від будь-чого, що залишає вашу машину. Цей інструмент — витягувач і організатор, а не редактор: він перетворює блоки, якими ви захоплюєтеся в дикій природі, на модулі, якими ви володієте, перефарбовуєте, переоснащуєте зображеннями й вставляєте будь-де. Використовуйте великі редактори, щоб компонувати; використовуйте цей, щоб зберігати шматки.
Чому IMG.DIY
Витяг блоків
Витягує SVG-картки, заголовки, цитати й роздільники як незалежні модулі.
Заміна зображень на місці
Замініть будь-яке зображення в блоці власним — завантаженням чи URL.
Перефарбовування в один клік
Клацніть будь-який колір, який використовує блок, і змініть його всюди одразу.
Копіювання вбудованого HTML
Вставляйте прямо в редактор WeChat, CMS чи будь-яке поле насиченого тексту.
Локальна бібліотека
Зберігайте модулі в цей браузер та експортуйте/імпортуйте їх як JSON.
Без завантаження
Працює повністю у вашому браузері — ваші матеріали ніколи не залишають пристрій.