How to create and use Templates?
This page explains about - "How to create and use Templates in Siteoly?"
This is only available in Enterprise Plans. Enterprise plans supports upto 10K cards/detailed pages. Please contact us to setup Enterprise plan.
The concept of 'Templates' will help users to create html/markdown/css/javascript templates that can be used inside 'DetailedPages' in Siteoly.
Instead of repeating the same content inside DetailedPages and bloating the sheet, now you can create repeatable content that is used across multiple 'DetailedPages' into a template that can be used with simple short codes in Detailed Pages.
Templates usually have html/markdown/css/javascript content with placeholders for certain variables.
For example, if you want to display below content on various pages in Siteoly, you can create a template with below content.
<h3> {{city}} in {{country}} has a population of
{{population}} in {{area}} square miles </h3>
To embed this template in a DetailedPage, enter below short code in DetailedPage by passing the required data. Note that the short code can be used along with any other existing content in Detailed Pages. Multiple short codes can be also used in same Detailed Page.
[sly-template @template-id="CityTemplate" @city="New York"
@country="United States of America"
@population="8,336,817"
@area="302.6"]
This translates the template automatically into html as below.
Here is the sample Google sheet to look at. (Make your own copy by copying the sheet to easily expand cell content and see the data in the sheet)
Follow the below steps if you don't have 'Templates' sheet inside your Google sheet.
- 1.Add a new sheet next to 'DetailedPages' sheet (You can add it anywhere as well but adding it next to 'DetailedPages' sheet will make it easy to make changes)
- 2.Name the newly created sheet as "Templates"
- 3.In the new 'Templates' sheet, name the first row's Column A as 'Template Id' and Column B as 'Template Content'. (It should look like as below image) - You can also see this Google Sheet Link for reference.
Once this setup is completed, you can start adding multiple templates and map the variables as needed in the short code.
Here is a short code for above sample setup that can be used in 'DetailedPages'.
[sly-template @template-id="CityTemplate" @city="New York"
@country="United States of America"
@population="8,336,817"
@area="302.6"]
Make sure you append '@' before every parameter as above.
Note that the short code is supported in two columns in 'DetailedPages'
- Column D (Markdown/HTML) - The content inside Detailed Pages Body
- Column G (Javascript/CSS in Head Tag) - The content inside Detailed Pages <head> tag. (See here for more information about content inside <head> tags in Detailed pages)
Note that you need to escape @ and = characters inside the short code if used inside parameter value.
- If you want to use @ inside parameter value, use \@ instead of just @
- If you want to use = inside parameter value, use \= instead of just =