Аудитория у моего пет-проекта разъехалась по разным площадкам, ибо про машину и стуки в двигателе и подвеске. Пришлось постить на четыре площадки один и тот же материал, и каждый раз руками расставлять подзаголовки, пересобирать списки и перезаливать картинки, ленивое…
Ни одна из четырёх не пропускает CSS. Ни инлайновые стили, ни классы, ни шрифты, ни цвета. У каждой площадки есть короткий список тегов, и местами я даже не понимаю логику. В ВК не нашел таблиц, например, или плохо искал.
|
Площадка |
Что переживает вставку |
|---|---|
|
Telegram Instant View |
заголовки только двух уровней, код, врезки; таблиц нет вообще |
|
ВКонтакте |
два уровня заголовков, списки, цитаты; ни кода, ни таблиц, ни картинок вставкой |
|
Дзен |
заголовки, списки, цитаты, картинки; ни кода, ни таблиц |
|
Хабр |
всё перечисленное плюс настоящие таблицы, подсветка кода, спойлеры, формулы |
Чего нет в списке, просто выбрасывается. Нехорошо.
Что же делать, оформлять то надо
Если рисовать нечем, остаётся два слоя, и оба переживают любую вставку.
структура. Заголовок для ленты/статьи, три тезиса в начале, врезки вместо скобок, один жирный акцент на раздел. Жирный, кстати, единственное выделение, которое сохраняют все четыре, — поэтому если ставить его через слово, не останется ничего.
типографика. «Ёлочки», настоящее тире вместо дефиса, многоточие одним символом, неразрывные пробелы. Потом что это символы Unicode, и в следующих версиях поропбую все же сделать таблицу в ВК через них. Неясно только, как ширину угадать )
Сам скилл
Написал несколлько линтеров и адаптировал китайский скилл для вёрстки под WeChat — оттуда взята схема работы, но цветовые темы пришлось выбросить целиком. Исходный Markdown и сборка под каждую площадку:
python3 scripts/source_lint.py article.md
python3 scripts/typography_lint.py article.md --fix
python3 scripts/build_targets.py article.md -o out
python3 scripts/validate_post.py --auto 'out/*'
На выходе — страница для Instant View, отдельный анонс в канал, фрагмент для вставки во ВК, разметка для Дзена вместе с RSS-элементом, Habr Flavored Markdown.
И отдельно отчёт: что именно на какой площадке вырезано и что придётся доделать руками.
Запускается скилл по “сверстай под Хабр, ВК”
Грабли, как же без них
Дзен не рендерит форматирование в списках
Жирный внутри пункта просто исчезает. Значит, акцент надо ставить во вводном предложении перед списком, а не в самих пунктах.
Instant View это не пост, а страничка
Сделал в скилле публикатор страницы на telegra.ph, где Instant View работает из коробки.
ВК не принимает картинки вставкой
Совсем. В итоге сборщик ставит на их место нумерованные заглушки и выдаёт список загрузки по порядку.
Лимит Telegram считает текст, а не разметку
Первая версия генератора мерила длину вместе с HTML-тегами и неплохо так завышала.
Скилл здесь: crosspost-design, лицензия AGPL-3.0. Инструкции по установке там-же.
Автор: Shadow_ru
