Having the menu in one place is great, but our page layout is repeated in many files. Let's create a page app and use that by all of our pages.
Create the file /src/page
, set its type to sjs-4et
and copy the contents of the root file into it.
Empty the body of the root file and set its type to /src/page
.
At this point, you can visit your root page and it will work just as before.
What is going on here? When you visit the root file, its file type points to another file, so that will be executed instead. Of course, we want to have different content on our pages, so let's continue.
Create the file /main
. No need to set its file type.
Create the file /main/content
, set its type to sjs-4et
and its body to:
class="t1 font-32"Homeclass="t1 mt-16"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat neque turpis, vel varius massa tincidunt non. Aliquam vitae neque ligula. Mauris et consectetur massa. Donec egestas est ac mauris molestie, et fermentum libero hendrerit. Etiam mollis, sapien ut porta sodales, diam elit fringilla tortor, vitae accumsan nibh mi eu risus. Sed porta quam ullamcorper arcu facilisis, vel sollicitudin turpis pharetra. Cras tristique luctus nisi. In eget massa mattis, sagittis orci et, rutrum sem.class="t1 mt-16"In dui libero, porta at eros at, condimentum mattis dui. Etiam commodo nunc eget erat elementum, sit amet commodo libero vulputate. Vestibulum fringilla vehicula elit vitae lacinia. Duis tempor lobortis sapien, nec vulputate nisl luctus eu. Ut posuere tortor et pulvinar fringilla. Praesent fermentum viverra odio. Curabitur velit magna, venenatis vitae congue quis, sollicitudin vitae neque. Mauris enim massa, dapibus ut consectetur vitae, pellentesque id quam. Donec maximus, orci id accumsan eleifend, enim augue vestibulum dui, rutrum lobortis dui diam nec quam. Aliquam dui elit, rutrum ac nisi eu, bibendum dignissim arcu.
Open the /src/page
file's body and replace the contents on that page with:
<!DOCTYPE html>Homeclass="t1 t1-start bg-c-blue-500"class="t1 flex flex-center w-full"<?== source.select('/src/menu').inline(false) ?>class="t1 flex-1 flex justify-content-center w7:mb-64"class="t1 w-full max-w-640 w10:max-w-800 px-16 py-32 w6:px-32 w6:py-48 w10:p-64 w6:shadow-8 bg-c-white min-h-80vh"<?== f.query('main/*').inline() ?>
We are primarily interested in this line:
<?== f.query('main/*').inline() ?>
When a page is visited, the /src/page
app will be executed. The source
variable within its code will always reference /src/page
file while the variable f
will reference the actual page the user is visiting. f.query()
will search the filesystem and return matching files. In this case, when the root file is visited, f
will point to the root file. Finding main/*
will only match the /main/content
file under it. So, this file will be inlined into the page.
Let's visit the root page to see the results!
Okay, time to update all the other pages too. Change their file types to /src/page
, create the main/content
files under all of them, and move the relevant HTML code in there.
Also, make sure to empty the file body of each of the original page files to keep things nice and tidy.
Visiting all our pages, they should work like before. But now, we can change the background-color of all our pages in one place and all of them will be updated.
This helps you work faster and it also guarantees a coherent user experience for our visitors.