Overview

In order for the Code Filler to work with your templates, the placeholder text must be formatted in a very specific way. Additionally, only specific naming conventions are allowed in order to prevent issues with the sanitizer or parser.

Variables

Safehou-se operates by creating "variables" in your code and allowing users to change those variables. In order for users to be able to edit specific parts of the code, your code needs to have markers for where variables are.

There are two kinds of variables: global variables and loop variables.

Global Variables

Global variables are standalone variables that occur one or more times throughout the entire code. For example, accent colors are global variables since the same color code will appear multiple times throughout the code and are unrelated to other variables.

The syntax for a global variables is {{!Variable Name!}}. Make sure that each different variable has a different Variable Name; only one input box is generated for each unique name. Additionally, variable names can only contain alphanumeric characters.

Example:

<span>{{!Some Text!}}</span>

Loop Variables

Loop variables allow for adding duplicated sections. An example of when to use these would be for color palettes with unlimited colors, adopt threads with multiple adopts, or lists with multiple list items.

The syntax for loop variables is {{%Loop Name% {{%Loop Variable%}} %end%}}. Make sure that each different loop and each different variable in the group has a different Loop Name and Variable Name. For both loop names and variable names, they must only contain alphanumeric characters.

Example:

<div class="d-flex">
{{%Color Palette%
<div class="card m-1" style="height: {{n!Height!}}px; min-width: 30px; background: {{c%Color%}};">
  {{%Name%}}
</div>
%end%}}
</div>

Loops can also be duplicated across sections, which is good for if you want to create looped tabs, collapses, or anything that requires id attributes. The following code snippet allows for the most basic of tabs to be created.

<ul class="nav">
  {{%Tabs Loop%
  <li class="nav-item"><a href="#{{%ID%}}" data-toggle="tab">{{%Tab Name%}}</a></li>
  %end%}}
</ul>
<hr></hr>
<div class="tab-content">
  {{%Tabs Loop%
  <div class="tab-pane" id="{{%ID%}}">
    {{%Tab Content%}}
  </div>
  %end%}}
</div>

Loops can also be nested. The following code snippets show a few examples of how loops can be nested within each other.

{{%Outer Loop%
  <h5>{{%Outer Loop Item%}}</h5>
  <hr></hr>
  <ul>
  {{%Inner Loop%
    <li>{{%Inner Loop Item%}}</li>
  %end%}}
  </ul>
%end%}}

{{%Loop 1%
  <h5>{{%Loop 1 Item%}}</h5>
  <hr></hr>
  <ul>
  {{%Loop 2%
    <li>{{%Loop 2 Item%}}</li>
    <ul>
    {{% Loop 3%
      <li>{{%Loop 3 Item%}}</li>
    %end%}}
    </ul>
  %end%}}
  </ul>
%end%}}

{{%Outer Loop%
  <h5>{{%Outer Loop Item%}}</h5>
  <hr></hr>
  <ul>
  {{%Inner Loop 1%
    <li>{{%Loop 1 Item%}}</li>
  %end%}}
  </ul>
  {{%Inner Loop 2%
  <small>{{%Loop 2 Item%}}</small>
  %end%}}
%end%}}

Group Variables

Group variables are very similar to loop variables except they cannot be duplicated. To convert a loop to a group, simply use two % in your loop name instead of one.

<div class="d-flex">
{{%%Color Palette%
<div class="card m-1" style="height: {{n!Height!}}px; min-width: 30px; background: {{c%Color%}};">
  {{%Name%}}
</div>
%end%}}
</div>

If Variables

If variables allow for a show/hide toggle to appear for the section. This can be used to change which tab is default active at first, or show/hide certain badges that are optional.

The syntax for if variables is {{?If Variable? Content to show or hide ?end?}}. Make sure that each different if-group and each different variable in the group has a different If-Group Name and Variable Name. For both if-group names and variable names, they must only contain alphanumeric characters.

{{?Show or Hide?
  Some Text
?end?}}

Variables and loops can be nested within if-groups as well.

{{?Show or Hide?
  {{!Variable!}}
?end?}}

{{?Show or Hide?
  <h1>if</h1>
  <hr></hr>
  <ul>
  {{%Loop%
    <li>{{%Content%}}</li>
  %end%}}
  </ul>
?end?}}

Input Types

Different input types are available depending on what the user is replacing. Adding a character before the ! or % can signify to the parser what kind of input to use.

Default:

{{!Some Text!}}

Color:

<div style="background-color: {{c!Color!}};"></div>

Icon:

<i class="{{i!Icon!}}"></i>

Longer Text:

<p>{{l!Longer Text!}}</p>

Links/Image URLs:

<a href="{{u!Link!}}"></a>

YouTube Code:

{{y!Youtube Code!}}

Number:

<div style="width: {{n!Width!}}px;"></div>