Jekyll：Comments.app 小部件未显示在我的页面上答案

【问题标题】：Jekyll: Comments.app widget does not show up on my pageJekyll：Comments.app 小部件未显示在我的页面上
【发布时间】：2021-04-10 18:17:09
【问题描述】：

我有一个简单的 jekyll 博客，我想在其中添加 comments.app 小部件。

这是我用来添加小部件的代码：

<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.cmets.cmetsapp-id 存储在我的_config.yml 中，并正确放置在渲染结果中。

但小部件未显示在页面上。我做错了什么？

更新：在检查元素选项中我发现了这个：

<iframe id="comments-app-Kh5zcvkB-1" src="https://comments.app/embed/view?website=my-id&amp;page_url=%page/title%2F&amp;origin=https://my-site.com&amp;page_title=y-tittle&amp;limit=5&amp;color=39C4E8&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>

【问题讨论】：

您在控制台中看到 Javascript 错误吗？当您查看页面源代码时，您是否看到 Liquid 已编译，这意味着您看到的不是 {{ site.comments.commentsapp-id }}，而是您添加到配置文件中的 cmets 应用程序 ID？
控制台中只有Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.。是的，liquid 已正确编译。
console 我指的是开发者工具中的浏览器控制台，而不是终端。但看起来你明白了，所以不用担心。

标签： javascript html jekyll telegram telegram-bot

【解决方案1】：

终于解决了这个问题。它是由文档头部的相对规范 URL 引起的。

所以我替换了这个：

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

用这个：

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

现在可以正常使用了。

【讨论】：

如果这是在共享布局中，您可能希望使用{{ page.url | prepend: absolute_url }}。否则，您的所有网页都将具有相同的规范地址。