在Eleventy和Netlify上生成完整的URL

Question

我正在写一个Eleventy based blog and website。社交媒体分享功能，如Facebook OpenGraph和Twitter cards，需要有一个完整的绝对URL到资源，如图片。Twitter特别拒绝任何与图片相关的URL。

11是否提供了生成完整URL的原生方法？与托管的web服务器不同，11是一个静态生成的站点，它不能像其他系统那样从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 %}

More information about my URL generation here。

Answer 1

据我所知(基于文档：https://www.11ty.dev/docs/data/#page-variable-contents)答案是否定的。我认为你的解决方案是有意义的。

我在申请急诊室让我们有可能拿到这个。我认为它应该在页面数据中可用，也许还可以通过快捷代码/过滤器获得。

Answer 2

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

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

易读性没有多大提高，但我猜更适合未来使用。

Answer 3

url筛选器会将站点的base-url预先挂起到所隐含的url字符串。