Page folder schema

Extend the page folder schema

To extend the page folder schema, follow these steps:

1. From the Studio home page or from the left menu, go to Developer > Schemas.

2. Click Page folder schema: the Page folder schema pane opens.

3. Click Edit schema: the schema editor opens.

4. Add the necessary schema fields. For more information about schema fields, see Schemas.

   Editing the Display properties and SEO schema fields will affect existing page folders and might cause issues with your website. Consult with your development team before editing the existing fields and always ensure backward compatibility with schema.

5. Click Validate and Publish.

Now you'll see the new configuration fields when creating or updating a page folder.

Read page folder configuration in data sources

You can read the page folder configuration in a data source extension handler from the pageFolder.configuration property on the context parameter.

const seoDataSource = async (
  config: DataSourceConfiguration,
  context: DataSourceContext
) => {
  return {
    dataSourcePayload: {
      title: context.pageFolder.configuration.seoTitle,
      seoDescription: context.pageFolder.configuration.seoDescription,
      seoKeywords: context.pageFolder.configuration.seoKeywords,
    },
  };
};

Read page folder configuration in Frontend components

You can read the page folder configuration in a Frontend component from the configuration property on the pageFolder parameter.

function SEOComponent({ data, pageFolder }) {
  return (
    <div>
      <h1>{pageFolder.configuration.seoTitle}</h1>
      <p>{pageFolder.configuration.seoDescription}</p>
      <p>{pageFolder.configuration.seoKeywords}</p>
    </div>
  );
}