Как сделать TG Instant View из страницы Notion
Как верстать в Notion
Чтобы все отображалось и работало, верстать страницу в Notion нужно придерживаясь следующих правил:
- Заголовок страницы станет заголовком Instant View(далее — IV).
- Все изображения должны быть вставлены через /embed, обычная вставка прикрутит картинке URL amazonaws таким образом, что IV Bot телеграмма не сможет зафетчить ее.
- Если какие-то абзацы нужно будет отобразить как Blockquote, в Notion нужно сделать этот блок типом Quote.
Вообще делать большие статьи в IV вряд ли получится и навешивать много сложных блоков в статью тоже не стоит, чем проще — тем лучше.
Как настроить шаблон IV
Идем в My Templates и вставляем в поле ссылку на статью и жмем Enter
Чтобы получить ссылку на страницу в Notion, нужно выбрать Share в правом верхнем углу экрана и сменить тумблер Share to web
В появившимся окне по центру нужно прописать правила, по которым IV Bot будет парсить структуру страницы. Минимально рабочий шаблон такой:
“~version” ---- без указания версии рендер крашится
“body: //body” ---- тут указывается самый узкий в плане вложенности блок с полезным контентом. При создании шаблона IV для обычного блога достаточно указать какой-нибудь article, если имеется такой тег:
или div с id=”content”:
или div с классом “content-page”, например:
“title: @head//title” ---- Заголовок будет помещен в теге <title>, ловим его оттуда
“@replace_tag(>): $body//p[. //img]” ---- (не спрашивайте) Да, Notion помещает тег <img> внутрь <p>, парсер на этом ломается
«author: "itnigilist"" ---- название канала или имя автора
“# <aside> ://p[contains(text(), '<aside>')]” ---- тут можно строку удалить, я пока не особо понял, как решить эту проблему. Дело в том, что блок Callout из Notion
В HTML-коде выглядит вот так
Поэтому необходимо как-то преобразовать данный <p>
Как прикрутить IV к посту
После того, как макет настроен, надо нажать Track Changes в правом верхнем углу, после чего Mark as checked
Чтобы получить линк —> View in Telegram
Полученную ссылку нужно вставить в пост, но чтобы не засорять ссылкой текст, можно воспользоваться невидимым символом “ㅤ” (имеет код «U+3164”), на который вешаем ссылку.