在Eleventy和Netlify上生成完整的URL

Question

我正在开发一个基于Eleventy的博客和网站。社交媒体共享功能，如Facebook OpenGraph和Twitter卡，需要有图像等资源的完整绝对URL。Twitter特别拒绝任何与图片相关的URL。

Eleventy是否提供了一种生成完整URL的本地方式？由于Eleventy是一个静态生成的网站，与托管的web服务器相反，它不能像其他系统一样从HTTP头中获取信息。如果Netlify提供任何工具从JS生成URL，则该网站将托管在Netlify上。我已经有一些任务要用Gulp生成调整大小的图像。

目前，我只是使用我自己的网站内配置，像这样在Nunjucks模板中生成URL：

{# page_twitter_image is a site root relative path to the image #}
{% if page_twitter_image %}
<meta name="twitter:image" content="{{ site_base_url }}{{ page_twitter_image }}" />
{% endif %}

有关我的URL生成的更多信息，请点击此处。

Answer 1

官方RSS插件包括一个非常简单的Nunjuck过滤器absoluteUrl。如果你添加这个插件，你的代码可能是：

<meta name="twitter:image" content="{{ page_twitter_image | url | absoluteUrl(site_base_url) }}" />

可读性没有太大的提高，但我想更多的是经得起未来考验。

Answer 2

据我所知(基于文档：https://www.11ty.dev/docs/data/#page-可变内容(答案是否定的。不过我认为你的解决方案是有道理的。

我正在提交一份ER，以便能够访问此文件。我认为它应该在页面数据中可用，也许可以通过短代码/过滤器。