Сегодня рассмотрим механизм добавления быстрого просмотра (Instant View) и как написать пост с его использованием в телеграме.
Как добавить Instant View #
Instant View - очень удобная штука. Она позволяет отображать статьи с сайтов прямо в телеграме со всякими удобными плюшками вроде масштабирования текста и запоминания последней открытой позиции. И, оказывается, в телеграме есть возможность добавить такой функционал для любого сайта. К сожалению, данная возможность выглядит довольно заброшенной, и судя по всему не пользуется особой популярностью. Возможно, это связано с тем, что не каждый сайт удобно просматривать в таком режиме. Но для текстовых статей, как в моём случае, она подходит идеально.
Итак, что для этого нужно:
- Перейти на https://instantview.telegram.org/
- Залогиниться в свой профиль в правом нижнем углу
- Добавить новый шаблон и реализовать парсер для вашего сайта
Понимаю, что третий пункт звучит как дорисовать остальную сову из гайда как стать художником, но для простейшего случая вам поможет пример парсера, который автоматически откроется в редакторе.
Вот парсер, который получился у меня:
~version: "2.0"
$header: //header
body: //article
title: $body//h1
author: $header//p/a
author_url: $author/@href
published_date: $header//p/time/@datetime
@remove: //span[has-class("ln")]
Результат вы либо лицезреете прямо сейчас, либо можете его увидеть открыв мой канал с мобильного устройства и нажав на кнопку Instant View под постом.
Здесь задаётся заголовок, название блога, ссылка на блог, дата публикации и, непосредственно, тело поста.
Также в последней строке происходит небольшая магия, котрая отрезает нумерацию строк из блоков с кодом, поскольку их телеграм упорно показывает склееными в одну строку с содержательной частью блока с кодом.
Синтаксис парсера описан в доке, но для того чтобы получить что-то минимально пригодное для просмотра должно хватить и метода научного тыка.
Когда вы получили устраивающий вас результат быстрого просмотра в правом столбце онлайн-редактора, то можете достать публичную ссылку с помощью кнопки View In Telegram в правом верхнем углу. И тут начинается самое интересное...
Оформляем пост с помощью скрытых символов #
Полученная в результате прохождения предыдущего пункта ссылка обладает несколькими недостатками. Во-первых, она не очень лицеприятна, а во-вторых, при попытке открыть её не через мобильное устройство она покажет вам сервисную странчику с пугающими нормального человека гадостями про временность и непостоянство, и вообще небезопасность куда-то дальше идти по ней.
Чтобы не пугать людей такими ужасами в своих постах можно воспользоваться следующей хитростью:
- Привяжем эту страшную ссылку в тексте поста к символу неразрывного пробела
- И добавим в текст обычную ссылку на наш ресурс без всяких извращений
Что это даёт? Поскольку первой в посте у нас идёт невидимая ссылка на Instant View - для неё внизу поста отобразится превью с нужной нам кнопкой быстрого просмотра! При этом, нажать на скрытую в тексте ссылку нельзя даже случайно, чего нам и не надо. Зато по обычной ссылке можно перейти на неискаженный первоисточник безо всяких проблем.
Пример такого оформления вы можете видеть у меня в канале.
Итоги #
Мы научились добавлять режим быстрого просмотра для любых сайтов и красиво оформлять это в постах в телеграме.
P.S. Выражаю благодарность человеку в нашем чате, который задал вопрос, из которого родилась эта заметка🫶