Как сделать TG Instant View из страницы Notion
Tags: notion, instantview, telegram, markdown
Published: 2023-09-18 08:56:59

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

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

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


![Как Blockquote выглядит в IV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohchez7c1zvgwhs1jri3.png)*<center>Как Blockquote выглядит в IV</center>*

---


![Как этот же блок верстался в Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tnext5dygo02xt89wkh.png)*<center>Как этот же блок верстался в Notion</center>*

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

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

Идем в [My Templates](https://instantview.telegram.org/my/) и вставляем в поле ссылку на статью и жмем Enter

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

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

```tsx
~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, если имеется такой тег:

```tsx
body: //article
```

 или div с id=”content”:

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

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

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

---

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

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

“*author: "eclipse_it*"" - название канала или имя автора

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


![Callout из Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qep0jdfxvh8ypzvmpqz6.png)



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


![В HTML-коде выглядит вот так](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hndqu4nm1iimvf4zm6z8.png)



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

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

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

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

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

![Пустой символ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p14eac0yoe1payo7wbw.png)