Nixius

History

Colin 73b83fc3fd Add Meet navigation button for web meetings tool - Added Meet link to main navigation pointing to meet.colinknapp.com - Includes title attribute describing it as a no-account web meetings tool - Opens in new tab with proper security attributes		2025-11-28 16:09:49 -05:00
..
IMPLEMENTATION_GUIDE.md	Remove unused development utility scripts	2025-10-19 16:27:05 -04:00
README.md	Remove unnecessary index-with-includes.html template file	2025-10-19 16:24:46 -04:00
favicon-links.html	Update favicon to boot-logo.svg and prioritize SVG in favicon links	2025-11-18 14:23:14 -05:00
footer.html	Save all current changes to resume project	2025-07-06 11:16:43 -04:00
header.html	Add Meet navigation button for web meetings tool	2025-11-28 16:09:49 -05:00

README.md

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
/stories/story-with-includes.html: Example of a story page
/one-pager-tools/tool-with-includes.html: Example of a tool page