ProposeJS Unique Content

Defining Unique Content

Unique content is exclusive content for every page. To define unique content, follow the steps below:

1. Create an HTML file

Create an HTML file and name it related to this page. Also, include the ProposeJS script file in the head:

/index.html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- ProposeJS Script File -->
    <script src="/engine.min.js"></script>
    <title>Document</title>
  </head>
  <body>
  </body>
  </html>

2. Add content with an exclusive identifier

Make some content in an element and add an exclusive identifier to the element:

   /index.html
   
  <body>
    <div id="unique-content">
      <!-- Exclusive Content -->
      <p>My Content</p>
    </div>
  </body>

3. Update the propose.json file

Take the identifier and place it in the propose.json file:

/propose.json  {
    "unique": ["#unique-content", "more unique contents"]
  }

Note:

Alert: Don't use the target attribute with the <a href=""> tag unless you want to navigate the visitor outside of this website. ProposeJS uses the <a href=""> tag to fetch the unique content from the URL mentioned in the anchor tag.

How It Works

Unique content helps maintain single-page behavior and dynamically load data. When a visitor clicks an anchor, if the targeted anchor tag does not have the target attribute, the ProposeJS engine fetches data from the window URL and replaces the existing unique content with the fetched unique content. This same behavior occurs on the popstate event.

Unique content can include main content such as Article, Title, Post, etc.