81 lines
2.4 KiB
Markdown
81 lines
2.4 KiB
Markdown
# 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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<!-- 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:
|
|
|
|
```html
|
|
<!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>
|
|
```
|
|
|
|
## Navigation Active States
|
|
|
|
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 |