Как сделать TG Instant View из страницы Notion03.02.2024 00:15

Как верстать в 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(): $body//p[.//img]
#  ://p[contains(text(), '')]
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» — Заголовок будет помещен в теге , ловим его оттуда</p> <p>»<em>@replace_tag (<figure>): $body//p[.//img]</em>» — не спрашивайте Да, Notion помещает тег <img> внутрь <p>, парсер на этом ломается</p> <p>»<em>author: «eclipse_it</em>» — название канала или имя автора</p> <p>»# <aside>://p[contains (text (), '<aside>')]» — тут можно строку удалить, я пока не особо понял, как решить эту проблему. Дело в том, что блок Callout из Notion</p> <p><img src="https://habrastorage.org/r/w1560/getpro/habr/upload_files/8cd/c7e/e2b/8cdc7ee2b2eece271ae5581bf63daa87.png" alt="Callout в Notion" /></p> <p>Callout в Notion</p> <p>В HTML-коде выглядит вот так</p> <p><img src="https://habrastorage.org/r/w1560/getpro/habr/upload_files/02b/a71/07c/02ba7107c264f116252ede167ead33f1.png" alt="Что произошло?" /></p> <p>Что произошло? </p> <p>Поэтому необходимо как-то преобразовать данный <p></p> <blockquote><p>Буду благодарен, если кто-то подскажет, как</p></blockquote> <h3>Как прикрутить IV к посту</h3> <p>После того, как макет настроен, надо нажать <strong>Track Changes</strong> в правом верхнем углу, после чего <strong>Mark as checked.</strong></p> <p>Чтобы получить линк —> <strong>View in Telegram</strong></p> <p>Полученную ссылку нужно вставить в пост, но чтобы не засорять ссылкой текст, можно воспользоваться невидимым символом «ㅤ» (имеет код «U+3164»,»ㅤ»), на который вешаем ссылку.</p> <p><img src="https://habrastorage.org/r/w1560/getpro/habr/upload_files/57c/0dc/5b8/57c0dc5b8fd3c81a2a13e0739dc895ac.png" alt="В поле "Текст" стоит невидимый символ" /></p> <p>В поле «Текст» стоит невидимый символ</p> <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/articles/791070/?utm_source=habrahabr&utm_medium=rss&utm_campaign=791070">Habrahabr.ru</a></span></p> </div> <br>  <div style="padding-left: 20px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2514821055276660" data-ad-slot="1200562049" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  <noindex> <div style="margin: 25px;" id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'pcnewsru'; var disqus_identifier = '1378804'; var disqus_title = 'Как сделать TG Instant View из страницы Notion'; var disqus_url = 'http://pcnews.ru/blogs/kak_sdelat_tg_instant_view_iz_stranicy_notion-1378804.html'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script>   </noindex> </div> <br class="clearer"/> </div> <br class="clearer"/> <div id="footer-2nd"></div> <div id="footer"> <br/><br/> <ul class="horz-menu"> <li class="about"><a href="/info/about.html" title="О проекте">О проекте</a></li> <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a> </li> <li class="additional-menu"><a href="/info/reklama.html" title="Реклама" class="menu-item"><strong>Реклама</strong></a> <a href="/info/partners.html" title="Партнёры" class="menu-item">Партнёры</a> <a href="/info/legal.html" title="Правовая информация" class="menu-item">Правовая информация</a> <a href="/info/contacts.html" title="Контакты" class="menu-item">Контакты</a> <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная связь</a></li> <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img src="/media/i/email.gif" alt="e-mail"/></a></li> <li style="visibility: hidden"> <noindex>  <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js"; var f = function () { var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s); }; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script> <noscript> <div style="position:absolute;left:-10000px;"> <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru"/> </div> </noscript>  </noindex> </li> </ul> </div>    </div>  <div id="footer-adlinks"></div> <noindex> <script type="text/javascript"> document.write("<a rel='nofollow' href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t45.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='1' height='1'><\/a>") </script>  <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = "https://top-fwz1.mail.ru/js/code.js"; var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);}; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script><noscript><div> <img src="https://top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /> </div></noscript>   <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function () { try { w.yaCounter23235610 = new Ya.Metrika({ id: 23235610, clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true, trackHash: true }); } catch (e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript> <div><img src="https://mc.yandex.ru/watch/23235610" style="position:absolute; left:-9999px;" alt=""/> </div> </noscript>   <script type="text/javascript"> var sc_project=9446204; var sc_invisible=1; var sc_security="14d6509a"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>  <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46280051-1', 'pcnews.ru'); ga('send', 'pageview'); </script> <script async="async" src="/assets/uptolike.js?pid=49295"></script> </noindex>   <script type="text/javascript" src="https://pcnews.ru/js/blockAdblock.js"></script> <script type="text/javascript" src="/assets/jquery.min.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.json.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.form.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.easing.1.2.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/effects.core.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/browser-sniff.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/scripts.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-utils.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-auth.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-fiximg.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-infobox.js"></script> </body> </html>