Öffnen Sie einen gut gestalteten WeChat-Artikel, und Sie bemerken, dass die Teile, die ihn professionell aussehen lassen, nicht die Worte sind – es sind die gestylten Blöcke. Die Verlaufs-Titelkarte oben, die kleinen Abschnittsüberschriften mit einem farbigen Balken, die „Folgen Sie uns"-Karte am Ende, die Zitatkästen mit abgerundeten Ecken. Viele davon sind als SVG gebaut, und SVG ist das, was sie ihre exakte Form und Farbe behalten lässt, egal welches Handy sie rendert.
Hier ist der frustrierende Teil: Wenn Sie einen finden, der Ihnen gefällt, und ihn wiederverwenden wollen, zerbricht ihn das Kopieren meist. Sie fügen ihn in den WeChat-Editor ein, und das Layout bricht zusammen, die Farben werden flach, oder der halbe Block verschwindet. Dieser Leitfaden erklärt, warum das passiert und wie Sie diese Blöcke so extrahieren, dass sie intakt bleiben.
Warum WeChat für das Layout auf SVG setzt
WeChats Editor entfernt die meisten CSS. Sie können kein Stylesheet anhängen, und viele Inline-Styles werden herausgefiltert. Also fanden Designer einen Umweg: Sie bauen die dekorativen Teile als SVG, wo Form, Verlauf und Textpositionierung alle innerhalb des SVG-Markups leben. WeChat lässt dieses Markup weitgehend in Ruhe, sodass der Block überall gleich rendert.
Genau deshalb sind diese Blöcke im Prinzip so wiederverwendbar. Eine SVG-Titelkarte ist eigenständig. Sie hängt nicht von einer externen Datei oder einer irgendwo anders auf der Seite definierten Klasse ab. Theoretisch können Sie sie heraushebeln und in Ihren eigenen Artikel einfügen. Das Problem liegt nur im Herausheben.
Warum naives Kopieren den Block zerbricht
Wenn Sie einen gestylten Block auf einer gerenderten Seite auswählen und kopieren, greifen Sie meist die gerenderte Version des Browsers ab, nicht den Originalquellcode. Drei Dinge gehen schief:
- Umschließendes Markup geht verloren. Der Block sitzt oft in verschachtelten Containern, die die Positionierung tragen. Greifen Sie nur den sichtbaren Teil, verliert er seinen Kasten.
- Kodierte Teile werden verstümmelt. SVG hält häufig Hintergrundbilder oder Schriften als kodierte Daten. Ein Kopieren-Einfügen über den falschen Pfad kann diese Zeichenkette beschädigen.
- Sie können ihn nicht sauber umfärben. Selbst wenn er überlebt, sind die Farben an einem Dutzend Stellen im Markup eingebacken. Das Thema von Hand zu ändern bedeutet, sich durch Rohcode zu wühlen.
Um diese Blöcke zuverlässig wiederzuverwenden, wollen Sie keinen Screenshot und nicht die Zwischenablage-Vermutung des Browsers. Sie wollen das tatsächliche Block-Markup, als eigenständige Einheit herausgezogen.
Blöcke auf zuverlässige Weise extrahieren
Der saubere Ansatz ist, den ganzen Quellinhalt des Artikels zu kopieren und ein Tool ihn parsen zu lassen, statt zu versuchen, einen Block auf dem Bildschirm von Hand auszuwählen. Der Layout-Modul-Extraktor von IMG.DIY tut genau das: Sie fügen den Inhalt ein, es liest das Markup mit dem eigenen DOM-Parser des Browsers, und es isoliert die wiederverwendbaren gestylten Blöcke – SVG-Typografiekarten, betitelte Überschriften, Folgen-Sie-uns-Karten, gestylte Zitate, Trenner – jeweils als unabhängiges Modul.
Ein wichtiger Vorbehalt, klar gesagt: Das Tool kann einen Artikel nicht über seine URL abrufen. Browser blockieren seitenübergreifende Abrufe von mp.weixin.qq.com, sodass kein Browser-Tool eine WeChat-Seite per Link herunterziehen kann. Sie kopieren den Inhalt und fügen ihn ein. Das ist weniger eine zu umgehende Einschränkung als vielmehr die Funktionsweise des Sicherheitsmodells des Webs.
Da jeder Block isoliert und in seiner eigenen Shadow-DOM-Sandbox vorschaut wird, können die Styles eines Moduls nicht in ein anderes durchsickern. Was Sie in der Vorschau sehen, ist, was dieser Block tatsächlich ist.
Umfärben, ohne Code anzufassen
Sobald ein Block extrahiert ist, wird das Farbproblem, das ich zuvor erwähnte, für Sie gelöst. Klicken Sie eine beliebige Farbe in einem Modul an und ändern Sie sie – und dieselbe Farbe aktualisiert sich überall, wo sie in diesem Block erscheint. So wird eine blaue Titelkarte in einem Zug zum Grün Ihrer Marke, statt dass Sie sechs im SVG vergrabene Hex-Werte bearbeiten. Sie können auch die Platzhalterbilder in einem Modul gegen Ihre eigenen tauschen.
Hier hört „Wiederverwendung" auf, theoretisch zu sein. Ein Block, der Ihnen aus dem Artikel eines anderen gefiel, wird zu einem Block in Ihrer Palette, in Ihren Farben, bereit für Ihr nächstes Stück.
Ihre eigene Modulbibliothek aufbauen
Der eigentliche Lohn ist, dies ein paar Mal zu tun und zu behalten, was Sie extrahieren. Jedes Modul, das Ihnen gefällt, kann in einer lokalen Bibliothek gespeichert werden, die in Ihrem Browser lebt (via localStorage), und Sie können die ganze Bibliothek in eine JSON-Datei exportieren, um sie zu sichern oder auf einen anderen Rechner zu bewegen. Nichts wird hochgeladen und es gibt kein Konto – die Bibliothek gehört Ihnen, auf Ihrem Gerät.
Über ein paar Wochen bauen Sie ein persönliches Set auf: ein paar Titelkarten, eine Abschnittsüberschrift, der Sie vertrauen, eine Fußzeilenkarte, ein oder zwei Trenner. Wenn es Zeit ist, einen neuen Artikel zu gestalten, greifen Sie aus Ihrem eigenen Satz, statt erneut durch die Beiträge anderer zu suchen. Um einen gestylten Block in den Editor zu bekommen, kopieren Sie ihn als Inline-HTML und fügen ihn ein – der Block behält seine Formatierung, weil das Styling mit dem Markup reist.
Beginnen Sie mit einem Block, der Ihnen immer gefiel, extrahieren Sie ihn sauber, färben Sie ihn auf Ihre Marke um und speichern Sie ihn. Das ist der ganze Ablauf, und er summiert sich.