javascript - 在 Eleventy 和 Netlify 上生成完整 URL

Question

我正在开发一个Eleventy based blog and website 。社交媒体共享功能，例如 Facebook OpenGraph 和 Twitter cards ，需要有图像等资源的完整绝对 URL。 Twitter 特别拒绝任何图像的相对 URL。

Eleventy 是否提供生成完整 URL 的 native 方法？由于 Eleventy 是生成的静态站点，与托管 Web 服务器相反，因此它无法像其他系统一样从 HTTP header 获取此信息。如果 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

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

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

易读性并没有多大改进，但我想更加面向 future 。