header-footerify is a lightweight JavaScript library designed to automate the insertion of header and footer content into your web pages. By loading header and footer content from external HTML files, this library helps you maintain a clean and modular structure in your projects, making updates easier and more efficient.
- Easy Integration: Quickly integrate the library into your existing projects with minimal setup.
- External Content Loading: Load header and footer content from external HTML files.
- DOM Manipulation: Automatically inserts the content into designated
<header>and<footer>elements. - Lightweight: Minimal impact on page load times.
You can install header-footerify via npm:
npm install header-footerifyOr you can directly include the headerFooter.js file in your project by downloading or cloning the repository:
git clone https://github.com/burhanuddinhamzabhai/header-footerify.gitInclude the script in your HTML file:
<script src="path/to/headerFooter.js"></script>-
Prepare Header and Footer HTML Files
Create separate
header.htmlandfooter.htmlfiles containing your desired header and footer content. -
Include Header and Footer Elements
In your HTML files, include
<header>and<footer>elements where the content should be inserted:<header></header> <footer></footer>
-
Use the Library
Use the
insertHeaderFooter()function to load the content from your external HTML files:insertHeaderFooter('path/to/header.html', 'path/to/footer.html');
Here’s a simple example of how to use header-footerify in a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<!-- Header placeholder -->
<header></header>
<!-- Main content -->
<main>
<h1>Welcome to My Website</h1>
<p>This is a simple example of using the header-footerify.</p>
</main>
<!-- Footer placeholder -->
<footer></footer>
<!-- Include the library -->
<script src="dist/headerFooter.js"></script>
<script>
// Insert header and footer content
insertHeaderFooter('header.html', 'footer.html');
</script>
</body>
</html>We welcome contributions to improve header-footerify. If you have any suggestions or find a bug, please open an issue or submit a pull request.
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes.
- Commit your changes (
git commit -m 'Add new feature'). - Push to the branch (
git push origin feature-branch). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for more details.