在 Eleventy 和 Netlify 上生成完整的 URL答案

【问题标题】：Generating full URLs on Eleventy and Netlify在 Eleventy 和 Netlify 上生成完整的 URL
【发布时间】：2020-06-04 03:11:48
【问题描述】：

我正在处理Eleventy based blog and website。社交媒体共享功能，如 Facebook OpenGraph 和 Twitter cards，需要有一个完整的绝对 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 %}

More information about my URL generation here.

【问题讨论】：

标签： javascript gulp netlify nunjucks eleventy

【解决方案1】：

据我所知（基于文档：https://www.11ty.dev/docs/data/#page-variable-contents），答案是否定的。不过，我认为您的解决方案是有道理的。

我正在提交一份 ER，以便可以访问此内容。我认为它应该在页面数据中可用，并且可能通过短代码/过滤器提供。

【讨论】：

谢谢雷蒙德。我期待 url 过滤器在 Django 和其他人中工作，但很惊讶它不做绝对 URL。然后我意识到使用当前的 Eleventy 部署模型是不可能的。但我认为应该有一个适用于不同站点生成器的解决方案，例如一个环境变量。不确定 Netlify deploy 是否已经设置了一个。
我添加了一个 ER 来添加此支持（请求它；）

【解决方案2】：

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

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

可读性提升不大，但我想更具前瞻性。

【讨论】：

【解决方案3】：

该 | url 过滤器会将站点的 base-url 预先附加到所隐含的 url 字符串中。

【讨论】：