Jekyll: виджет Comments.app не отображается на моей странице

#javascript #html #jekyll #telegram #telegram-bot

#javascript #HTML #джекилл #телеграмма #telegram-бот

Вопрос:

У меня есть простой блог jekyll, где я хотел бы добавлять комментарии.виджет приложения.

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

 <h3>Comments:</h3>
<script async src="https://comments.app/js/widget.js?3"
    data-comments-app-website="{{ site.comments.commentsapp-id }}"
    data-limit="{{ site.comments.limit }}"
    data-color="39C4E8" 
    data-dark="1">
</script>
<noscript>
    Comments not available if Javascript is blocked. This is the only function of
    this website which needs Javascript.
</noscript>

идентификатор приложения site.comments.commentsapp хранится в my _config.yml и правильно помещается в отображаемый результат.

Но виджет не отображается на странице. Что я сделал не так?

Обновление: В опции проверки элемента я обнаружил это:

 <iframe id="comments-app-Kh5zcvkB-1" src="https://comments.app/embed/view?website=my-idamp;amp;page_url=%page/title/amp;amp;origin=https://my-site.comamp;amp;page_title=y-tittleamp;amp;limit=5amp;amp;color=39C4E8amp;amp;dark=1" scrolling="no" style="overflow: hidden; border: medium none;" width="100%" height="0" frameborder="0">
    <head></head><body>Page url invalid</body>
</iframe>

1. Вы видите ошибки Javascript в консоли? Когда вы просматриваете исходный код страницы, видите ли вы, что жидкость скомпилирована, что означает, что вместо {{ site.comments.commentsapp-id }} комментариев вы видите идентификатор приложения, который вы добавили в свой конфигурационный файл?

2. Единственное, что есть в консоли Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. . Да, liquid скомпилирован правильно.

3. Под консолью я имел в виду консоль браузера в ваших инструментах разработчика, а не терминал. Но, похоже, вы поняли, так что не беспокойтесь.

Ответ №1:

Наконец-то решена эта проблема. Это было вызвано относительным каноническим URL-адресом в заголовке документа.

Поэтому я заменил это:

 <link rel="canonical" href="{{ page.url }}">

с помощью этого:

 <link rel="canonical" href="{{ absolute_url }}">

Теперь он работает нормально.

1. Вы, вероятно, захотите использовать {{ page.url | prepend: absolute_url }} , если это находится в общем макете. В противном случае все ваши страницы будут иметь один и тот же канонический адрес.