十一中如何为所有页面指定默认布局?

Posted

技术标签:

【中文标题】十一中如何为所有页面指定默认布局?【英文标题】:How do you specify a default layout for all pages in eleventy? 【发布时间】:2020-10-07 16:59:21 【问题描述】:

您似乎应该能够使用 global data files 和 data cascade 为 11ty 网站中的所有页面指定后备布局,但我不知道如何。

我在多个位置尝试了以下 JSON:


  "layout": "layouts/page.njk"

我已将此 JSON 放入:

_data/default.json _data/site.json _data/site.11tydata.json _data/11tydata.json

到目前为止还没有运气。

【问题讨论】:

【参考方案1】:

这实际上是(据我所知)在 Eleventy 中默认情况下还不可能实现的东西。您可以使用目录数据文件为嵌套在该目录中的所有文件指定布局,但这目前在项目的根目录中不起作用。有a feature request for this on GitHub。

在同一个 GitHub 问题中,提出了一种解决方法,效果很好:namely to make a layout.js file in the _data folder which exports a string pointing to the layout location。

我刚刚使用以下设置对其进行了快速测试,它似乎可以正常工作:

希望对你有帮助!

【讨论】:

我让它以同样的方式工作。另请注意:您可以为每个集合文件夹定义默认值,您可以在其中覆盖此全局值并为集合分配新标准 - 创建一个帖子文件夹,放置 aposts.11tydata.json 文件并输入:“eleventyExcludeFromCollections”:false, “布局”:“帖子”,“永久链接”:“帖子/标题/”,“标签”:[“帖子”]【参考方案2】:

我的解决方案是将所有模板文件放在一个名为pages 的目录中。在我的.eleventy.js 配置中,我将输入设置为pages。例如:

module.exports = eleventyConfig => 
  return 
    dir: 
      input: 'pages',
    
  ;
;

然后,在Eleventy documentation 之后,您可以在pages 中设置一个名为pages.json 的JSON 文件。该文件应如下所示:


  "layout": "default"

这样,我的所有页面,包括索引页面,都默认为默认布局。如果需要覆盖页面,可以在 frontmatter 中包含布局。或者,如果您想覆盖目录中的所有内容,只需在该目录中包含一个 <directory-name>.json 文件并指定布局。

我个人在此设置方面没有遇到任何问题,将我的所有模板放在一起并且不与其他配置文件混合是一个额外的好处。

【讨论】:

【参考方案3】:

@user13601182 给出的方法对我有用。

另一种选择是在源文件夹的顶层添加一个数据文件。它需要与文件夹同名,后跟 11tydata.js 或 11tydata.json。例如,如果您的源文件夹名为 src,则该文件将为 src.11tydata.js 或 src.11tydata.json 例如:

src/src.11tydata.js

    module.exports = 
      // Set a default layout for everything in the src folder and below.
      layout: "layouts/default.njk"
    

【讨论】:

以上是关于十一中如何为所有页面指定默认布局?的主要内容,如果未能解决你的问题,请参考以下文章

第十一周

前端笔记十一,盒模型与布局相关属性

第十一周课程总结

任务十一:移动Web页面布局实践

布局中的前沿数据不起作用十一

Web前端学习第十一天·fighting_使用CSS布局和定位