We will generate the menu directly from your filesystem tree:
Let's create a menu app at
/apps/menu and set its type to
app-1 to to turn it into an application. Then create a child named
.Inline inside it that will be executed for inlining it within the page.
We'll have to modify our page layout to embed the menu. We will inline it with
.inline(false) to avoid wrapping it in a div that would identify the block as the
/apps/menu file on the filesystem. This will prevent end-users from accidentally removing the menu.
Let's use the
/apps/menu/.Inline file as our menu will contain more JS code than HTML.
First, let's create a
renderMenu() function to render a single menu entry:
We can use it to render the menu entry for the root file which we can get by
f.root(). Then we can return it in the
response file by setting
Note that this is not the same
response file we have used in the
.Request method of the page app.
When a content is inlined (rendered), Boomla creates a new sandboxed environment for executing it with its own
response file. The application must write that
response file's body to return a response to its callee. The callee in turn has to embed the returned results into the response it generates.
Boomla also starts a new transaction every time a content is inlined so that it can automatically roll back any actions in case the application crashes unexpectedly.
To render the entire page tree of the website, we have to call the
renderMenu() function recursively. As pages are always stored in bucket
1, we can use
page.query(':1') to find them.
Let's create a dedicated CSS file for our menu at
/apps/menu/menu.css, again with type
We will highlight the active page by adding an
active class to it. We can check all pages if they match the
context file which point to the currently visited page (the page in context). You can compare two files via
context.id() === page.id().
Also, let's indent each level by wrapping the entries in a class named
subpages. We will support 4 levels of subpages, increase it if necessary.
Here is an example CSS:
Then we can import and use it as before.
Warning: make sure to set the title property of your page instance files otherwise the menu will be blank.
Time to test drive it in your browser!
At this point, we have a multi-page website, with a centrally managed page layout and contents nicely stored in separate files. We can edit the website via the IDE and create new pages and contents as files on the filesystem.
Let's take this to another level by making both the menu and the text contents on the page editable via the built-in rich text editor of Boomla.