In a site of any significant size, especially sites that are data-driven, you won't want to create a composition for each possible page. Uniform enables you to create dynamic pages that act as templates for how to display data from an external source without requiring you to create individual compositions.
For this exercise you will configure a dynamic page in your project that acts as a catch-all for any article that exists in the CMS. During the lesson you will:
- Build a dynamic article page that can display data from any article without an author having to manually a separate page for each and every article.
- Configure a data type that will provide data to the dynamic article page.
- Test the dynamic article page.
Add dynamic page#
- In Uniform, navigate to the Project Map.
- Duplicate the node Home > Articles > The Golden Ratio of Coffee.
About this step
A new node is created with the a path segment
- Change the following values on the new node by clicking on ••• and selecting Edit:
Field Value Name
Path Segment Type Dynamic Path Segment
- Click Save.
- In the project map, navigate to the node Home > Articles > Article.
- Open the composition by clicking on the name of the node.
- Change the following values on the composition:
Field Value Composition Name Article
Connect data resource#
Open the data resources for the composition.
Delete the resource Single Article Content.
Click Add a data resource.
Click add above the drop down of data types to create a new one.Add a new data type from Canvas.
Enter the following values:
Field Value Data Source Contentful > Contentful Archetype Entries by Field Filter by content type Article Field to search Slug Name Article by Slug Public ID articleBySlug
Under the field Article by slug settings, click the button to insert variable.
In Attached To the field showing the slug path, click * article.Select the dynamic portion of the path to set a value for testing.
In the field article, enter the following value:the-right-bean-for-pour-over-coffee-makers
About this step
This value is only used so the components displayed within Canvas have a value during the authoring process.
On the page component, map the following parameter:
Name Mapping Page Title Article by slug Content > items > 1 > fields > title
Replace the existing Hero component with a new component using the component type Hero.
About this step
You have to do this because the original Hero component is based on a pattern, which provides instructions for how the different parameters on the Hero are populated. You want to populate those parameters yourself, so you need to remove the Hero component based on a pattern and replace it with the plain Hero component.
Add the Hero component, set the following parameters:
Name Value Display Variant Image Left Title Style H2
On the Hero component, map the following parameters:
Name Mapping Title Article by slug Content > items > 1 > fields > title Description Article by slug Content > items > 1 > fields > description Image Article by slug Content > items > 1 > fields > file > url
On the Content component, map the following parameters:
Name Mapping Content Article by slug Content > items > 1 > fields > content
On the published site, navigate to the article The right bean for pour-over coffee makers.