GithubPages+Jekyll模板中各类型对象的方法介绍

Jekyll 使用Liquid来处理模板数据。在建立中文博客的过程中，常常会苦于无法在文章中显示中文或阿拉伯数字形式日期的问题，而网上绝大多数给出的方案都只是官方的文档给出的 07 Jan 2015。为了能够了解Jekyll模板中不同对象究竟有哪些可以使用的方法，写下此文。

在Liquid中，以上面的语句为例，page为object对象，page.date为attribute属性，后面的date_to_string叫做filter过滤器。请参考Liquid官网关于Objects的介绍。而在Jekyll中page被叫做Global Variables全局变量，而每个全局变量拥有的多个属性被称为子变量，如Site全局变量的子变量为Site Variables。请参考官网的变量介绍一页。

不同的属性拥有不同的类型，有的属于数组，有的属于字符，有的属于日期时间等等，下面分别介绍不同类型属性的过滤器：

#数组过滤器

主要包括以下对象：

site.pages

site.posts

site.related_posts

site.static_files

site.html_pages

site.collections

site.data

site.documents

site.categories

site.categories.CATEGORY

site.tags

site.tags.TAG

site.[CONFIGURATION_DATA]

page.categories

page.tags

paginator.posts

###join

{{ product.tags | join: ', ' }}

tag1, tag2, tag3

###first

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

sale

{% if product.tags.first == "sale" %}
    This product is on sale!
{% endif %}

###last

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | last }}

awesome

{% if product.tags.last == "sale" %}
    This product is on sale!
{% endif %}

###map

<!-- collection.title = "Spring", "Summer", "Fall", "Winter" -->
{% assign collection_titles = collections | map: 'title' %}
{{ collection_titles }}

SpringSummerFallWinter

###size

{{ 'is this a 30 character string?' | size }}

###sort

<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
   {{ product.title }}
{% endfor %}

A B a b

#HTML标签过滤器

###img_tag

{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}

<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />

###script_tag

{{ 'shop.js' | asset_url | script_tag }}

<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>

###stylesheet_tag

{{ 'shop.css' | asset_url | stylesheet_tag }}

<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />

#数学函数过滤器

主要包括以下对象：

paginator.per_page

paginator.total_posts

paginator.total_pages

paginator.page

paginator.previous_page

paginator.previous_page_path

paginator.next_page

paginator.next_page_path

###ceil

{{ 4.6 | ceil }}
{{ 4.3 | ceil }}

5
5

###divided_by

<!-- product.price = 200 -->
{{ product.price | divided_by: 10 }}

###floor

{{ 4.6 | floor }}
{{ 4.3 | floor }}

4
4

###minus

<!-- product.price = 200 -->
{{ product.price | minus: 15 }}

###plus

<!-- product.price = 200 -->
{{ product.price | plus: 15 }}

###round

{{ 4.6 | round }}
{{ 4.3 | round }}
{{ 4.5612 | round: 2 }}

5
4
4.56

###times

<!-- product.price = 200 -->
{{ product.price | times: 1.15 }}

###modulo

{{ 12 | modulo:5 }}

#货币函数过滤器

###money

{{ 145 | money }}

<!-- if "HTML without currency" is ${{ amount }} -->
$1.45
<!-- if "HTML without currency" is €{{ amount_no_decimals }} -->
€1

###money_with_currency

{{ 1.45 | money_with_currency }}

<!-- if "HTML with currency" is ${{ amount }} CAD -->
$1.45 CAD

###money_without_currency

{{ 145 | money_without_currency }}

1.45

#字符串过滤器

主要包括以下对象：

page.content

page.title

page.excerpt

page.url

page.id

page.path

###append

{{ 'sales' | append: '.jpg' }}

sales.jpg

###camelcase

{{ 'coming-soon' | camelcase }}

ComingSoon

###capitalize

{{ 'capitalize me' | capitalize }}

Capitalize me

###downcase

{{ 'UPPERCASE' | downcase }}

uppercase

###escape

{{ "<p>test</p>" | escape }}

 <!-- The <p> tags are not rendered -->
<p>test</p>

###handle/handleize

