Відкрийте добре оформлену статтю WeChat — і ви помітите, що частини, які роблять її професійною на вигляд, — це не слова, а стилізовані блоки. Градієнтна картка заголовка вгорі, маленькі секційні заголовки з кольоровою смугою, картка «підпишіться на нас» у кінці, блоки цитат із заокругленими кутами. Багато з них побудовані як SVG, і саме SVG дозволяє їм зберігати точну форму й колір незалежно від того, який телефон їх рендерить.
Ось дратівлива частина: коли ви знаходите такий, що вам подобається, і намагаєтеся повторно його використати, копіювання зазвичай його ламає. Ви вставляєте в редактор WeChat, і розкладка руйнується, кольори стають плоскими, чи половина блоку зникає. Цей гід пояснює, чому так стається, і як витягти ці блоки, щоб вони лишалися цілими.
Чому WeChat спирається на SVG для розкладки
Редактор WeChat вирізає більшість CSS. Ви не можете прикріпити таблицю стилів, і чимало вбудованих стилів фільтруються. Тож дизайнери знайшли обхідний шлях: будувати декоративні частини як SVG, де форма, градієнт і позиціонування тексту живуть усередині SVG-розмітки. WeChat здебільшого лишає цю розмітку в спокої, тож блок рендериться однаково всюди.
Ось чому ці блоки такі повторно використовувані в принципі. SVG-картка заголовка самодостатня. Вона не залежить від зовнішнього файлу чи класу, визначеного десь інде на сторінці. Теоретично ви можете витягнути її й кинути у свою власну статтю. Проблема лише у витягуванні.
Чому наївне копіювання ламає блок
Коли ви виділяєте стилізований блок на відрендереній сторінці й копіюєте його, ви зазвичай хапаєте відрендерену версію браузера, а не оригінальне джерело. Три речі йдуть не так:
- Обгортальна розмітка губиться. Блок часто сидить усередині вкладених контейнерів, що несуть позиціонування. Схопіть лише видиму частину — і вона втратить свою коробку.
- Закодовані частини псуються. SVG часто тримає фонові зображення чи шрифти як закодовані дані. Копіювання-вставка неправильним шляхом може пошкодити цей рядок.
- Ви не можете перефарбувати його чисто. Навіть якщо він виживе, кольори вбудовані в десяток місць розмітки. Змінити тему вручну означає полювати крізь сирий код.
Щоб надійно повторно використовувати ці блоки, вам не потрібен скріншот і не потрібне здогадування буфера обміну браузера. Вам потрібна справжня розмітка блоку, витягнута як самостійна одиниця.
Витягування блоків надійним способом
Чистий підхід — скопіювати весь вихідний вміст статті й дати інструменту його розпарсити, а не намагатися вручну виділити один блок на екрані. Витягувач модулів розкладки від IMG.DIY робить саме це: ви вставляєте вміст, воно читає розмітку власним DOM-парсером браузера й ізолює повторно використовувані стилізовані блоки — SVG-картки типографіки, заголовки з назвами, картки «підпишіться на нас», стилізовані цитати, роздільники — кожен як незалежний модуль.
Одне важливе застереження, сказане прямо: інструмент не може отримати статтю за її URL. Браузери блокують міжсайтові запити до mp.weixin.qq.com, тож жоден браузерний інструмент не може стягнути сторінку WeChat за посиланням. Ви копіюєте вміст і вставляєте його. Це не обмеження, яке треба обійти, а радше те, як працює модель безпеки вебу.
Оскільки кожен блок ізольований і переглядається у власній пісочниці Shadow DOM, стилі одного модуля не можуть протекти в інший. Те, що ви бачите в прев'ю, і є тим, чим той блок насправді є.
Перефарбування без дотику до коду
Щойно блок витягнуто, проблема кольору, яку я згадав раніше, розв'язується за вас. Клікніть будь-який колір у модулі й змініть його — і той самий колір оновиться всюди, де він з'являється в цьому блоці. Тож синя картка заголовка стає зеленою вашого бренду одним рухом, замість того щоб ви редагували шість hex-значень, похованих у SVG. Ви також можете замінити зображення-заповнювачі всередині модуля своїми.
Ось де «повторне використання» перестає бути теоретичним. Блок, що вам сподобався зі статті когось іншого, стає блоком у вашій палітрі, у ваших кольорах, готовим до вставки у ваш наступний матеріал.
Побудова власної бібліотеки модулів
Справжня винагорода — зробити це кілька разів і зберегти те, що ви витягуєте. Кожен модуль, що вам сподобався, можна зберегти в локальну бібліотеку, яка живе у вашому браузері (через localStorage), і ви можете експортувати всю бібліотеку у файл JSON, щоб зробити резервну копію чи перенести на іншу машину. Нічого не завантажується, і немає облікового запису — бібліотека ваша, на вашому пристрої.
За кілька тижнів ви будуєте персональний набір: пару карток заголовків, секційний заголовок, якому довіряєте, картку підвалу, роздільник-два. Коли настає час верстати нову статтю, ви берете зі свого власного набору, а не полюєте знову крізь чужі дописи. Щоб перенести стилізований блок у редактор, ви копіюєте його як вбудований HTML і вставляєте — блок зберігає своє форматування, бо стилізація подорожує з розміткою.
Почніть з одного блоку, який вам завжди подобався, витягніть його чисто, перефарбуйте під свій бренд і збережіть. Ось і весь цикл, і він накопичується.