Parameter Folders

Parameter folders let you receive part of a URL path as a value and use it on a page.

You can also pass values through query strings (GET parameters), but parameter folders let you include information about a product or post directly in the URL path, creating addresses that are easier to understand and share.

For example, suppose your website has the following product pages:

/products/red-chair
/products/coffee-table
/products/desk-lamp

Instead of creating a separate page file for every product, you can use a parameter folder:

/public/products/[product-id]/+page.essepage

The [product-id] folder, enclosed in square brackets, receives the value entered at that position in the URL and passes it under the name product-id.

/products/red-chair

In this URL, the value of product-id is:

red-chair

You can use the value in the page file with the following syntax:

{{$ folder_param : product-id $}}

Use a parameter folder to receive part of a URL path as a value and display different content from the same page file.

Create a Parameter Folder

Let’s create a parameter folder for product detail pages.

Use the following file structure:

/public
└── products
    └── [product-id]
        └── +page.essepage

Create the Folder and Page File

1. Create a products folder inside /public.
2. Create a [product-id] folder inside products.
3. Create a +page.essepage file inside [product-id].
4. Open the page file and write your code.
5. Save the file and publish it for the first time.

A parameter folder name must be enclosed in square brackets.

[product-id]

The name product-id inside the brackets is used to retrieve the value in the page file.

Display the Value from the URL

Add the following code to /public/products/[product-id]/+page.essepage:

<main>
    <h1>Product</h1>

    <p>
        Product ID:
        <strong>{{$ folder_param : product-id $}}</strong>
    </p>
</main>

Publish the page, and then open the following address:

/products/red-chair

The page displays:

Product ID: red-chair

Change the address to:

/products/coffee-table

The same page file now displays:

Product ID: coffee-table

Instead of creating a separate page file for every URL, a single +page.essepage file handles multiple parameter values.

Difference from Query Strings

You can also pass values through a URL using a query string, sometimes called GET parameters.

/aaa/bbb?ccc=ddd

In this address, /aaa/bbb is the page path, ccc is the parameter name, and ddd is its value.

You can read the value in JavaScript as follows:

<script>
    const query = new URLSearchParams(window.location.search);

    const value = query.get("ccc");
</script>

Parameter folders and query strings are useful in different situations.

You can also use both methods together.

/products/red-chair?color=blue

In this address, red-chair is the parameter folder value, and color=blue is the query string.

Use the Value in JavaScript

Parameter values can also be used in JavaScript.

<h1 id="productTitle">Product</h1>

<script>
    const productId = "{{$ folder_param : product-id $}}";

    document.getElementById("productTitle").textContent = `Product: ${productId}`;
</script>

Open the following address:

/products/red-chair

The page displays the following heading:

Product: red-chair

Parameter values are passed as strings. If you need to use a value in a numerical calculation, convert it to a number in JavaScript.

<script>
    const pageNumber = Number("{{$ folder_param : page-number $}}");
</script>

Receive Multi-Segment URL Paths

A single parameter folder can also receive a URL path containing multiple segments.

Create the following file structure:

/public/products/[product-info]/+page.essepage

This page can handle an address such as:

/products/furniture/red-chair

In this case, product-info receives the remaining path that corresponds to the parameter folder.

furniture/red-chair

Use the following syntax in the page file to display the complete value:

<p>{{$ folder_param : product-info $}}</p>

The page displays:

furniture/red-chair

You can use JavaScript’s split("/") method to separate the path into individual values.

<h1 id="productTitle"></h1>

<p>
    Category:
    <span id="category"></span>
</p>

<p>
    Product ID:
    <span id="productId"></span>
</p>

<script>
    const productInfo = "{{$ folder_param : product-info $}}";

    const [category, productId] = productInfo.split("/");

    document.getElementById("productTitle").textContent = productId;
    document.getElementById("category").textContent = category;
    document.getElementById("productId").textContent = productId;
</script>

Open the following address:

/products/furniture/red-chair

Each variable contains the following value:

The same page file can also handle addresses such as:

/products/books/learning-html
/products/electronics/wireless-keyboard
/products/furniture/coffee-table

When handling dynamic paths with multiple segments, use one parameter folder to receive the entire remaining path instead of nesting multiple parameter folders.

Do not use the following structure:

/public/products/[category]/[product-id]/+page.essepage

Use a single parameter folder:

/public/products/[product-info]/+page.essepage

Then use split("/") to separate the path into the values you need.

Link to Parameter Pages

You can link to an address containing a parameter value in the same way you link to a regular page.

<a href="/products/red-chair">Red Chair</a>
<a href="/products/coffee-table">Coffee Table</a>
<a href="/products/desk-lamp">Desk Lamp</a>

All of these links use the following page file:

/public/products/[product-id]/+page.essepage

Only the value of product-id changes according to the URL of each link.

Links containing multiple path segments work in the same way.

<a href="/products/furniture/red-chair">
    Red Chair
</a>

<a href="/products/books/learning-html">
    Learning HTML
</a>

These links use the following page file:

/public/products/[product-info]/+page.essepage

To learn the basic ways to connect internal pages, see Navigation and Links.

If the Page Does Not Open

If a parameter page does not open or its value is not displayed, check the following:

• The parameter folder is inside /public.
• The folder name is enclosed in square brackets, such as [product-id].
• The parameter folder contains a +page.essepage file.
• The page file has been published.
• The URL contains an actual value instead of square brackets.
• The parameter name in the folder matches the name used in the code.
• The syntax follows the form {{$ folder_param : product-id $}}.

Next Steps

Now that you understand how to use parameter folders, continue with the following guides:

• Create a page for addresses that do not exist: Custom 404 Pages
• Retrieve external data with JavaScript: Using External APIs
• Connect to APIs that cannot be called directly from the browser: Proxy API
• Learn the detailed rules for file and folder names: File Naming Rules
• Connect pages with menus and links: Navigation and Links