How to use global data in eleventyComputed? #1828
Replies: 1 comment 5 replies
-
|
I might be a little confused here, but... ---
# src/pages/home.liquid
layout: layouts/home.html
eleventyComputed:
title: "{{ home.pageTitle.pt }}"
---
title=<pre>{{ title }}</pre>And my global ./src/_data/home.js data file: module.exports = {
pageTitle: {
pt: "PT PAGE TITLE",
},
};And finally a ./src/_includes/layouts/home.html layout file: <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
</head>
<body>
<main>{{ content }}</p>
</body>
</html>The final rendered HTML page looks like this, so I think it's successfully pulling from my global data file via <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PT PAGE TITLE</title>
</head>
<body>
<main>
title=<pre>PT PAGE TITLE</pre>
</p>
</body>
</html>But all of this is hardcoded in a very basic sample repo, so I'm not sure how your CMS is creating files or the layout of your global data files or if there are additional include files of include files, etc. so it might not match your setup exactly. But if you have a public repo somewhere, I can take a look. |
Beta Was this translation helpful? Give feedback.
-
|
That was a lot of effort from you, I'm really thankful!! That's weird, supposedly it should be working then. I feel like it is tooking too much time out of you, but I made a public clone of the repo: https://github.com/coccamp/public-repo The partial where the data should come from is at |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure how much I can help. > Error in your Eleventy config file '/private/tmp/public-repo/web/.eleventy.js'.
`EleventyConfigError` was thrown
> Configuration must contain `projectId`
`Error` was thrown:
Error: Configuration must contain `projectId`
at exports.initConfig (/private/tmp/public-repo/web/node_modules/@sanity/client/lib/config.js:51:11)
at SanityClient.config (/private/tmp/public-repo/web/node_modules/@sanity/client/lib/sanityClient.js:78:25)
at new SanityClient (/private/tmp/public-repo/web/node_modules/@sanity/client/lib/sanityClient.js:46:8)
at SanityClient (/private/tmp/public-repo/web/node_modules/@sanity/client/lib/sanityClient.js:43:12)
at Object.<anonymous> (/private/tmp/public-repo/web/src/utils/sanityClient.js:8:18)So looks like the Sanity client needs a specific module.exports = async function () {
const data = await client.fetch(query).catch((err) => console.error(err));
if (data[0]) {
console.log({a: data[0]});
return generateHtml(data[0]);
}
console.log({b: data});
return data;
};I guess I'm also confused why the layout is Re: src/teste.html ---
layout: layout.html
title: 'home'
swiper: true
eleventyComputed:
pageTitle: '{{ home.aboutCTA }}'
---Assuming your global _data/home.js data file ultimately exports an object which has a top-level .aboutCTA property, I would have expected this to work: <title>Coccamp | {{ pageTitle }}</title>...although since the And... <div>{{ eleventyComputed.pageTitle }} e {{ swiper }} e {{ title }}</div>I wouldn't expect It feels like this is a similar concept to my very simple proof of concept, so I'm curious what the fetched contents of the |
Beta Was this translation helpful? Give feedback.
-
|
Again I'm amazed by the effort you made! Really glad by your help. The layout thing was a mistake I made when I was trying things to make it work, but apparently eleventy finds the right files in any way, I guess the underscore is more for naming conventions. You lead me to some tests I haven't made yet, but for example putting About your question regarding why not use it directly, it is because there are other pages that will use this same layout. So when we are on page /contact for istance, it will be another eleventyComputed pageTitle value and so on. As I said I'm really impressed and thankful by the time you took to try to help me! It was really valuable! About the situation, I guess I could try to make a switch or if/else chain on manual front-matter 'pageTitle' variables, and then based on that output the dynamic cms values |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, it’s frustrating. I feel like it should work, and by using global data file directly I think you proved that the syntax and data are correct and in the expected format. Now it’s a case of figuring out how we can create a simple test case that shows the eleventyComputed behavior so we can find a workaround. Not sure if you can add some |
Beta Was this translation helpful? Give feedback.
-
|
Also, as my brain multitasks between things, are we sure the computed data is correct and not oddly some stringified version of an object? I noticed you have eleventyComputed:
pageTitle: '{{ home.aboutCTA }}'{{ home.aboutCTA.pt }}We might also need some custom filters to help w/ debugging since it can help debug logging objects. eleventyConfig.addFilter("inspect", require("util").inspect);Then see if you get anything interesting from |
Beta Was this translation helpful? Give feedback.
-
I might not understand correctly how to use the eleventyComputed property.
I created a layout to be used by all my pages. The regular data flows alright, and I am also able to set some variables from the partials to the layout via front-matter:
My issue starts with the <title> of the pages, inside the head of this layout. I cannot simply pass the value as a string via front-matter, because each page gets it's title from the CMS.
So I tried passing the data value from global data with no success:
This literally outputs: {{ home.pageTitle.pt }} as a string; and
outputs: {"[object Object]":null}
I don't know what any other way can I do this? It does look like a very simple scenario. Any help is very appreciated, thanks!
Beta Was this translation helpful? Give feedback.
All reactions