Create A HTML File
Create a plain HTML file for your HTML Constant Fragment. Wrap the whole block in one element; this wrapper element and the target element in your pages must share the same selector (ID or class) because the fragment will replace the target element.
/fragment/const/footer.html
<footer id="footer">your footer text</footer>
copy
📜 Note
Keep all constant fragments in one folder for easy maintenance.
Place HTML Constant fragment
To display the HTML Constant fragment, place an empty element with the same unique selector as the fragment’s wrapper on every page; the fragment will replace it.
/index.html
<body>
<footer id="footer"></footer>
</body>copy📜 Note
Empty targeted element and constant fragment wrapper should same element and selector
Configuring HTML Constant Fragments
Add a constant property to the ref object in /reference.js.
Its value is an array of objects; each object needs two keys:
selector– the element that will be replaced (same selector as the fragment wrapper)path– absolute path to the HTML Constant Fragment file
/reference.js
export const ref = {
constant:[
{
selector:"footer#footer",
path: "/fragment/const/footer.html"
}
]
};copy📜 Note
Always use absolute path.
HTML Constant Fragment Except
By default the fragment listed in path is loaded on every page. To override it for specific pages add an optional except object:
except: {
"/about.html": "/fragments/about-footer.html",
"/contact.html": "/fragments/contact-footer.html"
}copyKeys are the page paths you want to override; values are the alternative fragment paths.
/reference.js
export const ref = {
constant:[
{
selector:"footer#footer",
path: "/fragment/const/footer.html"
execpt:{
"targeted page's path: "alternative fragment path"
}
}
]
};copy