Otwórz dobrze zaprojektowany artykuł WeChat, a zauważysz, że części, które sprawiają, że wygląda profesjonalnie, to nie słowa — to wystylizowane bloki. Gradientowa karta tytułowa na górze, małe nagłówki sekcji z kolorowym paskiem, karta „obserwuj nas" na końcu, ramki cytatów z zaokrąglonymi rogami. Wiele z nich jest zbudowanych jako SVG, a SVG jest tym, co pozwala im zachować dokładny kształt i kolor bez względu na to, jaki telefon je renderuje.
Oto frustrująca część: gdy znajdziesz taki, który Ci się podoba, i spróbujesz go wykorzystać ponownie, skopiowanie go zwykle go psuje. Wklejasz do edytora WeChat i układ się rozpada, kolory robią się płaskie albo połowa bloku znika. Ten przewodnik tłumaczy, dlaczego tak się dzieje i jak wyodrębnić te bloki, żeby zostały nienaruszone.
Dlaczego WeChat opiera się na SVG w układzie
Edytor WeChat wycina większość CSS. Nie możesz podpiąć arkusza stylów, a wiele stylów inline zostaje odfiltrowanych. Więc projektanci znaleźli obejście: budują dekoracyjne kawałki jako SVG, gdzie kształt, gradient i pozycjonowanie tekstu wszystko żyje wewnątrz znaczników SVG. WeChat zostawia te znaczniki w większości w spokoju, więc blok renderuje się tak samo wszędzie.
To też powód, dla którego te bloki są w zasadzie tak łatwe do ponownego użycia. Karta tytułowa SVG jest samowystarczalna. Nie zależy od zewnętrznego pliku ani klasy zdefiniowanej gdzieś indziej na stronie. W teorii możesz ją wyciągnąć i wrzucić do własnego artykułu. Problem jest tylko w wyciąganiu.
Dlaczego naiwne kopiowanie psuje blok
Gdy zaznaczasz wystylizowany blok na wyrenderowanej stronie i kopiujesz go, zwykle łapiesz wyrenderowaną wersję przeglądarki, a nie oryginalne źródło. Trzy rzeczy idą źle:
- Otaczające znaczniki się gubią. Blok często siedzi wewnątrz zagnieżdżonych kontenerów, które niosą pozycjonowanie. Złap tylko widoczną część, a traci swoje pudełko.
- Zakodowane kawałki się psują. SVG często trzyma obrazy tła albo czcionki jako zakodowane dane. Kopiowanie przez niewłaściwą ścieżkę może uszkodzić ten ciąg.
- Nie da się go czysto przekolorować. Nawet jeśli przetrwa, kolory są wpalone w kilkanaście miejsc w znacznikach. Zmiana motywu ręcznie oznacza polowanie po surowym kodzie.
Żeby wykorzystać te bloki niezawodnie, nie chcesz zrzutu ekranu i nie chcesz zgadywanki schowka przeglądarki. Chcesz faktycznych znaczników bloku, wyciągniętych jako samodzielna jednostka.
Wyodrębnianie bloków w niezawodny sposób
Czystym podejściem jest skopiowanie całej treści źródłowej artykułu i pozwolenie narzędziu, żeby ją sparsowało, zamiast próbować ręcznie zaznaczyć jeden blok na ekranie. Ekstraktor modułów układu od IMG.DIY robi dokładnie to: wklejasz treść, odczytuje znaczniki własnym parserem DOM przeglądarki i izoluje wielokrotnego użytku wystylizowane bloki — karty typograficzne SVG, tytułowane nagłówki, karty „obserwuj nas", wystylizowane cytaty, separatory — każdy jako niezależny moduł.
Jedno ważne zastrzeżenie, wyłożone wprost: narzędzie nie może pobrać artykułu po jego adresie URL. Przeglądarki blokują międzywitrynowe pobieranie z mp.weixin.qq.com, więc żadne narzędzie w przeglądarce nie może ściągnąć strony WeChat po linku. Kopiujesz treść i ją wklejasz. To nie tyle ograniczenie do obejścia, ile sposób, w jaki działa model bezpieczeństwa sieci.
Ponieważ każdy blok jest izolowany i podglądany we własnej piaskownicy Shadow DOM, style jednego modułu nie mogą przeciec do innego. To, co widzisz w podglądzie, jest tym, czym ten blok naprawdę jest.
Przekolorowanie bez dotykania kodu
Gdy blok jest wyodrębniony, problem kolorów, który wspomniałem wcześniej, zostaje rozwiązany za Ciebie. Kliknij dowolny kolor w module i zmień go — a ten sam kolor aktualizuje się wszędzie, gdzie pojawia się w tym bloku. Więc niebieska karta tytułowa staje się zielenią Twojej marki w jednym ruchu, zamiast żebyś edytował sześć wartości hex zagrzebanych w SVG. Możesz też podmienić zastępcze obrazy wewnątrz modułu na własne.
To jest miejsce, gdzie „ponowne użycie" przestaje być teoretyczne. Blok, który spodobał Ci się z cudzego artykułu, staje się blokiem w Twojej palecie, w Twoich kolorach, gotowym do wrzucenia do Twojego następnego tekstu.
Budowanie własnej biblioteki modułów
Prawdziwym zyskiem jest zrobienie tego kilka razy i zachowanie tego, co wyodrębnisz. Każdy moduł, który Ci się podoba, można zapisać do lokalnej biblioteki żyjącej w Twojej przeglądarce (przez localStorage), a całą bibliotekę możesz wyeksportować do pliku JSON, żeby zrobić kopię zapasową albo przenieść ją na inną maszynę. Nic nie jest przesyłane i nie ma konta — biblioteka jest Twoja, na Twoim urządzeniu.
Przez kilka tygodni budujesz osobisty zestaw: parę kart tytułowych, nagłówek sekcji, któremu ufasz, kartę stopki, jeden czy dwa separatory. Gdy przychodzi czas na ułożenie nowego artykułu, sięgasz do własnego zestawu zamiast znowu przeszukiwać cudze wpisy. Żeby wstawić wystylizowany blok do edytora, kopiujesz go jako inline HTML i wklejasz — blok zachowuje formatowanie, bo stylowanie podróżuje ze znacznikami.
Zacznij od jednego bloku, który zawsze Ci się podobał, wyodrębnij go czysto, przekoloruj do swojej marki i zapisz. To cała pętla, a ona się kumuluje.