{{ '100% M & Ms!!!' | handleize }}

100-m-ms

###md5

<img src="http://www.gravatar.com/avatar/{{ comment.email | remove: ' ' | strip_newlines | downcase | md5 }}" />

<img src="http://www.gravatar.com/avatar/2a95ab7c950db9693c2ceb767784c201" />

###newline_to_br

{% capture var %}
One
Two
Three
{% endcapture %}
{{ var | newline_to_br }}

One <br>
Two<br>
Three<br>

###pluralize

{{ cart.item_count }}
{{ cart.item_count | pluralize: 'item', 'items' }}

3 items

###prepend

{{ 'sale' | prepend: 'Made a great ' }}

Made a great sale

###remove

{{ "Hello, world. Goodbye, world." | remove: "world" }}

Made a great saleHello, . Goodbye, .

###remove_first

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}

Hello, . Goodbye, world.

###replace

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

Mega Shoes

###replace_first

<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}

Mega Awesome Shoes

###slice

{{ "hello" | slice: 2 }}
{{ "hello" | slice: 1, 3 }}

e
ell

{{ "hello" | slice: -3, 2  }}

el

###split

{% assign words = "Uses cheat codes, calls the game boring." | split: ' ' %}
First word: {{ words.first }}
First word: {{ words[0] }}
Second word: {{ words[1] }}
Last word: {{ words.last }}
All words: {{ words | join: ', ' }}
{% for word in words %}
{{ word }}
{% endfor %}

First word: Uses
First word: Uses
Second word: cheat
Last word: boring.
All words: Uses, cheat, codes,, calls, the, game, boring.

Uses cheat codes, calls the game boring.

###strip

{{ '   too many spaces      ' | strip }}

too many spaces

###lstrip

{{ '   too many spaces           ' | lstrip }}

<!-- Notice the empty spaces to the right of the string -->
too many spaces

###rstrip

{{ '   too many spaces      ' | rstrip }}

                 too many spaces

###strip_html

{{ "<h1>Hello</h1> World" | strip_html }}

Hello World

###strip_newlines

{{ product.description | strip_newlines }}

###truncate

{{ "The cat came back the very next day" | truncate: 10 }}

The cat...

###truncatewords

{{ "The cat came back the very next day" | truncatewords: 4 }}

The cat came back...

###uniq

{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}

orange apple banana

###upcase

{{ 'i want this to be uppercase' | upcase }}

I WANT THIS TO BE UPPERCASE

###url_escape

{{ "<hello> & <shopify>" | url_escape }}

%3Chello%3E%20&%20%3Cshopify%3E

###url_param_escape

{{ "<hello> & <shopify>" | url_param_escape }}

%3Chello%3E%20%26%20%3Cshopify%3E

###number_of_words

{{ page.content | number_of_words }}

###array_to_sentence_string

{{ page.tags | array_to_sentence_string }}

foo,bar,and baz

#日期过滤器

主要包括以下对象：

site.time

page.date

{{ article.published_at | date: "%a, %b %d, %y" }}

Tue, Apr 22, 14

###%a:Abbreviated weekday.

{{ article.published_at | date: "%a" }}

<!-- Sat -->

###%A:Full weekday name.

{{ article.published_at | date: "%A" }}

<!-- Tuesday -->

###%b:Abbreviated month name.

{{ article.published_at | date: "%b" }}

<!-- Jan -->

###%B:Full month name

{{ article.published_at | date: "%B" }}

<!-- January -->

###%c:Preferred local date and time representation

{{ article.published_at | date: "%c" }}

<!-- Tue Apr 22 11:16:09 2014 -->

###%d:Day of the month, zero-padded (01, 02, 03, etc.).

{{ article.published_at | date: "%d" }}

<!-- 04 -->

###%-d:Day of the month, not zero-padded (1,2,3, etc.).

{{ article.published_at | date: "%-d" }}

<!-- 4 -->

###%D:Formats the date (dd/mm/yy).

{{ article.published_at | date: "%D" }}

<!-- 04/22/14 -->

###%e:Day of the month, blank-padded ( 1, 2, 3, etc.).

{{ article.published_at | date: "%e" }}

<!-- 3 -->

