Global data

Adding global data to be used anywhere in your site

You can set global variables to your site, accessible by all pages, layouts and components. For example:

// Set a variable
site.data("myNumber", 23);

// Set a function
site.data("randomNumber", function () {
  return Math.random();
});

Now, this data is available in your pages, layouts and components:

<p>My number: {{ myNumber }}</p>
<p>Random number: {{ randomNumber() }}</p>

export default function ({ myNumber, randomNumber }) {
  return `
  <p>My number: ${myNumber}</p>
  <p>Random number: ${randomNumber()}</p>`;
}

Note

Page data have priority over global data. If a page has a variable with the same name as a global variable, the page variable will be used.

Context data

Use the third argument to assign a data value to only a directory. For example:

// Set the layout value to the directory /pages
site.data("layout", "pages.vto", "/pages");

This will assign the data to the /pages directory so only the files in this directory will access to this value. See shared data for more info.

It's also possible to assign a data value to a specific file:

// Set the layout value to a specific file
site.data("layout", "pages.vto", "/pages/my-custom-page.vto");