2.4 KiB

Raw Blame History

HTML Includes System

This system allows for separating headers and footers into external HTML files that can be included in all individual pages, making maintenance easier and ensuring consistency across the site.

Files

header.html: Contains the common header elements for all pages
footer.html: Contains the common footer elements for all pages
includes.js: JavaScript file that handles the inclusion of header and footer files and applies the correct active states to navigation items

How to Use

1. Include the JavaScript

Add the includes.js script to your HTML file:

<script src="../includes.js"></script>

(Adjust the path as needed based on the location of your HTML file)

2. Add Include Placeholders

Add placeholder divs where you want the header and footer to be included:

<!-- Header Include -->
<div id="header-include"></div>

<!-- Your page content here -->

<!-- Footer Include -->
<div id="footer-include"></div>

3. Example Structure

Here's a basic template for a page using includes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your description here">
    <title>Your Title - Colin Knapp</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles.css">
    <!-- Additional CSS files as needed -->
    <script src="../theme.js"></script>
    <script src="../includes.js"></script>
    <!-- Additional JS files as needed -->
</head>
<body>
    <!-- Header Include -->
    <div id="header-include"></div>
    
    <!-- Main Content -->
    <h1>Your Page Title</h1>
    <p>Your page content...</p>
    
    <!-- Footer Include -->
    <div id="footer-include"></div>
</body>
</html>

The includes.js file automatically sets the active state for navigation items based on the current page. The navigation items in header.html have IDs that are used to identify which item should be active.

Example Files

See the following example files that demonstrate how to use the includes system:

/template-with-includes.html: Basic template
/index-with-includes.html: Example of the index page
/stories/story-with-includes.html: Example of a story page
/one-pager-tools/tool-with-includes.html: Example of a tool page

2.4 KiB Raw Blame History