Si vous gérez un compte officiel WeChat (ou toute publication en texte enrichi), vous avez déjà vu des mises en page que vous auriez aimé réutiliser — une carte de section titrée, un bloc « abonnez-vous », une citation stylisée, un séparateur. Les copier à la main implique de fouiller dans du HTML imbriqué, et une seule erreur casse tout le SVG. Cet outil fait la partie fastidieuse à votre place : collez un article, et il extrait chaque bloc stylisé comme un module indépendant et réutilisable.
De là, vous pouvez remplacer les images d'un bloc (importer une nouvelle ou coller une URL), le recolorer en cliquant sur n'importe quelle couleur qu'il utilise, copier le bloc en HTML en ligne prêt à coller dans l'éditeur WeChat, un CMS ou n'importe quel champ de texte enrichi — et enregistrer ceux que vous aimez dans une bibliothèque locale qui vit dans ce navigateur. Rien n'est téléversé ; vos éléments vous appartiennent.
Comme tout s'exécute côté client avec les API Clipboard et localStorage, il n'y a ni compte, ni cloud, ni backend — la même philosophie du « local d'abord » que le reste d'IMG.DIY.
Comment faire
- Collez un articleCopiez un article WeChat (ou tout contenu enrichi) et collez-le dans le champ. Vous pouvez aussi coller le code HTML brut.
- Extrayez les modulesCliquez sur Extraire — chaque bloc stylisé apparaît comme sa propre carte d'aperçu, isolée pour que les styles de la page n'interfèrent pas.
- Modifiez et réutilisezRemplacez les images, recolorez, puis Copier le HTML pour coller ailleurs, ou Enregistrer dans votre bibliothèque locale pour la prochaine fois.
Pourquoi extraire des modules de mise en page plutôt que les reconstruire
Les jolis blocs des articles WeChat — cartes de section à titre, invitations à s'abonner, citations stylisées, séparateurs SVG — sont presque toujours du HTML et du SVG en ligne assemblés à la main. En reconstruire un de zéro, c'est reproduire exactement les marges, les couleurs, les dégradés et les balises imbriquées, et une seule mauvaise modification fait s'effondrer le SVG. Extraire le bloc fini préserve au contraire chaque détail et le transforme en quelque chose de réutilisable en quelques secondes.
Cet outil analyse l'article que vous collez et en soulève chaque bloc stylisé comme un module indépendant. Vous ne raclez pas une page entière en un seul bloc ; vous obtenez une liste nette de pièces individuelles et réutilisables — exactement ce que vous vouliez en voyant une belle mise en page dans le post de quelqu'un d'autre.
Local d'abord, pour que les assets soient réellement à vous
Les éditeurs cloud gardent vos blocs enregistrés sur leurs serveurs, derrière un compte. Ici, la bibliothèque vit dans votre propre navigateur via localStorage, et vous pouvez l'exporter dans un fichier JSON pour la sauvegarder ou la transférer entre machines. Rien n'est mis en ligne, il n'y a pas d'inscription, et l'analyse, le remplacement d'images et la recolorisation tournent tous sur votre appareil grâce au DOM et à l'API Clipboard du navigateur.
Le bénéfice concret est une bibliothèque de modules personnelle et portable qui grandit à mesure que vous travaillez : collez un article, gardez les deux ou trois blocs qui valent la peine d'être réutilisés, et la fois suivante ressortez-les directement en HTML en ligne.
À quoi les gens l'utilisent
Réutiliser une mise en page qui vous a plu — Vous voyez une jolie carte à titre ou un séparateur dans un autre article — extrayez-le, recolorisez-le à vos couleurs et copiez-le dans votre propre brouillon.
Constituer un kit de style maison — Rassemblez dans une seule bibliothèque locale les en-têtes de section, styles de citation et cartes d'abonnement que vous utilisez à chaque numéro.
Remplacer les images d'un bloc gabarit — Gardez une mise en page de carte-image préférée et remplacez simplement l'image à chaque fois par votre propre import.
Recoloriser à vos couleurs — Changez la couleur d'accent d'un bloc partout d'un coup au lieu de fouiller dans les styles en ligne.
Déplacer des blocs entre éditeurs — Copiez du HTML en ligne qui se colle avec son style intact dans l'éditeur WeChat, un CMS ou n'importe quel champ de texte enrichi.
Garder un stock privé et portable — Exportez votre bibliothèque en JSON pour la sauvegarder ou l'emporter dans un autre navigateur — pas de compte, pas de cloud.
Les bons blocs de mise en page sont prisonniers des articles des autres
Quiconque gère un compte officiel WeChat collectionne des blocs de mise en page à la dure. Vous lisez un article avec une magnifique carte-titre en SVG, un panneau « suivez-nous » soigné, un en-tête de section avec un onglet coloré sur le côté, et vous pensez : je veux cette structure. Alors vous copiez tout l'article dans votre éditeur, puis passez vingt minutes à tout supprimer sauf le seul bloc voulu, en priant de ne pas accrocher un <span> égaré qui fait s'effondrer le SVG. La typographie SVG de WeChat est notoirement fragile — un attribut mal placé, une image redimensionnée au mauvais endroit, et la carte s'affiche comme une boîte cassée sur la moitié des téléphones des lecteurs. Les blocs que vous voulez sont réels, réutilisables, et posés là dans le HTML, mais il n'existe aucun moyen propre d'en extraire un et de le garder.
L'autre moitié de la douleur, c'est la propriété. La réponse évidente est un éditeur de modèles comme 秀米 ou 135编辑器 : d'immenses bibliothèques, du glisser-déposer, vraiment puissants. Mais les éléments vivent dans leur cloud, derrière un compte, et souvent derrière un palier d'abonnement. Votre kit de style soigneusement assemblé n'est pas un dossier que vous possédez — c'est une connexion que vous louez. Si vous voulez remettre un bloc à un coéquipier, ajuster une couleur sur toutes les cartes d'un coup, ou simplement garder une bibliothèque personnelle des cinq en-têtes que vous réutilisez vraiment, vous travaillez dans le produit de quelqu'un d'autre, à ses conditions.
Cet outil prend l'approche inverse. Vous collez un article (ou tout contenu enrichi, ou du HTML brut) et il analyse le balisage directement dans votre navigateur, en extrayant chaque bloc stylisé réutilisable — cartes typographiques SVG, en-têtes de section titrés, cartes « suivez-nous », citations stylisées, séparateurs — comme son propre module indépendant. De là, vous modifiez chacun directement : échangez l'image dans une carte, recolorez-la, copiez-la en HTML inline propre prêt à coller dans l'éditeur WeChat ou toute boîte de texte enrichi, et enregistrez-la dans une bibliothèque locale que vous pouvez exporter en JSON. Rien n'est téléversé, il n'y a aucun compte, et une fois la page chargée, elle continue de fonctionner hors ligne. Une limite honnête d'emblée : il ne peut pas récupérer un article par son URL — les navigateurs bloquent les requêtes intersites vers mp.weixin.qq.com, donc l'entrée se fait toujours par copier-coller.
Ce qui fait la différence
- Local d'abord, rien de téléversé. L'analyse se fait dans le navigateur avec
DOMParser. L'article que vous collez ne quitte jamais votre machine — pas de serveur, pas de compte, pas de backend. - Extraction par module. Chaque bloc stylisé sort comme un module séparé et autonome au lieu d'un mur de balisage emmêlé à élaguer à la main.
- Échange d'image, en place. Remplacez l'image dans une carte en téléversant une nouvelle ou en collant une URL d'image — sans toucher à la structure SVG environnante qui la rend fragile.
- Recolorer partout d'un coup. Cliquez sur n'importe quelle couleur qu'utilise un module et changez-la sur tout le bloc en un geste, pour qu'une carte corresponde à votre marque sans chasse aux codes hexadécimaux.
- Copie HTML inline propre. Un clic place le module dans votre presse-papiers en HTML inline (via l'API Clipboard), prêt à coller directement dans l'éditeur WeChat, un CMS ou tout champ de texte enrichi.
- Une bibliothèque que vous possédez. Enregistrez des modules dans le stockage local et exportez ou importez toute la collection en JSON — un vrai kit d'éléments portable, pas une connexion que vous louez.
- Aperçus isolés. Chaque module se rend à l'intérieur d'un Shadow DOM, si bien que les styles d'un bloc ne peuvent pas déborder sur un autre et que l'aperçu vous montre exactement ce que vous collerez.
- Fonctionne hors ligne une fois chargé. Après le chargement de la page, aucune connexion n'est nécessaire pour extraire, modifier ou copier.
IMG.DIY face aux autres outils de mise en page
| Extracteur de modules IMG.DIY | 秀米 (xiumi.us) | 135编辑器 | i排版 | Copier le HTML à la main | |
|---|---|---|---|---|---|
| But principal | Extraire et posséder des blocs réutilisables | Éditeur de modèles complet | Éditeur de modèles complet | Éditeur de modèles complet | — |
| Bibliothèque de modèles | Aucune (vous bâtissez à partir de ce que vous collez) | Immense | Immense | Grande | Aucune |
| Compte requis | Non | Oui | Oui | Oui | Non |
| Quelque chose de téléversé | Non | Oui (cloud) | Oui (cloud) | Oui (cloud) | Non |
| Posséder les éléments | Oui (JSON local) | Loué / cloud | Loué / cloud | Loué / cloud | Oui, mais manuel |
| Échange d'image par bloc | Oui | Oui (dans l'éditeur) | Oui (dans l'éditeur) | Oui (dans l'éditeur) | Manuel |
| Recolorer un bloc entier | Oui, un clic | Oui (dans l'éditeur) | Oui (dans l'éditeur) | Oui (dans l'éditeur) | Manuel |
| Fonctionne hors ligne | Oui, une fois chargé | Non | Non | Non | Oui |
| Prix | Gratuit | Offre gratuite + payant | Offre gratuite + payant | Offre gratuite + payant | Gratuit |
En toute honnêteté, ce n'est pas un remplacement d'un éditeur de modèles, et il ne prétend pas l'être. 秀米, 135编辑器 et i排版 sont des produits matures avec d'énormes bibliothèques de modèles, une mise en page en glisser-déposer en direct et des années de peaufinage — si vous construisez un article riche de zéro, c'est là que vous allez, et ils méritent leur réputation. Ce qu'ils ne vous donnent pas, c'est un dossier privé et portable des blocs précis que vous réutilisez, modifiables sans connexion et sans que rien ne quitte votre machine. Cet outil est un extracteur et un organisateur, pas un éditeur : il transforme les blocs que vous admirez dans la nature en modules que vous possédez, recolorez, ré-imagez et collez n'importe où. Servez-vous des gros éditeurs pour composer ; servez-vous de celui-ci pour garder les pièces.
Pourquoi IMG.DIY
Extraction de blocs
Extrait les cartes SVG, en-têtes, citations et séparateurs comme modules indépendants.
Remplacer les images en place
Remplacez n'importe quelle image d'un bloc par la vôtre — import ou URL.
Recolorer en un clic
Cliquez sur n'importe quelle couleur d'un bloc et changez-la partout d'un coup.
Copier le HTML en ligne
Collez directement dans l'éditeur WeChat, un CMS ou tout champ de texte enrichi.
Bibliothèque locale
Enregistrez des modules dans ce navigateur et exportez/importez-les en JSON.
Sans téléversement
S'exécute entièrement dans votre navigateur — vos éléments ne quittent jamais votre appareil.