Buksan ang isang mahusay na disenyong WeChat article at mapapansin mo na ang mga bahaging nagpapaganda nito ay hindi ang mga salita — ang mga naka-estilong block. Ang gradient title card sa itaas, ang maliliit na section header na may may-kulay na bar, ang "follow us" card sa dulo, ang quote box na may bilog na sulok. Marami sa mga iyon ay ginawa bilang SVG, at ang SVG ang nagpapanatili sa kanila ng eksaktong hugis at kulay kahit anong telepono ang mag-render.
Narito ang nakakadismayang bahagi: kapag nakahanap ka ng gusto mo at sinubukang gamitin muli, kadalasang sinisira ito ng pagkopya. Nag-paste ka sa WeChat editor at bumabagsak ang layout, nagiging flat ang mga kulay, o nawawala ang kalahati ng block. Ipinapaliwanag ng gabay na ito kung bakit iyon nangyayari at kung paano kunin ang mga block na iyon para manatili silang buo.
Bakit umaasa ang WeChat sa SVG para sa layout
Tinatanggal ng editor ng WeChat ang karamihan ng CSS. Hindi ka makakakabit ng stylesheet, at maraming inline style ang na-filter. Kaya nakahanap ang mga designer ng workaround: gawin ang mga pandekorasyong piraso bilang SVG, kung saan ang hugis, gradient, at posisyon ng teksto ay naninirahang sa loob ng SVG markup. Iniiwan ng WeChat ang markup na iyon nang halos hindi ginagalaw, kaya nire-render ang block nang pareho kahit saan.
Iyon din ang dahilan kung bakit magagamit muli ang mga block na ito sa prinsipyo. Ang SVG title card ay self-contained. Hindi ito umaasa sa panlabas na file o klase na tinukoy sa ibang lugar sa page. Sa teorya kaya mong kunin ito at ihulog sa iyong sariling artikulo. Ang problema ay nasa pagkuha lang.
Bakit sinisira ng pasumalang pagkopya ang block
Kapag pumili ka ng naka-estilong block sa na-render na page at kinopya ito, kadalasang kinukuha mo ang na-render na bersyon ng browser, hindi ang orihinal na pinagmulan. Tatlong bagay ang nagkakamali:
- Nawawala ang wrapping markup. Ang block ay madalas na nakaupo sa loob ng nested na container na may dalang positioning. Kunin lang ang nakikitang bahagi at nawawala ang kahon nito.
- Nasisira ang naka-encode na piraso. Madalas na may hawak ang SVG na background image o font bilang naka-encode na datos. Ang copy-paste sa maling daan ay maaaring makasira sa string na iyon.
- Hindi mo ito malinis na makukulayan muli. Kahit makaligtas ito, nakabaon ang mga kulay sa dosenang lugar sa markup. Ang pagbabago ng tema nang manu-mano ay nangangahulugang paghahanap sa hilaw na code.
Para magamit muli nang maaasahan ang mga block na ito ay ayaw mo ng screenshot at ayaw mo ng hula ng clipboard ng browser. Gusto mo ang aktwal na markup ng block, na kinuha bilang standalone na yunit.
Pagkuha ng block sa maaasahang paraan
Ang malinis na paraan ay kopyahin ang buong source content ng artikulo at hayaang i-parse ito ng isang tool, sa halip na subukang piliin ang isang block sa screen. Ginagawa mismo ito ng Layout Module Extractor ng IMG.DIY: nag-paste ka ng nilalaman, binabasa nito ang markup gamit ang sariling DOM parser ng browser, at inihihiwalay ang magagamit muli na naka-estilong block — SVG typography card, may-titulong header, follow-us card, naka-estilong quote, divider — bawat isa bilang independent na module.
Isang mahalagang paalala, malinaw na sinabi: hindi kayang kunin ng tool ang artikulo sa pamamagitan ng URL nito. Hinaharangan ng browser ang cross-site na pagkuha ng mp.weixin.qq.com, kaya walang in-browser na tool na makakakuha ng WeChat page sa pamamagitan ng link. Kokopyahin mo ang nilalaman at i-paste ito. Hindi iyon limitasyong lalampasan kundi kung paano gumagana ang security model ng web.
Dahil ang bawat block ay inihihiwalay at pinipreview sa sarili nitong Shadow DOM sandbox, ang estilo ng isang module ay hindi maaaring tumagas sa isa pa. Ang nakikita mo sa preview ay kung ano talaga ang block na iyon.
Muling pagkukulay nang hindi hinahawakan ang code
Kapag nakuha na ang block, nalulutas para sa iyo ang problema sa kulay na binanggit ko. I-click ang anumang kulay sa module at baguhin ito — at ang parehong kulay ay nag-a-update kahit saan ito lumabas sa block na iyon. Kaya ang asul na title card ay nagiging berde ng iyong brand sa isang galaw, sa halip na i-edit mo ang anim na hex value na nakabaon sa SVG. Kaya mo ring palitan ang placeholder na larawan sa loob ng module ng sarili mo.
Dito hihinto ang "muling paggamit" bilang teoretikal. Ang block na nagustuhan mo mula sa artikulo ng iba ay nagiging block sa iyong palette, sa iyong mga kulay, handang ihulog sa iyong susunod na piraso.
Pagbuo ng sariling module library
Ang tunay na gantimpala ay ang paggawa nito nang ilang beses at pagpapanatili ng kinukuha mo. Ang bawat module na gusto mo ay maaaring i-save sa lokal na library na naninirahan sa iyong browser (sa pamamagitan ng localStorage), at kaya mong i-export ang buong library sa JSON file para i-back up ito o ilipat sa ibang makina. Walang ina-upload at walang account — ang library ay sa iyo, nasa iyong device.
Sa loob ng ilang linggo ay makakabuo ka ng personal na kit: ilang title card, isang section header na pinagkakatiwalaan mo, isang footer card, isa o dalawang divider. Kapag oras na para mag-layout ng bagong artikulo, kumukuha ka mula sa sarili mong set sa halip na maghanap muli sa mga post ng ibang tao. Para makapasok ang naka-estilong block sa editor, kokopyahin mo ito bilang inline HTML at i-paste ito — pinapanatili ng block ang format nito dahil kasama ng markup ang estilo.
Magsimula sa isang block na lagi mong nagugustuhan, kunin ito nang malinis, kulayan muli sa iyong brand, at i-save ito. Iyon ang buong loop, at nagsasama-sama ito.