Open een goed ontworpen WeChat-artikel en je merkt dat de delen die het professioneel doen ogen niet de woorden zijn — het zijn de gestileerde blokken. De gradiënttitelkaart bovenaan, de kleine sectiekoppen met een gekleurde balk, de "volg ons"-kaart aan het eind, de citaatvakken met afgeronde hoeken. Veel daarvan zijn gebouwd als SVG, en SVG is wat ze hun exacte vorm en kleur laat behouden ongeacht welke telefoon ze rendert.
Hier is het frustrerende deel: wanneer je er een vindt die je bevalt en probeert te hergebruiken, breekt kopiëren hem meestal. Je plakt in de WeChat-editor en de lay-out stort in, de kleuren worden egaal, of het halve blok verdwijnt. Deze gids legt uit waarom dat gebeurt en hoe je die blokken extraheert zodat ze intact blijven.
Waarom WeChat op SVG leunt voor lay-out
De editor van WeChat strippt de meeste CSS weg. Je kunt geen stylesheet koppelen, en veel inline stijlen worden gefilterd. Dus ontwerpers vonden een omweg: bouw de decoratieve stukken als SVG, waar de vorm, gradiënt en tekstpositionering allemaal binnen de SVG-markup leven. WeChat laat die markup grotendeels met rust, dus het blok rendert overal hetzelfde.
Dat is ook waarom deze blokken in principe zo herbruikbaar zijn. Een SVG-titelkaart is op zichzelf staand. Hij hangt niet af van een extern bestand of een klasse ergens anders op de pagina gedefinieerd. In theorie kun je hem eruit tillen en in je eigen artikel zetten. Het probleem zit alleen in het tillen.
Waarom naïef kopiëren het blok breekt
Wanneer je een gestileerd blok op een gerenderde pagina selecteert en kopieert, grijp je meestal de gerenderde versie van de browser, niet de originele bron. Drie dingen gaan fout:
- Omhullende markup gaat verloren. Het blok zit vaak binnen geneste containers die positionering dragen. Grijp alleen het zichtbare deel en het verliest zijn vak.
- Gecodeerde stukken raken verhaspeld. SVG bevat vaak achtergrondafbeeldingen of lettertypen als gecodeerde data. Een kopieer-plak via de verkeerde route kan die string beschadigen.
- Je kunt hem niet schoon herkleuren. Zelfs als hij overleeft, zijn de kleuren op een tiental plekken in de markup ingebakken. Het thema met de hand wijzigen betekent door ruwe code jagen.
Om deze blokken betrouwbaar te hergebruiken wil je geen screenshot en geen klembordgok van de browser. Je wilt de daadwerkelijke blokmarkup, eruit getrokken als een op zichzelf staande eenheid.
Blokken op de betrouwbare manier extraheren
De schone aanpak is de hele broninhoud van het artikel kopiëren en een tool die laten ontleden, in plaats van proberen één blok op het scherm handmatig te selecteren. De Lay-outmodule-extractor van IMG.DIY doet precies dit: je plakt de inhoud erin, het leest de markup met de eigen DOM-parser van de browser, en het isoleert de herbruikbare gestileerde blokken — SVG-typografiekaarten, getitelde koppen, volg-ons-kaarten, gestileerde citaten, scheidingslijnen — elk als een onafhankelijke module.
Eén belangrijke kanttekening, gewoon gezegd: de tool kan een artikel niet ophalen via zijn URL. Browsers blokkeren cross-site-fetches van mp.weixin.qq.com, dus geen enkele in-browsertool kan een WeChat-pagina via een link ophalen. Je kopieert de inhoud en plakt hem erin. Dat is niet zozeer een beperking om te omzeilen als wel hoe het beveiligingsmodel van het web werkt.
Omdat elk blok wordt geïsoleerd en voorbekeken in zijn eigen Shadow DOM-sandbox, kunnen de stijlen van de ene module niet in een andere lekken. Wat je in de preview ziet is wat dat blok daadwerkelijk is.
Herkleuren zonder code aan te raken
Zodra een blok is geëxtraheerd, wordt het kleurprobleem dat ik eerder noemde voor je opgelost. Klik op een willekeurige kleur in een module en verander hem — en dezelfde kleur werkt overal bij waar hij in dat blok verschijnt. Dus een blauwe titelkaart wordt in één zet het groen van jouw merk, in plaats van dat jij zes hex-waarden begraven in SVG bewerkt. Je kunt ook de placeholderafbeeldingen binnen een module verwisselen voor je eigen.
Dit is waar "hergebruik" ophoudt theoretisch te zijn. Een blok dat je beviel uit iemand anders' artikel wordt een blok in jouw palet, in jouw kleuren, klaar om in je volgende stuk te zetten.
Je eigen modulebibliotheek bouwen
De echte beloning is dit een paar keer doen en houden wat je extraheert. Elke module die je bevalt kan worden opgeslagen in een lokale bibliotheek die in je browser leeft (via localStorage), en je kunt de hele bibliotheek exporteren naar een JSON-bestand om hem te back-uppen of naar een andere machine te verplaatsen. Er wordt niets geüpload en er is geen account — de bibliotheek is van jou, op je apparaat.
Over een paar weken bouw je een persoonlijke kit: een paar titelkaarten, een sectiekop die je vertrouwt, een footerkaart, een scheidingslijn of twee. Wanneer het tijd is om een nieuw artikel op te maken, trek je uit je eigen set in plaats van opnieuw door andermans posts te jagen. Om een gestileerd blok in de editor te krijgen, kopieer je het als inline HTML en plak je het erin — het blok houdt zijn opmaak omdat de styling met de markup meereist.
Begin met één blok dat je altijd beviel, extraheer het schoon, herkleur het naar je merk, en sla het op. Dat is de hele lus, en het stapelt zich op.