Как встроить интерактивный тир-лист на свой сайт или в блог в один клик?

Что именно вы встраиваете

Открытая встройка OBPAI — это указатель на https://obpai.com/embed/tier/{模板ID} - iframe. Читатель перетаскивает позиции прямо в вашей статье, а вся интерактивность работает на нашем домене; ваша страница лишь задаёт ширину и высоту. Полная страница редактирования остаётся https://obpai.com/tier/{模板ID}。

Высота по умолчанию при копировании кода на сайте — 860px(её можно поменять в окне встройки). Если высота слишком мала, внутри появится полоса прокрутки; если слишком велика — на мобильных будет много пустого места. Ниже — рекомендуемые значения под разные сценарии.

Самый короткий путь: скопируйте и вставьте

1. Откройте нужную страницу шаблона и нажмите «Встроить на сайт / в блог».
2. При необходимости измените высоту; решать, добавлять ли обратную ссылку, вам — со ссылкой читателям проще вернуться к полной странице тир-листа, без неё выглядит «чище».
3. Вставьте сгенерированный HTML в блок HTML / произвольный HTML вашей статьи. Если Markdown-редактор экранирует теги, используйте Raw HTML или плагин с шорткодами.

Пример (замените ID на свой; ниже показано на шаблоне тир-листа языков программирования 1785642240285 ):

<iframe src="https://obpai.com/embed/tier/1785642240285" width="100%" height="860" frameborder="0" style="border:none;border-radius:12px;overflow:hidden;" allowfullscreen></iframe>

Высота и мобильные: не зацикливайтесь на 860

• Длинные статьи на десктопе:860 обычно хватает; если блоков особенно много (под сотню плиток), можно попробовать 960–1100, ориентируясь на то, чтобы «на первом экране было видно минимум два яруса тир-листа».
• Телефон:Фиксированные 860 на мобильном получаются слишком высокими и неудобными. Надёжнее так: на десктопе оставить 860, а на мобильных через CSS-медиазапросы снизить высоту iframe примерно до 640–720, либо подсказать читателю «повернуть экран / открыть полную версию».
• Ширина:Оставляйте width="100%"и ограничивайте ширину внешней обёртки статьи; не задавайте жёстко 1200px, иначе на маленьких экранах появится горизонтальный скролл.

Типичные грабли в разных системах публикации

• Редактор блоков WordPress:Используйте блок «Произвольный HTML»; если вставить iframe прямо в «Классический абзац», его иногда вырезают. Некоторые плагины безопасности снимают iframe — добавьте его в белый список obpai.com или перейдите на плагин шорткодов для iframe.
• Hexo / Hugo / статические сайты:Убедитесь, что рендерер Markdown разрешает raw HTML (например, у Hugo это unsafe = true в настройках). Если тема чистит код через DOMPurify, нужно разрешить атрибуты iframe src。
• Ghost:用 HTML card 嵌入；付费主题偶尔会限制第三方 iframe，最好先在真机上预览一次。
• 微信公众号 / 部分 App 内置浏览器：对第三方 iframe 限制很多，经常直接白屏。更稳的做法是发封面图 + 按钮链接到 /tier/{id} 完整页面，而不是硬嵌进去。
• Notion / 部分文档产品：只支持白名单嵌入，obpai 未必在列——改成外链。

CSP、Cookies 与「白屏」排查

1. 打开浏览器开发者工具的 Console / Network：如果看到 CSP 报 frame-src / child-src 拦截，就在你自己站点的 CSP 里允许 https://obpai.com。
2. iframe 能出来但拖不动：先排除父页面用 CSS 盖住了指针事件（pointer-events: none 的遮罩、广告层）。
3. 只有 HTTPS 的站点嵌 HTTP（或混合内容）会被浏览器直接拦掉——统一用 https://obpai.com。
4. 公司网络或扩展（广告拦截、隐私模式）可能拦第三方帧：换无痕窗口对比一次，再断定是不是代码问题。

什么时候别嵌

模板还在大改、条目名还没校对完的时候，先别大面积嵌入——读者存下的截图会变成过期论据。条目极少（比如不到 8 个）时，一张静态图往往比 iframe 更轻。如果你的站点 CSP 极严又改不了，外链到完整天梯页比「嵌了个白框」体面。

和静态排行图怎么选

Читателям нужносамим менять сортировку, экспортировать и спорить— тогда используйте встраиваемый вариант. Если вы уже зафиксировали выводы и нужно лишь сослаться на них — лучше экспортировать в WebP/PNG и вставить как иллюстрацию: так и легче, и загрузка быстрее. В наших собственных развёрнутых материалах о покупках (например, в тир-листе игровых мышей) мы используем интерактивную таблицу как «инструмент для обсуждения правок», а не как единственный контент всей статьи.