How do I use route patterns in my project?

Create a layout for your route pattern

Before you create a route pattern, you’ll need a layout that will render your dynamic content.

In this example, we’ll build a route pattern for team members.
Start by creating a layout named:

team-member.html

This layout will be used to render each team member’s details when their unique URL is visited.

Create a route pattern in your dashboard

1. Open your project in the Blutui dashboard.
2. Navigate to Settings → Route Patterns.
3. Click Create route pattern.

In this example, we’ll set the route pattern to:

/team/{name}

Now configure the pattern parts:

• Click the String button and name it team.
• Click the Slug button and name it name.
• Select your team-member layout as the layout to render.
• Click Create route pattern.

This pattern tells Blutui to render the team-member.html layout whenever a URL matches /team/{name} — for example, /team/darth-vader.

Add logic to your layout

Next, open your team-member.html layout and add the following code:

{% set members = cms.collection('team') %}
{% set member = members | filter(entry => (entry.name | slug) == route.data.name) | first %}

Here’s what this code does:

• Fetches the team collection.
• Filters the collection by comparing the slugified name of each team member with the {name} value from the route pattern.
• Sets the matching entry as member.

This means that when you visit a URL like /team/darth-vader, Blutui will:

1. Take darth-vader from the URL.
2. Match it against the slugged name field in your team collection.
3. Render the team-member layout using that specific entry’s data.

Display the collection data

Now that the matching team member is set, you can render their details anywhere in the layout:

<div class="team-member">
  <img src="{{ member.avatar }}" alt="{{ member.name }}">
  <h1>{{ member.name }}</h1>
  <p>{{ member.bio }}</p>
</div>

This will dynamically populate the page with each team member’s unique information.