Defining Constant Content
Constant content is common content for every page. To define constant content, follow the steps below:
1. Create an HTML file
Create an HTML file where you can store constant content:
/constant/constant-demo.html
<div>Header Content</div>
2. Create an element with an exclusive identifier
Create an element with an exclusive identifier where your constant content will be appended:
/index.html
<body>
<header id="header"></header>
</body>
3. Update the propose.json file
In the propose.json file, create a key named constant, and set its value to be an object . This constant object should have key named constant content selector and value will be stored constent file path.
Take the identifier and place it in the propose.json file:
/propose.json
{
"constant": {
"#header": "/constant/constant-demo.html"
}
}
Note:
- You can create multiple constant content proposals.
- Every possible page must have the element that we propose as a constant content element parent.
Alert: Don't use the target attribute with the <a href=""> tag unless you want to navigate visitors outside of this website. ProposeJS uses the <a href=""> tag to fetch the constant content from the URL mentioned in the anchor tag.
How It Works
Constant content only executes once on page load or refresh, then fetches all data from the mentioned URL and appends it to the mentioned selector in propose.json. State changes or anything else will not cause the constant data to execute again. Constant content helps to maintain the website and avoid writing the same content multiple times.
Constant content can be Header, Footer, or Sidebar, etc.