在 Eleventy 和 Netlify 上生成完整的 URL

Question

我正在处理 Eleventy based blog and website. Social media sharing features, like Facebook OpenGraph and ，需要有完整的绝对 URL 到资源（如图像）。 Twitter 特别拒绝图像的任何相对 URL。

Eleventy 是否提供生成完整 URL 的本机方法？由于 Eleventy 是一个生成的静态站点，与托管 Web 服务器相反，它无法像其他系统那样从 HTTP headers 获取此信息。如果 Netlify 提供任何工具从 JS 生成 URL，则该站点托管在 Netlify 上。我已经有一些任务可以使用 Gulp.

生成调整大小的图像

目前我只是使用自己的 in-site 配置来生成 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）答案是否定的。不过，我认为您的解决方案很有意义。

我正在提交 ER 以便能够访问它。我认为它应该在页面数据中可用，也许可以通过 shortcodes/filters.

Answer 2

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

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

易读性没有太大改进，但我想更适合未来。

在 Eleventy 和 Netlify 上生成完整的 URL

Generating full URLs on Eleventy and Netlify

javascript

gulp

netlify

nunjucks

eleventy