Быстрый просмотр
Примерно 4 месяца назад в Telegram появилась функция быстрого просмотра – Instant View.
Это предварительный просмотр, который позволяет читать статьи, новости с видео и аудио прямо в мессенджере, не открывая это все в браузере. Очень удобная фича, экономит кучу времени и нервов – кул.
Остался один вопрос, как добавить свой сайт?
Начинаем
Вместе с релизом быстрого просмотра объявился конкурс. Желающим нужно было сделать шаблон для сайтов из списка. Первый, кто сделал правильный шаблон для сайта, получал приз. В правилах указано проверить 10-15 страниц и отправлять шаблон на проверку.
Про шаблон для своего сайта, который явно не включен в список, указано, что можно лишь распространять ссылку на свою адаптацию, но не активировать ваш шаблон в итоге.
Это связано с тем, что на данном этапе Telegram проверяет все Instant шаблоны вручную. А сайтов очень много. Думаю вскоре что-то придумают, а пока подготовимся и сделаем быстрый просмотр для своего сайта.
Документация
Любая разработка начинается с, нет не с документации, а с поставления цели. Но первое является неотъемлемой частью. Так что открываем и смотрим что там.
Берем переводчик, вставляем текст и д̶е̶л̶а̶е̶м̶ ̶и̶з̶ ̶э̶т̶о̶г̶о̶ ̶с̶т̶а̶т̶ь̶ю̶ разбираемся.
Итак, при виде ссылки Telegram проверяет, есть ли на нее шаблон или нет, затем получает страницу, применяет к ней правила из шаблона и подается с горячим соусом вам.
Чтобы все было четко, существует формат Instant View:
title Обязательно Форматированный текст – Заголовок страницы
subtitle Форматированный текст – Подзаголовок страницы
author Строка – Автор
author_url Url – Ссылка на автора
published_date Unixtime – Время публикации
description Строка – Короткое описание (отображается в link preview)
image_url Url – Картинка, превью ссылки
document_url Url – Документ, превью ссылки
channel Строка – Тут указывается логин канала
cover Указывается, где содержаться медиа файлы (Изображения, Видео, Аудио
body Само тело страницы, статьи
Ознакомится с поддерживаемыми тегами html, вы можете тут.
Итак, нам лишь нужно указать необходимые по формату данные. По хорошему вам стоит ознакомится с примерами и функциями, но если вы это можете сделать самостоятельно, то зачем вам статья?
Пробуем
Давайте попробуем сделать template для блога Яндекса. Для этого переходим в раздел instantview.telegram.org и нажимаем My Templates. После авторизуйтесь с помощью вашего номера (бот попросит подтвердить вход) и вы вставляете ссылку на ваш сайт.
Теперь нам нужно объявить body, то есть тело статьи. Для этого нам нужно знать тег, в котором содержится основная писанина. Чаще всего это тег article. Чтобы в этом убедиться, откройте сайт и консоль разработчика браузера. Выделите основной элемент и получите тег.
Объявляем это так:
Ого, что-то получилось. Но название повторяется дважды. Убираем это с помощью указания title.
Смотри в каком теге указано название статьи и записываем в редактор:
Неплохо. Теперь нам надо убрать эту мордашку и заодно указать автора с помощью author.
Смотри где прописан наш Константин.
Это div класс “yablogs-floatleft-image__text”.
author: //div[@class=”yablogs-floatleft-image__text”]
Как видите, с помощью //div мы указали тег, а с помощью [@class=””] название класса. Но этого недостаточно, ведь имя автора указано в strong.
Чтобы указать, что необходимый элемент вложен, делаем так:
author: //div[@class=”yablogs-floatleft-image__text”]//strong
То есть просто с помощью тех же // указали тег.
@replace
Убрать запятую нам поможет специальная функция replace. С полным списком доступных функций, вы можете ознакомится тут.
Сначала, для нашего же удобства, сделаем имя автора переменной. Для создания переменной используется символ $.
$aname: //div[@class=”yablogs-floatleft-image__text”]//strong
И теперь в author записываем $aname.
author: $aname
После используем replace:
@replace(“,”, “”): $aname
В скобках указываются символы. Первый который нужно заменить, второй на что заменить. После двоеточия идет место, где это применить. У нас это переменная $aname. Вот вам скрин, а то вы ничего не поняли:
Теперь имя и фамилия отображаются без запятой.
@remove
Теперь нам нужно убрать лишние элементы. Намнем с “Блог Яндекса22сентября…”
Для удобства уберем сразу один header.
@remove: //header[1]
Цифра в квадратных скобочках означает порядковый номер header, который необходимо убрать. В нашем случае первый.
Без скобочек удалились бы все header на странице. В этой статье был всего один header, но мало ли, еще добавиться.
Таким образом, с помощью данной функции вы можете убирать необходимые теги.
Дальше убираем информацию про автора.
@remove: //div[@class=”yablogs-floatleft-image”]
На этой странице куча divов, так что легче указать имя класса.
Осталось убрать метки. Вот эти:
Редактор подсказывает нам, что это Footer. Его и указываем
@remove: //footer
Время публикации
Чтобы все было сас, нам осталось указать время публикации с помощью published_date.
Делаем так:
published_date: //div[@class=”b-article_yablogs-not-draft__date”]
Время на сайте должно быть указано в unixtime, иначе придется переводить его с помощью функции @datetime. Думаю при необходимости вы сможете самостоятельно, основываясь на статье, использовать эту функцию.
path
Ну и забыл упомянуть про path. С помощью него мы устанавливаем, для каких страниц какие правила применять. В нашем случае мы обрабатываем только статьи из /blog, поэтому ставим в самом начале:
?path: /blog/.*
То есть для самого yandex.ru данные правила будут неактуальны.
Тестируем
Сохраняем шаблон кнопкой “MARK AS CHECKED” и пробуем подставить другие статьи.
Переходим в My Templates, кликаем на домен необходимого сайта и вставляем ссылку на другую страницу/статью
В качестве примера я указал ссылку на вот эту статью. Смотрим:
Все прекрасно работает. Таким образом вы для уверенности можете прогнать несколько страниц и отловить баги.
Делимся ссылкой
Так как мы не можем сделать шаблон “родительским”, то есть действительным для всех yandex.ru/blog ссылок, вне конкурса, нам придется делиться специальной ссылкой.
Чтобы ее получить, берем ссылку статьи и вставляем ее в редактор. Как обычно.
Нажимаем кнопку TRACK CHANGES (естественно после того, как вы убедились что все нормально). А потом нажимаем на VIEW IN TELEGRAM и копируем ссылку.
Ее распространяете в своих каналах, чатах.
Результат:
Вывод
Надеюсь статья помогла вам разобраться в быстром просмотре Telegram и поможет сделать шаблон для своего сайта.
Ссылка на шаблон для yandex.ru/blog: blxk.pw/instayablog
