Don’t Repeat Yourself

Duplicate one chunk of content across many different pages and handle edits in one place

Most web sites have some repeated content on most or all of their pages to aide navigation. This is often in the form of a header or a side navigation menu that includes links to important pages or entry points for the content.

Believe it or not, copying and pasting code is a typical way to solve this problem, despite some serious drawbacks. Once you have pasted your code, any change will have to be made everywhere you pasted it, typically by copying and pasting things again. This makes updates a huge pain as well as error prone.

Hot Page has a way to tackle this common problem: pages can include other pages. When a page includes another page, all of the content from the included page is just dropped into the including page.

To make a header for your site, for example, all you need to do is create a page that has just the content for the header: your logo and links to key pages, for instance. You can name this page “Header” and give it the path /header or anything else you like. If you don’t want people to access this page directly, make sure that it is not published.

Now, on any page where you want to use your header, just drag and drop it from the Pages tab in the editor to the Body of your document. That’s it.

Any updates you make to the header will now be reflected wherever it is included, instantly.

This documentation site that you’re reading now has an interesting twist on this pattern. If you’re viewing it on a desktop browser that’s wide enough, you will see a navigation menu on the left side of the screen. On mobile, there’s a breakpoint that moves it into a menu at the top. Well, actually it doesn’t move it at all: we just included the same piece of content in two different places on the page, showing one only on mobile and the other only on desktop.