Link to a page

Let's link pages together.

Let's create a new page, and link to it from our Index page. First, let's create a folder named Posts. Hit the + button at the bottom of the project sidebar, and select New folder. Alternatively, hit .

New folder

Once created, make sure that the folder is selected in the sidebar, and hit the + button again, this time selecting New file (or hit ). Let's name our file My first post.

Your project should have the following structure:

Project structure

If you didn't create the new page in the Posts folder, you can simply drag it into the folder.

Motif uses file-based routing. This means that the route of a page is determined by its file name, and the folder it's in. Routes are lowercased, and spaces are replaced with dashes. For instance:

  • The Index page is associated with the / route.
  • The My First Post in the Posts is associated with the /posts/my-first-post route.

Creating a link from the Index page

Now, back to our Index page, let's add a link to our new page. Links in Markdown are created using the [Label](url) syntax.

To make it easier to input, links can be created using the slash command /link, or using the shortcut.

For pages belonging to the same project, we don't need to add the full page URL – we can simply add the route of the page. So the link to our new page can be of the form [My first post](/posts/my-first-post).

# Welcome to Motif!
[My first post](/posts/my-first-post)

In our new page, let's add the following content, with a link back to the home page:

# My first post
[Back home](/)

Next, let's change the layout of our posts page using a different template.