Create a HTML file

Create a plain HTML file for the default HTML Common Fragment. Wrap all content in a single element whose selector matches the target element in web page; this fragment will be used for any directory that does not have its own specific common fragment.

/fragments/common/aisde/default.html

<aside id="aside">
  <a href="/">home</a>
  <a href="/contact.html">contact</a>
  <a href="/about.html">about</a>
 </aside>copy

📜 Note

Keep all common fragments in one folder for easy maintenance.

Place HTML Common Fragment

To display the HTML Common 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>
    <aisde id="aisde"></aside>
</body>copy

📜 Note

Empty targeted element and common fragment wrapper should same element and selector

Configuring HTML Common Fragment

Add a common property to the ref object in /reference.js. Its value is an array of objects; each object needs two keys:

/reference.js

export const ref = {
  common:[
    {
      selector:"aside#aside",
      default: "/fragments/common/aisde/default.html"
    }
  ]
};copy

📜 Note

Always use absolute path.

HTML Common Fragment Except

By default the fragment listed in default is loaded on every page. To override it for specific directory add an optional except object:

except: {
  "/": "/fragments/common/aisde/root.html",
  "/page/": "/fragments/common/aisde/pages.html"
}copy

Keys are the directory path that you want to override; values are the alternative fragment paths.

/reference.js

export const ref = {
  constant:[
    {
        selector:"footer#footer",
        url: "/fragment/const/footer.html"
        execpt:{
          "targeted directory path: "alternative fragment path"
        }
    }
  ]
};copy
HTML Constant Content HTML Swap Fragment