###%F:Returns the date in ISO 8601 format (yyyy-mm-dd).

{{ article.published_at | date: "%F" }}

<!-- 2014-04-22 -->

###%H:Hour of the day, 24-hour clock (00 - 23).

{{ article.published_at | date: "%H" }}

<!-- 15 -->

###%I:Hour of the day, 12-hour clock (1 - 12).

{{ article.published_at | date: "%I" }}

<!-- 7 -->

###%j:Day of the year (001 - 366).

{{ article.published_at | date: "%j" }}

<!-- 245 -->

###%k:Hour of the day, 24-hour clock (1 - 24).

{{ article.published_at | date: "%k" }}

<!-- 14 -->

###%m:Month of the year (01 - 12).

{{ article.published_at | date: "%m" }}

<!-- 04 -->

###%M:Minute of the hour (00 - 59).

{{ article.published_at | date: "%M" }}

<!--53-->

###%p:Meridian indicator (AM/PM).

{{ article.published_at | date: "%p" }}

<!-- PM -->

###%r:12-hour time (%I:%M:%S %p)

{{ article.published_at | date: "%r" }}

<!-- 03:20:07 PM -->

###%R:24-hour time (%H:%M)

{{ article.published_at | date: "%R" }}

<!-- 15:21 -->

###%T:24-hour time (%H:%M:%S)

{{ article.published_at | date: "%T" }}

<!-- 15:22:13 -->

###%U:The number of the week in the current year, starting with the first Sunday as the first day of the first week.

{{ article.published_at | date: "%U" }}

<!-- 16 -->

###%W:The number of the week in the current year, starting with the first Monday as the first day of the first week.

{{ article.published_at | date: "%W" }}

<!-- 16 -->

###%w:Day of the week (0 - 6, with Sunday being 0).

{{ article.published_at | date: "%w" }}

<!-- 2 -->

###%x:Preferred representation for the date alone, no time. (mm/dd/yy).

{{ article.published_at | date: "%x" }}

<!-- 04/22/14 -->

###%X:Preferred representation for the time. (hh:mm:ss).

{{ article.published_at | date: "%X" }}

<!-- 13:17:24 -->

###%y:Year without a century (00.99).

{{ article.published_at | date: "%y" }}

<!-- 14 -->

###%Y:Year with a century.

{{ article.published_at | date: "%Y" }}

<!-- 2014 -->

###%Z:Time zone name.

{{ article.published_at | date: "%Z" }}

<!-- EDT -->

###date_to_xmlschema

{{ site.time | date_to_xmlschema }}

2008-11-17T13:07:54-08:00

###date_to_string

{{ site.time | date_to_string }}

17 Nov 2008

###date_to_long_string

{{ site.time | date_to_long_string }}

17 November 2008

#其他过滤器

###default

Dear {{ customer.name | default: "customer" }}

<!-- if customer.name is nil -->
Dear customer

###default_errors

{% if form.errors %}
      {{ form.errors | default_errors }}
{% endif %}

<!-- if form.errors returned "email" -->
Please enter a valid email address.

###default_pagination

{{ paginate | default_pagination }}

<span class="page current">1</span>
<span class="page"><a href="/collections/all?page=2" title="">2</a></span>
<span class="page"><a href="/collections/all?page=3" title="">3</a></span>
<span class="deco">&hellip;</span>
<span class="page"><a href="/collections/all?page=17" title="">17</a></span>
<span class="next"><a href="/collections/all?page=2" title="">Next &raquo;</a></span>

###highlight

{{ item.content | highlight: search.terms }}

<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!

###highlight_active_tag

<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
{% for tag in collection.tags %}
    {{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}

<a title="Show products matching tag Cotton" href="/collections/all/cotton"><span class="active">Cotton</span></a>
<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck</a>
<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey</a>

###json

var content = {{ pages.page-handle.content | json }};

var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your customers will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software,  \u003Cbr /\u003E\nYour Shopify Team.\u003C/p\u003E";

###weight_with_unit

{{ product.variants.first.weight | weight_with_unit }}

24.0 kg

GithubPages+Jekyll模板中各类型对象的方法介绍 ∞