在 Eleventy 中维护外部链接

Maintaining external links in Eleventy

我在我的 110 站点中使用 markdown reference links

与其在每个页面上重复定义链接,不如将它们放在一个地方,然后在我的页面中引用它们。

例如 links.md 可以包含:

[github]: <https://github.com/>
[Whosebug]: <https://whosebug.com/>

然后任何页面都可以引用这些链接。

有人知道这是否可行吗?

如果您想在一个地方定义 link 并在您的模板中全局访问它们,您可以在包含 link 的 _data/* 目录中创建一个 global data file ] 定义,然后在你的 Markdown 文件中引用它们。下面是一个示例全局数据文件 _data/links.json:

{
    "socials": {
        "github": "<https://github.com/>",
        "Whosebug": "<https://whosebug.com/>",
        "twitter": "<https://twitter.com/>",
        ...
    }
}

这样您就可以在整个 11ty 项目中使用 {{ foo }} 等插值访问 _data/links.json 中包含 link 定义的全局数据。如果您想在模板中使用该全局数据,您可以引用全局数据文件的名称 links,然后根据需要访问对象键,例如 {{ links.socials.key }}.

不幸的是,使用 [GitHub]({{ links.socials.github }}) 是行不通的,但是为了避免在每个页面上添加 link 定义,您总是可以这样做:

---
title: Some title
templateEngineOverride: njk, md
---

<a href="{{ links.socials.github }}">GitHub</a>

或者,如果使用 Nunjucks 作为您的模板引擎,您可以使用 set 为您的社交 link 创建变量,并避免定义 Markdown 引用 link。

---
title: Some title
---

{% set github = links.socials.github %}

[Link to my GitHub]({{ github }})

最后,使用简码与全局数据搭配使用也不错。

module.exports = function(eleventyConfig) {
    eleventyConfig.addShortCode("socialLink", function(linkName, url) {
        return `<a href="${url}">${linkName}</a>`;
    });
}

// Template Usage (.md or .njk etc)
{% socialLink "GitHub", links.socials.github %}

// outputs: <a href="<https://github.com>">GitHub</a>