{"id":14286,"url":"\/distributions\/14286\/click?bit=1&hash=d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","title":"\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u043c\u0438 \u0418\u0422-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u044b","buttonText":"","imageUuid":""}
Артём Панов

Как сделать TG Instant View из страницы Notion

Как верстать в Notion

Чтобы все отображалось и работало, верстать страницу в Notion нужно придерживаясь следующих правил:

  • Заголовок страницы станет заголовком Instant View(далее — IV).
  • Все изображения должны быть вставлены через /embed, обычная вставка прикрутит картинке URL amazonaws таким образом, что IV Bot телеграмма не сможет зафетчить ее.
  • Если какие-то абзацы нужно будет отобразить как Blockquote, в Notion нужно сделать этот блок типом Quote.
Как Blockquote выглядит в IV
Как этот же блок верстался в Notion

Вообще делать большие статьи в IV вряд ли получится и навешивать много сложных блоков в статью тоже не стоит, чем проще — тем лучше.

Как настроить шаблон IV

Идем в My Templates и вставляем в поле ссылку на статью и жмем Enter

Чтобы получить ссылку на страницу в Notion, нужно выбрать Share в правом верхнем углу экрана и сменить тумблер Share to web

В появившимся окне по центру нужно прописать правила, по которым IV Bot будет парсить структуру страницы. Минимально рабочий шаблон такой:

~version: "2.1" body: //body title: "@head//title" @replace_tag(<figure>): $body//p[.//img] # <aside> ://p[contains(text(), '<aside>')] author: "eclipse_it"

“~version” ---- без указания версии рендер крашится

“body: //body” ---- тут указывается самый узкий в плане вложенности блок с полезным контентом. При создании шаблона IV для обычного блога достаточно указать какой-нибудь article, если имеется такой тег:

body: //article

или div с id=”content”:

body: //div[@id="cover"]

или div с классом “content-page”, например:

body: //div[has-class("content-page")]

“title: @head//title” ---- Заголовок будет помещен в теге <title>, ловим его оттуда

“@replace_tag(>): $body//p[. //img]” ---- (не спрашивайте) Да, Notion помещает тег <img> внутрь <p>, парсер на этом ломается

«author: "itnigilist"" ---- название канала или имя автора

“# <aside> ://p[contains(text(), '<aside>')]” ---- тут можно строку удалить, я пока не особо понял, как решить эту проблему. Дело в том, что блок Callout из Notion

Callout из Notion

В HTML-коде выглядит вот так

Как Callout в HTML-страницу встраивается

Поэтому необходимо как-то преобразовать данный <p>

Как прикрутить IV к посту

После того, как макет настроен, надо нажать Track Changes в правом верхнем углу, после чего Mark as checked

Чтобы получить линк —> View in Telegram

Полученную ссылку нужно вставить в пост, но чтобы не засорять ссылкой текст, можно воспользоваться невидимым символом “ㅤ” (имеет код «U+3164”), на который вешаем ссылку.

352 показа
175 открытий
0
3 комментария
Aleksei Solonkov

Очень актуальная статья. Шикарный инструмент автоматизации!

Ответить
Развернуть ветку
readervc

подскажите если обновит пост в ноушн то считвает ли телеграм в своем инстант вью изменения?

Ответить
Развернуть ветку
Артём Панов
Автор

Вроде да, но есть небольшой delay минут в 5-10

Ответить
Развернуть ветку
Написать комментарий...
0 комментариев
Раскрывать всегда