Storing frontmatter data under page variable

[benbrehaut]

Hi everyone 👋

Apologises if this has been answered somewhere.

I am looking at moving over a Jekyll site to use 11ty, which currently has about 450 pages.

On these pages, frontmatter is used for various information, which in Jekyll is stored under the page. variable:

{{ page.title }}

However, in 11ty, most of the defined frontmatter data is not stored in page. variable:

{{ title }}

Is there a way to adjust 11ty to store custom-defined frontmatter under the page. variable, so that instead of the current page object:

{
  date: 2021-03-10T22:43:09.932Z,
  inputPath: './src/pages/index.njk',
  fileSlug: 'pages',
  filePathStem: '/pages/index',
  url: '/',
  outputPath: 'public/index.html'
}

I can have something more similar to how Jekyll current does it:

{
  date: 2021-03-10T22:43:09.932Z,
  inputPath: './src/pages/index.njk',
  fileSlug: 'pages',
  filePathStem: '/pages/index',
  url: '/',
  outputPath: 'public/index.html',
  title: 'The title' // page.title,
  customVariable: 'Some custom variable' // page.customVariable
}

This is so to try and save potential changing 450 pages and to make the migration as smooth as possible. I understand if something like this isn't possible due limitations or such, but wanted to know if such a thing was possible!

Thanks!

[dwkns]

You could use eleventyComputed to map title to page.title.
https://www.11ty.dev/docs/data-computed/
Assuming YAML front matter but it should work regardless of the way your data is stored (in JS or JSON).

---
title: "Normal title"
customVariable: 'Some custom variable'
eleventyComputed:
    page:
      title: "{{title}}"
      customVariable: "{{ customVariable }}"
---
<p>title is  {{ title }}</p>   
<p>page.title is  {{ page.title }}</p>   
<p> customVariable is  {{ page. customVariable }}</p>   

You are effectively saying set page.title to whatever title is.