We now have two pages on the sensor that we would like to navigate between, using some kind of menu system. Instead of having to insert this menu structure manually into each page, the Markdown engine we use allows us to define a master/detail view of our page. We can create a master Markdown document that contains the menu, and that embeds detail documents in it.
We begin by creating a new Markdown document in the Root
folder and call it Menu.md
. In it, we add the headers that we want all detail pages to have. We, therefore, move the CSS
file to the Menu.md
file, since we want all pages to have the same design. We can also define an Icon
header.
We then go on to provide the general disposition of the page, using the HTML5 elements header
, nav
, main
, and footer
. We define the menu using a bullet-point list. This list is rendered to ul
and li
tags respectively. We can use the CSS file to transform this bullet-point list into a nicer-looking...