Ouvrez un article WeChat bien conçu et vous remarquerez que ce qui lui donne son air professionnel, ce ne sont pas les mots — ce sont les blocs stylisés. La carte de titre en dégradé en haut, les petits en-têtes de section avec une barre colorée, la carte « abonnez-vous » à la fin, les encadrés de citation aux coins arrondis. Beaucoup de ces éléments sont construits en SVG, et c'est le SVG qui leur permet de garder leur forme et leur couleur exactes quel que soit le téléphone qui les affiche.
Voici la partie frustrante : quand vous en trouvez un qui vous plaît et essayez de le réutiliser, le copier le casse généralement. Vous collez dans l'éditeur WeChat et la mise en page s'effondre, les couleurs s'aplatissent, ou la moitié du bloc disparaît. Ce guide explique pourquoi cela arrive et comment extraire ces blocs pour qu'ils restent intacts.
Pourquoi WeChat s'appuie sur le SVG pour la mise en page
L'éditeur de WeChat retire la plupart du CSS. Vous ne pouvez pas attacher de feuille de style, et beaucoup de styles en ligne sont filtrés. Les designers ont donc trouvé une parade : construire les pièces décoratives en SVG, où la forme, le dégradé et le positionnement du texte vivent tous à l'intérieur du balisage SVG. WeChat laisse ce balisage globalement intact, donc le bloc s'affiche de la même façon partout.
C'est aussi pourquoi ces blocs sont si réutilisables en principe. Une carte de titre SVG est autonome. Elle ne dépend pas d'un fichier externe ni d'une classe définie ailleurs sur la page. En théorie, vous pouvez la sortir et la déposer dans votre propre article. Le problème n'est que dans l'extraction.
Pourquoi une copie naïve casse le bloc
Quand vous sélectionnez un bloc stylisé sur une page affichée et le copiez, vous saisissez généralement la version affichée par le navigateur, pas la source d'origine. Trois choses tournent mal :
- Le balisage englobant se perd. Le bloc se trouve souvent dans des conteneurs imbriqués qui portent le positionnement. Attrapez seulement la partie visible et il perd sa boîte.
- Les morceaux encodés sont abîmés. Le SVG contient fréquemment des images de fond ou des polices sous forme de données encodées. Un copier-coller par le mauvais chemin peut corrompre cette chaîne.
- Vous ne pouvez pas le recolorer proprement. Même s'il survit, les couleurs sont cuites dans une douzaine d'endroits du balisage. Changer le thème à la main signifie fouiller dans le code brut.
Pour réutiliser ces blocs de façon fiable, vous ne voulez ni une capture d'écran ni la supposition du presse-papiers du navigateur. Vous voulez le balisage réel du bloc, extrait comme une unité autonome.
Extraire les blocs de manière fiable
L'approche propre consiste à copier tout le contenu source de l'article et à laisser un outil l'analyser, plutôt que d'essayer de sélectionner à la main un bloc à l'écran. L'Extracteur de modules de mise en page d'IMG.DIY fait exactement cela : vous collez le contenu, il lit le balisage avec l'analyseur DOM du navigateur, et il isole les blocs stylisés réutilisables — cartes typographiques SVG, en-têtes titrés, cartes d'abonnement, citations stylisées, séparateurs — chacun comme un module indépendant.
Une réserve importante, dite clairement : l'outil ne peut pas récupérer un article par son URL. Les navigateurs bloquent les récupérations inter-sites de mp.weixin.qq.com, donc aucun outil dans le navigateur ne peut télécharger une page WeChat par lien. Vous copiez le contenu et le collez. Ce n'est pas tant une limite à contourner que la façon dont fonctionne le modèle de sécurité du web.
Comme chaque bloc est isolé et prévisualisé dans son propre bac à sable Shadow DOM, les styles d'un module ne peuvent pas fuiter dans un autre. Ce que vous voyez dans l'aperçu est ce que ce bloc est réellement.
Recolorer sans toucher au code
Une fois un bloc extrait, le problème de couleur mentionné plus haut est résolu pour vous. Cliquez sur n'importe quelle couleur d'un module et changez-la — et la même couleur se met à jour partout où elle apparaît dans ce bloc. Ainsi une carte de titre bleue devient le vert de votre marque en un geste, au lieu que vous modifiiez six valeurs hexadécimales enfouies dans le SVG. Vous pouvez aussi remplacer les images d'exemple d'un module par les vôtres.
C'est là que la « réutilisation » cesse d'être théorique. Un bloc qui vous plaisait dans l'article de quelqu'un d'autre devient un bloc dans votre palette, dans vos couleurs, prêt à être déposé dans votre prochaine publication.
Bâtir votre propre bibliothèque de modules
Le vrai gain, c'est de faire cela quelques fois et de garder ce que vous extrayez. Chaque module qui vous plaît peut être enregistré dans une bibliothèque locale qui vit dans votre navigateur (via localStorage), et vous pouvez exporter toute la bibliothèque dans un fichier JSON pour la sauvegarder ou la transférer sur une autre machine. Rien n'est téléversé et il n'y a pas de compte — la bibliothèque est à vous, sur votre appareil.
En quelques semaines, vous constituez un kit personnel : une ou deux cartes de titre, un en-tête de section auquel vous faites confiance, une carte de pied de page, un ou deux séparateurs. Quand vient le moment de mettre en page un nouvel article, vous puisez dans votre propre ensemble au lieu de fouiller à nouveau les publications des autres. Pour amener un bloc stylisé dans l'éditeur, vous le copiez en HTML en ligne et le collez — le bloc garde sa mise en forme parce que le style voyage avec le balisage.
Commencez par un bloc que vous avez toujours aimé, extrayez-le proprement, recolorez-le à votre marque et enregistrez-le. C'est toute la boucle, et elle se cumule.