ProposeJS Data type: Variable content

Defining Variable Content

Variable content replaces placeholders and allows passing parameters content, follow the steps below:

1. Create an HTML File

Create an HTML file where variable content will be stored:

/variables/name.html

<div>Dr. Yunos</div>

2. Update the `propose.json` File

Define variable object and set a key using placeholder identifier and value will be variable content file path where you have stored variable content.

/propose.json
{
  "variable": {
    "var.name": "/variables/name.html"
  }
}

3. Add Placeholders with Class Name

Add placeholders as many times as you need to use this variable:

/index.html
<body>
  <var class="name"></var>
  <var class="name"></var>
</body>

4. Pass Parameters from Placeholder

Store Variable

To receive parameter value we need to define a attribute name where parameter value will located in placeholder

/variables/logo.html
<img src="https://proposejs.pages.dev/logo/${data-height}x${data-width}.png" />

Update Proposal in `propose.json` File

We need to define variable as we defined previous variable exapmle.

/variables/logo.html
{
  "variable": {
  "var.logo": "/variables/logo.html"
  }
}

Use the Variable in Your Webpage

Use the variable as many times as needed and pass parameters:

/variables/logo.html
<body>
  <var class="logo" data-height="50" data-width="50"></var>
  <var class="logo" data-height="100" data-width="100"></var>
</body>

Notes:

Always use the class selector for placeholders (recommended).
Multiple placeholders for one variable content can be used on the same page.
In variable parameter placeholders, the attribute name should be covered by ${attr-name}.
If variable content includes parameters, the variable placeholder must have attributes matching the parameters and defined values.

Alert:

Don't use the target attribute with the <a href=""> tag unless you want to navigate the visitor outside of this website.

How It Works:

Using variable content helps keep your website organized by avoiding repeated code. It allows you to pass in parameters, running the needed code every time the page changes or loads. When it gets parameter values, it stores them in the variable and then replaces placeholders on the webpage with these values.

Variable content is useful when any content is used multiple times on the same page or in multiple pages. By passing parameter values, the variable becomes more dynamic and versatile.