Instant View для начинающих

Хочу сразу сказать, что это не обучающая статья, а наглядный пример, как я делал шаблон IV для своего сайта. Спасибо за понимание.

Как то читал статью на хабре с помощью Instant View на телефоне, и подумал: "А чем я хуже?", надо создать шаблон, пускай коряво, пускай без красоты, зато будет удобно читать. Ну что-же приступим к созданию шаблона.

1 . Заходим сюда и вводим домен на который хотим создать шаблон, жмякаем Enter и попадаем в такую красоту:

Перед нами находится три окошка: Обычный вид сайта, редактор правил IV, и вид сайта в Instant View.

2 . Начинаем писать шаблон, если у вас простой сайт без всякой "билеберды" то написание шаблона дастся вам с 100500 попытки легко.

В редакторе пишем:

title: $body//h1[has_class("article__header_title")]

Те кто разрабатывают сайты наверное уже догадались что означает эта строчка, но для тех кто не понял, я поясню:

title: - Правило Instant View, отвечает за заголовок статьи

$body - Содержимое страницы

// - Инструкция, дает команду искать что-либо внутри чего либо, в нашем случае искать h1[has_class("article__header_title")] в $body

h1[has_class("article__header_title")] - Обозначение заголовка страницы который имеет HTML-класс "article__header_title".

Если говорить человеческим языком то эта строчка дает команду найти содержимое элемента h1 с классом "article__header_title", который находится в элементе $body и записать это в свойство title.

Теперь пишем такую строчку:

body: //article

Данное строчкой мы указываем, что нужное нам содержимое, в нашем случае текст статьи, находится в элементе article.

И теперь добавляем такую строчку:

cover: $head//meta[@property="og:image"]

Тут немного поинтереснее. Мы указываем, что обложка нашей страницы находится в $head (Мета-информация для браузера), в элементе meta у которого свойство "property" равно "og:image".

3 . Нажмаем CTRL+S и смотрим результат. Если вы сделали все правильно то ваша страница будет отображаться корректно.

Теперь вы можете проверить, как это выглядит в самом Telegram, просто отправьте себе/кому-нибудь ссылку на страницу и нажмите на кнопку "Посмотреть".

На этом все, спасибо что дочитали эту статью до конца, и в качестве бонуса я выкладываю код универсального шаблона для Teletype.

~version: "2.1"

title: $body//h1[has_class("article__header_title")]
body: //article
cover: $head//meta[@property="og:image"]

P.S Эта статья также доступна в Instant View