JSON Template: you can just JSONT

First, the JSON Template is not JSON.
Secondly, if you have no idea what JSON is or what it looks like, look better here .

Sections and Repeating Sections

Sections do most of the work in the JSON Template. There are just two important ideas we need to know about sections:
')

1. The content of the section is displayed only if the section exists.
2. The section defines the scope, being the root section for any data added to it.

Section

{.section item} If this section exists, display this {.end} 

Repeating section

 {.repeated section items} If there are any items, repeat this info for each item {.end} 

Section with alternative

 {.repeated section items} This stuff shows for each item. {.alternates with} ------ *show this dashed line in between each item* {.end} 

Or instruction

Can be used in sections and repeating sections. Used to display an invalid state, for example, if a section does not exist:

 {.section item} Item exists! {.or} Item does not exist :( {.end} 

---

Tags

Tags are used to embed data from JSON into our file.

 {title} 

We can follow the JSON structure using dot notation:

 {item.author.displayName} 

---

Reference Index (@)

@ carries a reference to an element in scope - like 'this' in JavaScript
This is usually used to display HTML code, in the event that there is something to display.

Let's take a look at the following example:

 <div class="title">{title}</div> 

In this case, if {title} does not exist, an empty DIV will be written to the HTML:

 <div class="title"></div> 

To avoid this, the instruction can be written as follows:

 {.section title}<div>{@}</div>{.end} 

As a result, if there is no title, nothing will be written in HTML.

---

Miniature

Usually, each element of the collection (for example: a blog) has an image corresponding to it.
The thumbnail is linked to the publication through the URL of this post, so it is easy to access it:


Each image can be obtained with multiple width options:

 original, 1500w, 1000w, 750w, 500w, 300w, 100w 

There is also a special test for the presence of an element of the collection, an associated image. This is to avoid being with an empty tag in HTML.

 {.main-image?}{.end} 

For example:

 {.main-image?}<img src="" />{.end} 

If the template expects the presence of the main image, regardless of whether it is loaded or not, you can use the or instruction:

 {.main-image?} <img src="" /> {.or} <img src="[fallback-img-URL]" /> {.end} 

---

Plural

Adds the ending "S" to the word if the value is> 1

 You have {num} message{num|pluralize}. 

Adds to the word the ending "es" if the value is> 1

 They suffered {num} loss{num|pluralize es}. 

Facilitates the connection between the noun and the verb

 There {num|pluralize is are} {num} song{num|pluralize}. 

Own option (the first value is assigned if the value = 1, the second if the value is> 1)

 {num-people|pluralize/It depends/They depend} on {num-things} thing{num-things|pluralize}. 

The example is more complicated:

 {.repeated section num} {.plural?} There are {@} people here. {.or singular?} There is one person here. {.or} There is nobody here. {.end} {.end} 

---

Data formatting

date and time

Date formatting is possible according to the date format in YUI

 {addedOn|date %A, %B %d} 

Or in the style of twitter

 {addedOn|timesince} 

String format

html - skips html tags (<,>, &)

 {[string]|html} 

htmltag - skip html tags and quotes (<,>, &, "")

 {[string]|htmltag} 

slugify - converts text to lower case, removes everything except alphanumeric characters and underscores, converts spaces to a hyphen.

 {[string]|slugify} 

smartypants - translates simple ASCII punctuation into smart HTML typographical punctuation marks (Source: http://daringfireball.net/projects/smartypants/ )

 {[string]|smartypants} 

---

Predicates

This is a series of specific additions from Squarespace for the JSON Template. Tests to adapt the code to specific situations. The Squarespace service is a very inspirational thing, I will write about it in the next article. When meeting with the developer part of their product, we will need knowledge in the JSON Template.

All predicates work like this:

 {.predicate-name?} code if the predicate test returns true {.or} code if it the test is not true {.end} 

Commonly used predicates:

Does the element of the collection (or the collection itself) have an image (thumbnail)?

 {.main-image?} 

Does the collection item have a description?

 {.excerpt?} 

Does the collection item have comments?

 {.comments?} 

Does the collection item have Disqus comments?

 {.disqus?} 

Squarespase building block predicates

Does the element have a specific block type?

 {.promote[blockName]?} 

Available [blockName] tests (replace [blockName] with one of the following types):

 map, embed, image, code, quote, twitter, link, video, foursquare, instagram, form 

Navigation Pattern Predicates

Is this navigation point an external link?

 {.external-link?} 

Is this navigation item a folder?

 {.folder?} 

Other predicates

Does this collection item have location information?

 {.location?} 

Is this element of the collection an event?

 {.event?} 

---

Advanced JSONT

Constants

Add characterless space:

 {.space} 

Add tab:

 {.tab} 

Add line break (/ n):

 {.newline} 

Add meta data:

 {.meta-left} and {.meta-right} 

Commenting on JSONT code

 Hello {# Comment} There 

Configure Meta Data

 <%.meta-left%>Hello<%.meta-right%> = HTML: <%Hello%>. 

Inclusions (or something like inclusions)

You can use formatting to load templates that use data within a specific format variable. Inclusion starts with '%' and loads template files.

 {owner|%user-profile.jsont} 

If statement (extension)

Creates a section that is displayed if 'if' returns true (truthy conditions = true || has-value). Note: do not limit the scope.

 {.if property.nestedProperty} Hello World {.end} 

You can use the {.or} operator to process failed tests.

Debugging

 {.Debug?}Rendered in 3 seconds{.end} { "debug" : true|false } 

---

Although I sent you in the beginning to the post JSON and XML. What's better? , still give an example of JSON code here.

Nice json

 { "widget" : { "widget-title" : "Navigation", "widget-id" : 1452345, "widget-type" : "nav", "base-url" : "http://joshkill.com", "items" : [ { "title" : "Home", "description" : "Home is where the heart is", "icon" : "btn-home.png", "url" : "home.html" }, { "title" : "Services", "description" : "We do it all, then some", "icon" : "btn-services.png", "url" : "services.html" }, { "title" : "Contact", "description" : "Let's work together!", "icon" : "btn-contact.png", "url" : "contact.html" } ] } } 

Ugly JSON (per line)

 { "widget" : { "widget-title" : "Navigation", "widget-id" : 1452345, "widget-type" : "nav", "base-url" : "http://joshkill.com", "items" : [ { "title" : "Home", "description" : "Home is where the heart is", "icon" : "btn-home.png", "url" : "home.html" }, { "title" : "Services", "description" : "We do it all, then some", "icon" : "btn-services.png", "url" : "services.html" }, { "title" : "Contact", "description" : "Let's work together!", "icon" : "btn-contact.png", "url" : "contact.html" } ] }} 

---

Area of ​​visibility

I will try to tell you about the scope, this is a simple concept.

The most obvious example of scoping is the folder structure on a computer when trying to find a file. In JSON, a variable that contains other variables is similar to a computer folder. When you click in any folder, we have access to the files inside. Similarly, when a variable in JSON is in scope, we have direct access to other variables inside.

Consider the following JSON example:

 { "items": [ { "fullUrl": "/notebook/a-post-a-post", "title": "A Post! A Post!", "data": { "commentCount": 0, "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi tincid boblong sipe..." } }, { "fullUrl": "/notebook/blog-ideas", "title": "Blog Ideas", "data": { "commentCount": 0, "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi rhoncus faucibus diam ..." } } ] } 

The variable “items” contains other variables. And inside “items”, the variable “data” also contains other variables. You can think of them as folders.

When we use the JSON section, the effect is the same as when opening a folder on a computer, you have direct access to the files inside.

Ok, now let's see the JSON Template scopes in action:

Example

If we want to add a “body” for each element, we can write this:

 {.repeated section items} {data.body} {.end} 

Or we could put the variables in the "data" scope:

 {.repeated section items} {.section data} {body} {.end} {.end} 

We may have a “body” available everywhere, just use the "@" pointer to access the body variable:

 {.repeated section items} {.section data} {.section body} {@} {.end} {.end} {.end} 

Foreign sources? - " Yes ." The information was never published on Habré? - "Yes". To be continued? - "Yes".