Kung nagpapatakbo ka ng WeChat Official Account (o kahit anong rich-text na publikasyon), nakakita ka na ng mga layout na sana magagamit mo muli — isang titled section card, isang follow-us block, isang styled quote, isang divider. Ang pagkopya nito nang manu-mano ay pagsuyod sa nested na HTML, at isang maling edit ay masisira ang buong SVG. Ginagawa ng tool na ito ang nakakapagod na bahagi para sa iyo: i-paste ang article, at hinahango nito ang bawat styled block bilang malaya at muling magagamit na module.
Mula doon pwede mong palitan ang mga larawan sa loob ng block (mag-upload ng bago o mag-paste ng URL), baguhin ang kulay nito sa pamamagitan ng pag-click sa kahit anong kulay na ginagamit nito, kopyahin ang block bilang inline HTML na handang i-paste sa WeChat editor, isang CMS, o kahit anong rich-text box — at i-save ang mga gusto mo sa lokal na library na nasa browser na ito. Walang ina-upload; ang iyong mga materyales ay sa iyo.
Dahil lahat ay tumatakbo client-side gamit ang Clipboard at localStorage API, walang account, walang cloud, at walang backend — ang parehong local-first na ideya sa likod ng iba pang bahagi ng IMG.DIY.
Paano gamitin
- I-paste ang articleKopyahin ang WeChat article (o kahit anong rich content) at i-paste ito sa kahon. Pwede ka ring mag-paste ng raw na HTML source.
- Hanguin ang mga moduleI-click ang Extract — ang bawat styled block ay lumalabas bilang sariling preview card, na hiwalay para hindi makasali ang mga estilo ng page.
- I-edit at gamitin muliPalitan ang mga larawan, baguhin ang kulay, tapos Kopyahin ang HTML para i-paste kahit saan, o I-save sa iyong lokal na library para sa susunod.
Bakit kunin ang layout modules sa halip na buuin muli
Ang magaganda ang hitsurang block sa mga WeChat article — mga titled section card, follow-us prompt, styled quote, SVG divider — ay halos palaging manu-manong binuong inline HTML at SVG. Ang muling paggawa nito mula sa simula ay nangangahulugan ng eksaktong pagtutugma ng padding, kulay, gradient, at nested span, at isang maling edit ay bumabagsak sa SVG. Ang pagkuha ng tapos na block sa halip ay pinananatili ang bawat detalye at ginagawa itong bagay na magagamit muli sa ilang segundo.
Pina-parse ng tool na ito ang article na i-paste mo at kinukuha ang bawat styled block bilang isang independiyenteng module. Hindi ka nag-scrape ng buong pahina tungong isang blob; nakakakuha ka ng malinis na listahan ng mga indibidwal at reusable na piraso — ang eksaktong gusto mo nang makita mo ang magandang layout sa post ng iba.
Local-first, kaya talagang sa iyo ang mga asset
Iniimbak ng mga cloud editor ang iyong na-save na block sa kanilang server sa likod ng isang account. Dito nananatili ang library sa iyong sariling browser sa pamamagitan ng localStorage, at puwede mo itong i-export sa isang JSON file para i-back up o ilipat sa pagitan ng mga makina. Walang ina-upload, walang sign-up, at ang parsing, image swapping, at recoloring ay tumatakbo lahat sa iyong device gamit ang sariling DOM at Clipboard APIs ng browser.
Ang praktikal na benepisyo ay isang personal at portable na module library na lumalaki habang nagtatrabaho ka: mag-paste ng article, panatilihin ang dalawa o tatlong block na sulit gamitin muli, at sa susunod i-drag sila diretso palabas bilang inline HTML.
Para saan ito ginagamit ng mga tao
Gamitin muli ang layout na nagustuhan mo — Makakita ng magandang titled card o divider sa ibang article — kunin ito, i-recolor sa iyong brand, at kopyahin sa sarili mong draft.
Bumuo ng house-style kit — Tipunin ang mga section header, quote style, at follow-us card na ginagamit mo bawat isyu sa isang lokal na library.
Palitan ang mga image sa isang template block — Panatilihin ang paboritong image-card na layout at palitan lang ang larawan sa tuwina ng sarili mong upload.
I-recolor sa iyong brand — Baguhin ang accent color ng isang block nang sabay-sabay sa halip na hanapin sa mga inline style.
Ilipat ang block sa pagitan ng mga editor — Kopyahin ang inline HTML na naipa-paste nang buo ang styling sa WeChat editor, isang CMS, o kahit anong rich-text box.
Panatilihin ang pribado at portable na imbakan — I-export ang iyong library bilang JSON para i-back up o dalhin sa ibang browser — walang account, walang cloud.
Nakakulong sa loob ng artikulo ng iba ang magagandang layout block
Ang sinumang nagpapatakbo ng WeChat Official Account ay nangongolekta ng layout block sa mabagal na paraan. Nagbabasa ka ng artikulong may magandang SVG title card, maayos na "follow us" panel, section header na may kulay na tab sa gilid, at naiisip mo: gusto ko iyang istruktura. Kaya kinokopya mo ang buong artikulo sa editor mo, tapos gumugugol ng dalawampung minuto sa pagtanggal ng lahat maliban sa isang block na gusto mo, dumadasal na huwag kang makapitas ng ligaw na <span> na magpapagulong sa SVG. Kilalang-kilalang marupok ang SVG typography ng WeChat — isang maling-lugar na attribute, isang larawang nire-resize mo sa maling lugar, at nagre-render ang card bilang basag na kahon sa kalahati ng telepono ng mga mambabasa. Ang mga block na gusto mo ay tunay, magagamit-muli, at nakaupo mismo doon sa HTML, pero walang malinis na paraan para kunin ang isa at itago.
Ang kabilang kalahati ng sakit ay ang pagmamay-ari. Ang halatang sagot ay template editor tulad ng 秀米 o 135编辑器: malalaking library, drag-and-drop, tunay na makapangyarihan. Pero nakatira sa cloud nila ang mga asset, sa likod ng account, at madalas sa likod ng membership tier. Ang maingat mong tinipong style kit ay hindi folder na pag-aari mo — ito ay login na inuupahan mo. Kung gusto mong ibigay ang isang block sa katrabaho, baguhin ang kulay sa lahat ng card nang sabay, o magtago lang ng personal na library ng limang header na talagang ginagamit mo muli, nagtatrabaho ka sa loob ng produkto ng iba sa mga tuntunin ng iba.
Kabaligtaran ang paraan ng tool na ito. Nagpe-paste ka ng artikulo (o anumang rich content, o raw HTML) at pina-parse nito ang markup mismo sa browser mo, kinukuha ang bawat magagamit-muling styled block — SVG typography card, titled section header, follow-us card, styled quote, divider — bilang sarili nitong malayang module. Mula roon ie-edit mo ang bawat isa nang tuwiran: palitan ang larawan sa loob ng card, kulayan muli, kopyahin bilang malinis na inline HTML na handa nang i-paste sa WeChat editor o anumang rich-text box, at i-save sa lokal na library na kaya mong i-export bilang JSON. Walang ina-upload, walang account, at kapag na-load na ang pahina ay patuloy itong gumagana offline. Isang tapat na limitasyon sa umpisa: hindi nito kayang kunin ang artikulo sa pamamagitan ng URL nito — hinaharangan ng mga browser ang cross-site request sa mp.weixin.qq.com, kaya ang input ay palaging copy-paste.
Ano ang pinagkaiba nito
- Local-first, walang ina-upload. Nangyayari ang pag-parse sa browser gamit ang
DOMParser. Ang artikulong ipina-paste mo ay hindi kailanman umaalis sa makina mo — walang server, walang account, walang backend. - Per-module na pagkuha. Ang bawat styled block ay lumalabas bilang hiwalay at self-contained na module sa halip na pader ng magulong markup na kailangan mong tabasin nang kamay.
- Image swap, sa lugar. Palitan ang larawan sa loob ng card sa pamamagitan ng pag-upload ng bago o pag-paste ng image URL — nang hindi hinahawakan ang paligid na SVG structure na nagpapa-marupok dito.
- Kulayan muli kahit saan nang sabay. I-click ang alinmang kulay na ginagamit ng module at baguhin ito sa buong block sa isang galaw, kaya tumutugma ang card sa brand mo nang walang paghahanap sa hex code.
- Malinis na inline-HTML na kopya. Isang click ang naglalagay ng module sa clipboard mo bilang inline HTML (sa pamamagitan ng Clipboard API), handa nang i-paste diretso sa WeChat editor, CMS, o anumang rich-text field.
- Isang library na pag-aari mo. I-save ang mga module sa local storage at i-export o i-import ang buong koleksyon bilang JSON — tunay at portable na asset kit, hindi login na inuupahan.
- Nakahiwalay na preview. Nagre-render ang bawat module sa loob ng Shadow DOM, kaya hindi tumatagas ang estilo ng isang block sa iba at ipinapakita ng preview mismo kung ano ang ipe-paste mo.
- Gumagana offline kapag na-load na. Pagkatapos mag-load ng pahina, walang koneksyong kailangan para kunin, i-edit, o kopyahin.
IMG.DIY kumpara sa ibang layout tool
| IMG.DIY Module Extractor | 秀米 (xiumi.us) | 135编辑器 | i排版 | Kopyahin ang HTML nang kamay | |
|---|---|---|---|---|---|
| Pangunahing layunin | Kunin at ariin ang magagamit-muling block | Buong template editor | Buong template editor | Buong template editor | — |
| Library ng template | Wala (bubuo ka mula sa ipa-paste mo) | Napakalaki | Napakalaki | Malaki | Wala |
| Kailangan ng account | Hindi | Oo | Oo | Oo | Hindi |
| May ina-upload | Hindi | Oo (cloud) | Oo (cloud) | Oo (cloud) | Hindi |
| Ariin ang mga asset | Oo (lokal na JSON) | Inuupahan / cloud | Inuupahan / cloud | Inuupahan / cloud | Oo, pero manwal |
| Per-block na image swap | Oo | Oo (sa editor) | Oo (sa editor) | Oo (sa editor) | Manwal |
| Kulayan muli ang buong block | Oo, isang click | Oo (sa editor) | Oo (sa editor) | Oo (sa editor) | Manwal |
| Gumagana offline | Oo, kapag na-load na | Hindi | Hindi | Hindi | Oo |
| Presyo | Libre | Libreng tier + bayad | Libreng tier + bayad | Libreng tier + bayad | Libre |
Para maging patas, hindi ito kapalit ng template editor, at hindi ito nagkukunwaring ganoon. Ang 秀米, 135编辑器, at i排版 ay mature na produkto na may napakalaking library ng template, live drag-and-drop na layout, at taon-taong pag-pulido — kung bumubuo ka ng masaganang artikulo mula sa wala, doon ka pupunta, at karapat-dapat sila sa reputasyon nila. Ang hindi nila binibigay ay isang pribado at portable na folder ng tiyak na block na ginagamit mo muli, na maee-edit nang walang login at malaya sa anumang umaalis sa makina mo. Ang tool na ito ay extractor at organizer, hindi editor: ginagawa nitong module na pag-aari mo ang mga block na hinahangaan mo sa labas, na maaari mong kulayan muli, palitan ng larawan, at i-paste kahit saan. Gamitin ang malalaking editor para bumuo; gamitin ito para itago ang mga piraso.
Bakit IMG.DIY
Pagkuha ng block
Hinahango ang mga SVG card, header, quote at divider bilang malayang module.
Palitan ang larawan inline
Palitan ang kahit anong larawan sa block ng sarili mo — upload o URL.
One-click na pagbabago ng kulay
I-click ang kahit anong kulay na ginagamit ng block at baguhin ito nang sabay-sabay.
Kopyahin ang inline HTML
I-paste nang diretso sa WeChat editor, isang CMS, o kahit anong rich-text box.
Lokal na library
I-save ang mga module sa browser na ito at i-export/import ang mga ito bilang JSON.
Walang upload
Tumatakbo nang buo sa iyong browser — ang iyong mga materyales ay hindi kailanman umaalis sa iyong device.