html Jekyll Casts - JSON输出

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Jekyll Casts - JSON输出相关的知识,希望对你有一定的参考价值。

<!-- 
Sometimes it’s useful to output front matter or Collection data as JSON so we can reference it in Javascript.

If the data is an array or hash you can use the jsonify filter. 
-->

---
colors:
  - red
  - blue
  - green
---
<script>
  var colors = {{ page.colors | jsonify }};
</script>

<!-- 
Which generates a JSON array of colors. 
-->

...
var colors = ["red","blue","green"];
...

<!-- 
If we need more control over the output we can always build a JSON object ourselves. 
-->

var posts = [
  {% for post in site.posts %}
    {
      "title": "{{ post.title }}",
      "category": "{{ post.category }}",
      "url": "{{ post.url }}"
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
];

<!-- 
This gives us complete control over the JSON and allows us to run variables through filters. 
-->

[
  {
    "title":"Where Did The Cookie Come From",
    "category":"Information",
    "url":"/information/2016/01/02/where-did-the-cookie-come-from.html"
  },
  {
    "title":"What Is Sour Dough",
    "category":"Information",
    "url":"/information/2016/01/01/what-is-sour-dough.html"
  }
]

<!-- 
Katy DeCorah shows us a real application of this technique in her JekyllConf 2016 talk, Unconventional Use Cases For Jekyll.

Katy creates a map which shows the location of all the speakers at the conference. Hovering over a country displays the speakers in that country. 
-->

<!--
JekyllConf 2016 map

It’s all controlled by a Jekyll data file which is output to JSON. 
-->

- speaker: Ire Aderinkokun
  twitter: ireaderinokun
  country: Nigeria
  talk: Using Jekyll For Rapid CSS Testing

- speaker: Amy Johnston
  twitter: amybeukenex
  country: Netherlands
  talk: Jekyll For Technical Documentation

- speaker: Julio Faerman
  twitter: jmfaerman
  country: Brazil
  talk: Jekyll On AWS

- speaker: Bud Parr
  twitter: budparr
  country: United States
  talk: Real World Content Strategy With Jekyll

以上是关于html Jekyll Casts - JSON输出的主要内容,如果未能解决你的问题,请参考以下文章

html Jekyll Casts - 循环液体

html Jekyll Casts - 液体:循环

html Jekyll Casts - Liquid:逻辑声明

html Jekyll Casts - JSON输出

html Jekyll Casts - 日期格式

html Jekyll Casts - 数据文件