Layout Includes

A way to use javascript to include the layout on every page while only having to edit it on one page.

include.js

Where the magic happens. This script contains the HTML for your layout. What it does is it reads the page you include it on and looks for a div with the id 'content.' It fetches what's inside that div and then inserts it into this template. Then it returns the entire template to be rendered by the browser.

document.addEventListener("DOMContentLoaded", function () {
  const content = document.querySelector(".content");
  if (content) {
    const template = `
      <header>
        My Header
      </header>
      <div class="container">
      
        <nav>
          <div class="heading">
            Heading 1
          </div>
          <ul class="sublink">
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
          </ul>
          <div class="heading">
            Heading 2
          </div>
          <ul class="sublink">
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
          </ul>
        </nav>
        
        
        <div class="content"></div>
        
        <nav>
          <div class="heading">
            Affiliates
          </div>
          <ul class="sublink">
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
          </ul>
          <div class="heading">
            Link
          </div>
          <ul class="sublink">
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
            <a href="#"><li>Link</li></a>
          </ul>
        </nav>
      </div>
    `;

// Create a temporary element to modify the template
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = template;

// Insert the existing content inside the new structure
    const newContent = tempDiv.querySelector(".content");
    if (newContent) {
      newContent.innerHTML = content.innerHTML;
    }

// Replace the entire body with the new HTML structure
    document.body.innerHTML = tempDiv.innerHTML;
  }
});

Your content

Create a page. Call it whatever you like. Include your html and your title.

Styling

Of course, you will want to style your page. Here is a style.css you can use if you want to get started right away.

html {
    background-color: #ffffff;
    /* use flex to make it take up all vertical space */
    display: flex;
    flex-direction: column;
  }
  
  
  header {
    text-align: center;
  }
  
  .container {
    flex-grow: 1;
    min-height: 100vh;
    padding: 10px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 200px 3fr 200px; /* Two equal columns */
    gap: 20px; /* Space between columns */
  }
  .content {
    padding: 10px;
  }
  
  
  .heading {
    border: 3px solid #ddd;
    padding: 3px;
  }
  
  
  .sublink {
    width: 170px;
    background-color: #fff;
    list-style-type: none;
    padding: 0;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    /* text styles */
    color: #666;
  }
  
  .sublink a {
    text-decoration: none;
    color: #666;
  }
  
  .sublink:last-of-type {
    border-bottom: 2px solid #eee;
    border-radius: 3px;
  }
  
  .sublink li {
    padding: 5px;
  }
  
  .sublink li:hover {
    background-color: #eee;
  }

And you're done! You can see what it looks like here. You can, of course, alter the template as much as you want. Make it one column if you'd like, change the colors, go wild! This is simply a barebones template you can customize. The purpose is to show what the final result of the includes will look like.

The downsides to this approach are twofold: it won't work if someone has Javascript turned off, and sometimes you may see the screen flash a little as the Javascript loads the content. Very few people browse without Javascript these days. As for the latter, well, nothing is perfect.