Jeśli prowadzisz Oficjalne Konto WeChat (lub dowolną publikację z tekstem sformatowanym), widziałeś układy, które chciałbyś wykorzystać ponownie — karta tytułowa sekcji, blok „obserwuj nas”, stylizowany cytat, separator. Kopiowanie ich ręcznie oznacza grzebanie w zagnieżdżonym HTML, a jedna błędna edycja psuje cały SVG. To narzędzie wykonuje żmudną część za Ciebie: wklej artykuł, a wyciągnie każdy stylizowany blok jako niezależny moduł do ponownego użycia.
Stamtąd możesz podmieniać obrazy wewnątrz bloku (wgraj nowy lub wklej URL), zmieniać jego kolory, klikając dowolny użyty kolor, kopiować blok jako wbudowany HTML gotowy do wklejenia w edytorze WeChat, systemie CMS lub dowolnym polu tekstu sformatowanego — i zapisywać te, które lubisz, w lokalnej bibliotece żyjącej w tej przeglądarce. Nic nie jest przesyłane; Twoje materiały należą do Ciebie.
Ponieważ wszystko działa po stronie klienta z użyciem API Clipboard i localStorage, nie ma konta, nie ma chmury i nie ma zaplecza — ta sama idea „lokalnie przede wszystkim”, która stoi za resztą IMG.DIY.
Jak używać
- Wklej artykułSkopiuj artykuł z WeChat (lub dowolną rozbudowaną treść) i wklej go do pola. Możesz też wkleić surowe źródło HTML.
- Wyodrębnij modułyKliknij Wyodrębnij — każdy stylizowany blok pojawia się jako własna karta podglądu, odizolowana, aby style strony nie mogły w niego ingerować.
- Edytuj i wykorzystaj ponowniePodmieniaj obrazy, zmieniaj kolory, a następnie Kopiuj HTML, aby wkleić gdzie indziej, lub Zapisz do lokalnej biblioteki na przyszłość.
Dlaczego wyodrębniać moduły układu zamiast je odbudowywać
Ładnie wyglądające bloki w artykułach WeChat — zatytułowane karty sekcji, zachęty do obserwowania, ostylowane cytaty, dzielniki SVG — są niemal zawsze ręcznie składanym wbudowanym HTML i SVG. Odbudowanie takiego od zera oznacza dokładne dopasowanie odstępów, kolorów, gradientów i zagnieżdżonych elementów span, a jedna błędna zmiana rozwala SVG. Wyodrębnienie gotowego bloku zamiast tego zachowuje każdy szczegół w całości i zamienia go w coś, czego możesz użyć ponownie w kilka sekund.
To narzędzie parsuje wklejony artykuł i wyciąga każdy ostylowany blok jako niezależny moduł. Nie zeskrobujesz całej strony w jeden blok; dostajesz schludną listę pojedynczych, wielokrotnego użytku elementów — dokładnie to, czego chciałeś, gdy zobaczyłeś ładny układ w czyimś wpisie.
Lokalne przede wszystkim, więc zasoby są naprawdę Twoje
Edytory w chmurze trzymają Twoje zapisane bloki na swoich serwerach za kontem. Tutaj biblioteka żyje w Twojej własnej przeglądarce przez localStorage, a możesz wyeksportować ją do pliku JSON, aby zrobić kopię zapasową lub przenieść między maszynami. Nic nie jest przesyłane, nie ma rejestracji, a parsowanie, podmiana obrazów i zmiana kolorów wszystko działa na Twoim urządzeniu za pomocą własnych API DOM i Clipboard przeglądarki.
Praktyczną korzyścią jest osobista, przenośna biblioteka modułów, która rośnie w miarę pracy: wklej artykuł, zachowaj te dwa lub trzy bloki warte ponownego użycia, a następnym razem wyciągnij je z powrotem prosto jako wbudowany HTML.
Do czego się przydaje
Użyj ponownie układu, który Ci się spodobał — Zobacz ładną zatytułowaną kartę lub dzielnik w innym artykule — wyodrębnij go, przekoloruj do swojej marki i skopiuj do własnego szkicu.
Zbuduj zestaw stylu domowego — Zbierz nagłówki sekcji, style cytatów i karty zachęty do obserwowania, których używasz w każdym wydaniu, w jedną lokalną bibliotekę.
Podmień obrazy w bloku szablonu — Zachowaj ulubiony układ karty z obrazem i po prostu podmieniaj zdjęcie za każdym razem na własne przesłanie.
Przekoloruj do swojej marki — Zmień kolor akcentu bloku wszędzie naraz zamiast szukać w wbudowanych stylach.
Przenoś bloki między edytorami — Skopiuj wbudowany HTML, który wkleja się z zachowanym stylem, do edytora WeChat, CMS lub dowolnego pola tekstu sformatowanego.
Trzymaj prywatny, przenośny zapas — Wyeksportuj swoją bibliotekę jako JSON, aby zrobić jej kopię zapasową lub przenieść ją do innej przeglądarki — bez konta, bez chmury.
Dobre bloki układu są uwięzione wewnątrz cudzych artykułów
Każdy, kto prowadzi Oficjalne Konto WeChat, zbiera bloki układu powolnym sposobem. Czytasz artykuł z pięknym tytułem-kartą w SVG, schludnym panelem „obserwuj nas", nagłówkiem sekcji z kolorową zakładką z boku i myślisz: chcę tę strukturę. Więc kopiujesz cały artykuł do swojego edytora, a potem spędzasz dwadzieścia minut na usuwaniu wszystkiego poza tym jednym blokiem, którego chciałeś, modląc się, żeby nie podwędzić jakiegoś zabłąkanego <span>, który sprawi, że SVG się rozsypie. Typografia SVG w WeChat jest notorycznie krucha — jeden źle umieszczony atrybut, jeden obraz przeskalowany w złym miejscu i karta renderuje się jako zepsuty prostokąt na połowie telefonów czytelników. Bloki, których chcesz, są prawdziwe, wielokrotnego użytku i siedzą tuż tam w HTML, ale nie ma czystego sposobu, by wyciągnąć jeden i go zachować.
Druga połowa bólu to własność. Oczywistą odpowiedzią jest edytor szablonów jak 秀米 czy 135编辑器: ogromne biblioteki, przeciągnij-i-upuść, naprawdę potężne. Ale zasoby żyją w ich chmurze, za kontem, a często za progiem członkostwa. Twój starannie zestawiony zestaw stylów nie jest folderem, który posiadasz — to login, który wynajmujesz. Jeśli chcesz przekazać blok współpracownikowi, zmienić kolor we wszystkich kartach naraz albo po prostu trzymać osobistą bibliotekę pięciu nagłówków, których faktycznie używasz ponownie, pracujesz wewnątrz cudzego produktu na cudzych warunkach.
To narzędzie przyjmuje przeciwne podejście. Wklejasz artykuł (albo dowolną wzbogaconą treść, albo surowy HTML), a ono parsuje znaczniki bezpośrednio w Twojej przeglądarce, wyciągając każdy blok stylizowany wielokrotnego użytku — karty typografii SVG, tytułowane nagłówki sekcji, karty „obserwuj nas", stylizowane cytaty, separatory — jako własny niezależny moduł. Stamtąd edytujesz każdy bezpośrednio: podmieniasz obraz wewnątrz karty, zmieniasz jej kolor, kopiujesz ją jako czysty wbudowany HTML gotowy do wklejenia w edytor WeChat czy dowolne pole tekstu wzbogaconego i zapisujesz ją do lokalnej biblioteki, którą możesz wyeksportować jako JSON. Nic nie jest wysyłane, nie ma konta, a gdy strona się wczyta, działa dalej offline. Jedno uczciwe ograniczenie na wstępie: nie może pobrać artykułu po jego URL — przeglądarki blokują żądania międzywitrynowe do mp.weixin.qq.com, więc wejściem zawsze jest kopiuj-wklej.
Co go wyróżnia
- Najpierw lokalnie, nic nie wysyłane. Parsowanie dzieje się w przeglądarce za pomocą
DOMParser. Artykuł, który wklejasz, nigdy nie opuszcza Twojej maszyny — bez serwera, bez konta, bez zaplecza. - Ekstrakcja per moduł. Każdy stylizowany blok wychodzi jako osobny, samowystarczalny moduł zamiast ściany splątanych znaczników, którą musisz ręcznie przycinać.
- Podmiana obrazu, w miejscu. Zastąp zdjęcie wewnątrz karty, wgrywając nowe lub wklejając URL obrazu — bez dotykania otaczającej struktury SVG, która czyni ją kruchą.
- Zmiana koloru wszędzie naraz. Kliknij dowolny kolor, którego moduł używa, i zmień go w całym bloku jednym ruchem, więc karta pasuje do Twojej marki bez polowania na kody hex.
- Czyste kopiowanie wbudowanego HTML. Jedno kliknięcie umieszcza moduł w schowku jako wbudowany HTML (przez Clipboard API), gotowy do wklejenia prosto w edytor WeChat, CMS czy dowolne pole tekstu wzbogaconego.
- Biblioteka, którą posiadasz. Zapisuj moduły do pamięci lokalnej i eksportuj lub importuj całą kolekcję jako JSON — prawdziwy, przenośny zestaw zasobów, a nie login, który wynajmujesz.
- Odizolowane podglądy. Każdy moduł renderuje się wewnątrz Shadow DOM, więc style jednego bloku nie mogą przeciekać do drugiego, a podgląd pokazuje Ci dokładnie to, co wkleisz.
- Działa offline, gdy wczytane. Po wczytaniu strony połączenie nie jest potrzebne do wyodrębniania, edytowania czy kopiowania.
IMG.DIY a inne narzędzia do układów
| IMG.DIY Module Extractor | 秀米 (xiumi.us) | 135编辑器 | i排版 | Kopiowanie HTML ręcznie | |
|---|---|---|---|---|---|
| Główny cel | Wyodrębnij i posiadaj bloki wielokrotnego użytku | Pełny edytor szablonów | Pełny edytor szablonów | Pełny edytor szablonów | — |
| Biblioteka szablonów | Brak (budujesz z tego, co wklejasz) | Ogromna | Ogromna | Duża | Brak |
| Wymagane konto | Nie | Tak | Tak | Tak | Nie |
| Cokolwiek wysyłane | Nie | Tak (chmura) | Tak (chmura) | Tak (chmura) | Nie |
| Posiadasz zasoby | Tak (lokalny JSON) | Wynajmowane / chmura | Wynajmowane / chmura | Wynajmowane / chmura | Tak, ale ręcznie |
| Podmiana obrazu per blok | Tak | Tak (w edytorze) | Tak (w edytorze) | Tak (w edytorze) | Ręcznie |
| Zmiana koloru całego bloku | Tak, jedno kliknięcie | Tak (w edytorze) | Tak (w edytorze) | Tak (w edytorze) | Ręcznie |
| Działa offline | Tak, gdy wczytane | Nie | Nie | Nie | Tak |
| Cena | Za darmo | Darmowy plan + płatny | Darmowy plan + płatny | Darmowy plan + płatny | Za darmo |
Uczciwie, to nie zamiennik edytora szablonów i nie udaje, że nim jest. 秀米, 135编辑器 i i排版 to dojrzałe produkty z ogromnymi bibliotekami szablonów, układem przeciągnij-i-upuść na żywo i latami dopracowania — jeśli budujesz bogaty artykuł od zera, to tam idziesz, i zasługują na swoją reputację. Czego nie dają, to prywatnego, przenośnego folderu konkretnych bloków, których używasz ponownie, edytowalnych bez logowania i wolnych od czegokolwiek opuszczającego Twoją maszynę. To narzędzie jest ekstraktorem i organizatorem, nie edytorem: zamienia bloki, które podziwiasz w sieci, w moduły, które posiadasz, zmieniasz ich kolor, podmieniasz obraz i wklejasz gdziekolwiek. Używaj dużych edytorów do komponowania; używaj tego, by zachować kawałki.
Dlaczego IMG.DIY
Wyodrębnianie bloków
Wyciąga karty SVG, nagłówki, cytaty i separatory jako niezależne moduły.
Wbudowana podmiana obrazów
Zastąp dowolny obraz w bloku własnym — z pliku lub URL.
Zmiana koloru jednym kliknięciem
Kliknij dowolny kolor użyty w bloku i zmień go wszędzie naraz.
Kopiuj wbudowany HTML
Wklejaj prosto do edytora WeChat, systemu CMS lub dowolnego pola tekstu sformatowanego.
Lokalna biblioteka
Zapisuj moduły w tej przeglądarce oraz eksportuj/importuj je jako JSON.
Bez przesyłania
Działa w całości w Twojej przeglądarce — Twoje materiały nigdy nie opuszczają urządzenia.