【问题标题】:Maintaining external links in Eleventy在 Eleventy 中维护外部链接
【发布时间】:2022-01-09 08:11:56
【问题描述】:

我在我的 11 个网站中使用 markdown reference links

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

例如links.md 可能包含:

[github]: <https://github.com/>
[stackoverflow]: <https://stackoverflow.com/>

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

有人知道这是否可行吗?

【问题讨论】:

    标签: eleventy 11ty


    【解决方案1】:

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

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

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

    很遗憾,使用[GitHub]({{ links.socials.github }}) 不起作用,但为避免在每个页面上添加链接定义,您始终可以执行以下操作:

    ---
    title: Some title
    templateEngineOverride: njk, md
    ---
    
    <a href="{{ links.socials.github }}">GitHub</a>
    

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

    ---
    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>
    

    【讨论】:

    • 感谢@tanner-dolby 的详细回答。我已经选择了简码解决方案
    猜你喜欢
    • 2021-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-10
    • 1970-01-01
    相关资源
    最近更新 更多