To incorporate consistent links and content across multiple pages, you'll need to create an HTML file like "head.html" to house these elements. Inside this file, include the necessary links and content such as charset, viewport meta tags, and CDN link for Bootstrap.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee3fee1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
In your other pages where you want to use these links in the head section, you can insert a script tag either within the head tags or at the end of the body content with the following code:
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch("head.html");
const headContent = await fetch("head.html").text();
const headElement = document.querySelector("head");
headElement.insertAdjacentHTML("afterbegin", headContent);
}
catch(error) {
console.log("Error fetching head.html", error);
}
});
You also have the option to place this code in its own JavaScript file and then link that file in the relevant pages to keep your HTML files clean.
By implementing this method, every page utilizing these elements will reflect the updates made in "head.html".