Eleventy: Array of layouts: Is it possible to create 2 outputs per page, e.g. one AMP and one non-AMP?
I would like to create two output formats for one input, e.g. one AMP and one non-AMP version of the same content. If this functionality exists I would imagine that you could provide an array of layouts like:
layout: [["base.njk", "{{ mypagename }}"],["amp.njk", "amp-{{ mypagename }}"]]
or similar. The effect should be that for the same original content two versions will be generated.
If there are other ways to do that without too much duplication it would be fine, too.
Thanks,
Christian
cs224
All 10 comments
Hm,
I wonder whether you could use a (custom?) collection over it and have one or two empty files to trigger the second layout...
Could you explain your use case?
Blog posts?
Ryuno-Ki
on 8 Oct 2019
My use case is that I want to create 2 output files for each input file (e.g. for each posts/XXX.md):
- one standard HTML: XXX.html
- one AMP: amp-XXX.html
cs224
on 9 Oct 2019
I'm also interested in this! @Ryuno-Ki I tried messing around with a custom collection but got a bit lost as I need the files to output to the same folder. Would you mind going into a bit more detail on your solution please? Fwiw I also saw this comment about using pagination but it doesn't seem to allow for two different layouts to be used.
In case it's helpful for extra context: I have some blog posts, and I'd like to have an index.html and amp.html created for each. So the input might be like:
-- blog/
---- post-1.md
---- post-2.md
And the output like:
-- blog/
---- post-1/
------ index.html
------ amp.html
---- post-2/
------ index.html
------ amp.html
The content of both are the same, but the layouts used to generate them would be different. For example, for the AMP pages the CSS needs to be inline, different scripts will be used and it needs to have the <html âš¡> tag and be linked to the original index.html page.
BrianH2
on 19 Oct 2019
I'm also trying to do the same.
I know AMP is controversial in the developer community right now, but in 2019 it is a must-have for any content site. Google Discover is a massive firehose of traffic that favors AMP content.
Has anybody implemented what BrianH2 outlines successfully w/ 11ty?
kevbot123
on 15 Nov 2019
Good questions, shares some overlap with i18n approaches in a way, I think. The obvious thing to do here is to run Eleventy twice with environment variables that set layouts in JS Data Files. e.g. https://www.11ty.io/docs/data-js/#example%3A-exposing-environment-variables
zachleat
on 15 Nov 2019
Interesting, trying to wrap my head around how this might work inside of continuous deployment. How would you instruct Netlify to build twice?
kevbot123
on 15 Nov 2019
I wondered if it was possible to use eleventyComputed values to set the layout. e.g. something like:
content/content.11tydata.js
module.exports = {
eleventyComputed: {
thelayout: process.env.LAYOUT
}
}
content/content-with-layout.md
title: My Rad Markdown Blog Post
layout: {{ eleventyComputed.thelayout }}
---
# {{ title }}
Running $ LAYOUT=mylayout.njk npx @11ty/eleventy with the above throws an error.
> The "path" argument must be of type string. Received an instance of Object
`TypeError` was thrown:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object
michrome
on 10 Mar 2020
Have you logged the environment variable in the 11tydata to check it's value?
Ryuno-Ki
on 11 Mar 2020
In the end, I came up with a much simpler solution which you can see at https://github.com/michrome/eleventy-amp-example — use JavaScript front matter.
article-1.md
---js
{
title: "My First Article",
layout: process.env.LAYOUT
}
---
# {{ title }}
This is the first article.
You can see the example deployed to Netlify (standard template and amp template).
@kevbot123 I run the build once for each template. See https://github.com/michrome/eleventy-amp-example/blob/master/netlify.toml
Hope this helps you, @cs224, @BrianH2 and @fogrew !
michrome
on 15 Mar 2020
This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.
If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!
zachleat
on 11 Jul 2020
Related issues
michrome
·
3Comments
zachleat
·
3Comments
DirtyF
·
3Comments
proog
·
3Comments
ndaidong
·
4Comments
Most helpful comment
In the end, I came up with a much simpler solution which you can see at https://github.com/michrome/eleventy-amp-example — use JavaScript front matter.
article-1.mdYou can see the example deployed to Netlify (standard template and amp template).
@kevbot123 I run the build once for each template. See https://github.com/michrome/eleventy-amp-example/blob/master/netlify.toml
Hope this helps you, @cs224, @BrianH2 and @fogrew !