JSONテンプレート：JSONTだけが可能

まず、JSONテンプレートはJSONではありません。

第二に、JSONが何であるか、またはどのように見えるかわからない場合は、 こちらをご覧ください 。

セクションと繰り返しセクション

セクションはJSONテンプレートのほとんどの作業を行います。 セクションについて知っておく必要がある重要なアイデアは2つだけあります。

1. セクションの内容は、セクションが存在する場合にのみ表示されます。
2. このセクションはスコープを定義し、追加されるデータのルートセクションになります。

セクション

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

繰り返しセクション

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

代替セクション

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または指導

セクションおよび繰り返しセクションで使用できます。 セクションが存在しない場合など、無効な状態を表示するために使用されます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

タグ

タグは、JSONのデータをファイルに埋め込むために使用されます。

 {title}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ドット表記を使用してJSON構造を追跡できます。

 {item.author.displayName}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

参照インデックス（@）

@は、JavaScriptの「this」のようなスコープ内の要素へのリンクを保持します

これは通常、表示するものがある場合にHTMLコードを表示するために使用されます。



次の例を見てみましょう。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、{title}が存在しない場合、空のDIVがHTMLで書き込まれます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これを回避するには、命令を次のように記述します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、名前がない場合、HTMLには何も書き込まれません。

---

サムネイル

通常、コレクションの各要素（ブログなど）には対応する画像があります。

サムネイルはこの投稿のURLを介して公開に関連付けられているため、サムネイルへのアクセスは非常に簡単です。





各画像は、いくつかの幅オプションで取得できます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、画像に関連付けられたコレクションアイテムの存在を調べる特別なテストもあります。 これは、HTMLで空のタグにならないようにするためです。

 {.main-image?}{.end}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロードされているかどうかに関係なく、テンプレートがメインイメージの存在を予期している場合は、or命令を使用できます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

複数

value> 1の場合、単語に末尾の「S」を追加します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

value> 1の場合、語に末尾の「ES」を追加します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

名詞と動詞のつながりを促進します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自のオプション（値が1の場合は最初の値が割り当てられ、値が1より大きい場合は2番目の値が割り当てられます）

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例はもっと複雑です：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

データのフォーマット

日時

YUIの日付形式に従って日付の書式設定が可能

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

またはtwitterスタイル

 {addedOn|timesince}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行フォーマット

html-htmlタグ（<、>、＆）をスキップします

 {[string]|html}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

htmltag-htmlタグと引用符（<、>、＆、 ""）をスキップします

 {[string]|htmltag}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

slugify-テキストを小文字に変換し、英数字とアンダースコアを除くすべてを削除し、スペースをハイフンに変換します。

 {[string]|slugify}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

smartypants-単純なASCII句読点文字をスマートな活版印刷HTML句読点に変換します（出典： http ://daringfireball.net/projects/smartypants/）

 {[string]|smartypants}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

述語

これは、JSONテンプレート用のSquarespaceからの一連の特定のアドオンです。 特定の状況にコードを適合させるためのテスト。 Squarespaceは非常に刺激的なものです。これについては次の記事で説明します。 JSONテンプレートの知識が必要なのは、製品の開発部分に精通したときです。



すべての述語は次のように機能します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般的に使用される述語：

コレクション要素（またはコレクション自体）に画像（サムネイル）がありますか？

 {.main-image?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コレクションアイテムには説明がありますか？

 {.excerpt?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コレクションアイテムにコメントはありますか？

 {.comments?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コレクションアイテムにDisqusコメントがありますか？

 {.disqus?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Squarespaseブロックの述語

要素には特定のブロックタイプがありますか？

 {.promote[blockName]?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

利用可能な[blockName]テスト（[blockName]を以下のいずれかのタイプに置き換えます）：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ナビゲーションパターンの述語

このナビゲーションポイントは外部リンクですか？

 {.external-link?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このナビゲーション項目はフォルダーですか？

 {.folder?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他の述語

このコレクションアイテムには位置情報がありますか？

 {.location?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコレクションアイテムはイベントですか？

 {.event?}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

高度なJSONT

定数

文字のないスペースを追加します。

 {.space}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タブを追加：

 {.tab}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

改行（/ n）を追加します。

 {.newline}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メタデータを追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSONTコードをコメントアウトする

 Hello {# Comment} There
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メタデータのカスタマイズ

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

包含（または包含のようなもの）

書式設定を使用して、特定の書式設定変数内のデータを使用するテンプレートをロードできます。 包含は「％」で始まり、テンプレートファイルをロードします。

 {owner|%user-profile.jsont}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Ifステートメント（拡張機能）

'if'がtrueを返す場合に表示されるセクションを作成します（真の条件= true || has-value）。 注：範囲を制限しないでください。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

{.or}演算子を使用して、失敗したテストを処理できます。

デバッグ

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

最初に、 JSONとXMLの投稿に送りましたが。 どちらが良いですか？ 、ここでも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" } ] } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Uい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" } ] }}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

---

範囲

スコープについてお話しますが、これは単純な概念です。



スコープを決定する最も明らかな例は、ファイルを見つけようとするときのコンピューター上のフォルダー構造です。 JSONでは、他の変数を含む変数はコンピューターフォルダーに似ています。 任意のフォルダーをクリックすると、内部のファイルにアクセスできます。 同様に、JSONの変数がスコープ内にある場合、内部の他の変数に直接アクセスできます。



次のJSONの例を検討してください。

 { "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 ..." } } ] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

items変数には他の変数が含まれています。 また、「アイテム」内の「データ」変数には他の変数も含まれています。 それらはフォルダーと考えることができます。



JSONセクションを使用すると、コンピューター上のフォルダーを開いたときと同じ効果が得られ、内部のファイルに直接アクセスできます。



では、実際にJSONテンプレートのスコープを見てみましょう。

例

各要素に「ボディ」を追加する場合、次のように記述できます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、変数を「データ」のスコープに入れることもできます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「Body」はどこでも利用できます。「@」ポインタを使用して「body」変数にアクセスするだけです。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

外国のソース？ 「 はい 。」 情報がハブで公開されたことはありません 「はい」 継続はありますか？ 「はい」