Uued Liquid’i võimalused Voos

Tanel Jakobsoo

1.12.2017 Tartus

Muudatused Voo templiitimis-�süsteemis

2017

• Muutujate tugi Voo spetsiifilistes tag'ides (elementscontext, blogcontext, content, contentblock, xcontent)
• Uued filtrid: json_parse, push, pop, shift ja unshift.
• Lisandunud on uued tagid: sd_breadcrumbs.
• Olulisemad muudatused tagides: addbutton, content, contentblock.
• Olilisemad objektide täiendused: site, menuitem, page.
• Muud Liquidi puudutavad täiendused.

Muutujate tugi Voo spetsiifilistes tag'ides (1)

Lisandus võimalus anda Voo poolt lisatud Liquid'i tagidele parameetrina ette ka Liquidi muutujaid (lähemalt). Muutujate tugi lisandus järgnevatele tagidele:

• elementscontext
• blogcontext
• content
• contentblock
• xcontent

Muutujate tugi.

Näide 1: Esiletõstetud blogi

{% assign featured_blog_path = '' %}

​

{% for blog in site.blogs %}

{% if blog.data.featured %}

{% assign featured_blog_path = blog.path %}

{% break %}

{% endif }

{% endfor %}

​

{% blogcontext featured_blog_path %}

{% for featured_article in articles %}

...

{% endfor %}

{% endblogcontext %}

​

Muutujate tugi.

Näide 2:

Kategooria leht.

Saidi näidisstruktuur:

Products (common page)� Category 1 (category page)� Subcategory 1 (elements page)� Product 1 (element)� Subcategory 2 (elements page)� Product 2 (element)

Soovime Category lehtedel näidata välja kõigi tema alalehtede elemente. Selleks saame “category page” malli lisada rea:

{% elementscontext q.element_definition.title="Products" q.page.path.$starts=page.path %}�…�{% endelementscontext %}

Uued filtrid:

json_parse

json_parse filter võimaldab JSON formaadis testi teisendada Liquid’id objektiks. Tekst võib tulla nii mallist, kui näiteks elemendi väljalt. Vaikimisi muutmise vaates vigase JSON objekti parsimine viga ei anna.

Näide 1:

{% assign json_result = '{"foo":{"bar":[1,2,3]}}' | json_parse %}�{{ json_result.foo.bar.last }}�#=> 3

Näide 2:

Vigane kood annab muutmise vaates Liquid vea.

{% assign broken_json_result = '"foo":{"bar":[1,2,3' | json_parse: editmode %}

Uued array filtrid:

push

push filter lisab ette antud arrayle lõppu uue elemendi ning tagastab uue array.

Näide:

{% assign fruits = "1,2" | split: "," %}�{{ fruits | push: "3" | join: "," }}�#=> 1,2,3

Uued array filtrid:

pop

pop filter eemaldab ette antud array lõpust viimase(d) elemendi(d) ning tagastab uue array.

Näide 1:

{% assign fruits = "1,2,3,4" | split: "," %}�{{ fruits | pop | join: "," }}�#=> 1,2,3

Näide 2:

{% assign fruits = "1,2,3,4" | split: "," %}�{{ fruits | pop: 2 | join: "," }}�#=> 1,2

​

Uued array filtrid:

shift

shift filter eemaldab ette antud array algusest esimese(d) elemendi(d) ning tagastab uue array.

Näide 1:

{% assign fruits = "1,2,3,4" | split: "," %}�{{ fruits | shift | join: "," }}�#=> 2,3,4

Näide 2:

{% assign fruits = "1,2,3,4" | split: "," %}�{{ fruits | shift: 2 | join: "," }}�#=> 3,4

​

Uued array filtrid:

unshift

unshift filter lisab ette antud array algusesse elemendi ning tagastab uue array.

Näide:

{% assign fruits = "1,2,3,4" | split: "," %}�{{ fruits | unshift: "5" | join: "," }}�#=> 5,1,2,3,4

Uued tagid:

sd_breadcrumbs

Lisandunud on uus otsingumootoritega seotud tag sd_breadcrumbs. Tagi abil saab lehe koodi renderdada breadcrumbs’i struktureeritud andmete kujul, JSON-LD formaadis.

Näide:

{% sd_breadcrumbs %}�<script type="application/ld+json">�{"@context": "http://schema.org", "@type": "BreadcrumbList",� "itemListElement": [� {"@type": "ListItem", "position": 1,� "item": {"@id": "http://helloworld.voog.co/en", "name": "Home"}� },� {"@type": "ListItem", "position": 2,� "item": {"@id": "http://helloworld.voog.co/blog", "name": "Blog"}� }� ]}</script>

Uued tagid:

sd_breadcrumbs

​

Näide

Näide:

​

​

​

{% sd_breadcrumbs %}�<script type="application/ld+json">�{"@context": "http://schema.org", "@type": "BreadcrumbList",� "itemListElement": [� {"@type": "ListItem", "position": 1,� "item": {"@id": "http://helloworld.voog.co/en", "name": "Home"}� },� {"@type": "ListItem", "position": 2,� "item": {"@id": "http://helloworld.voog.co/blog", "name": "Blog"}� }� ]}</script>

Uuenenud tagid:

addbutton

addbutton tag on Voos kasutusel uue artikli ja elemendi loomise nupu genereerimisel. Tagi saab kasutada blogi ja elemendi listingu tüüpi lehtedel.

Muudatused:

• Nupp avab artikli/elemendi lisamise dialoogi sarnaselt uue lehe lisamisele.
• title atribuut - võimalus süsteemi poolt antud nupu nime üle kirjutada.

Näide:

{% addbutton title="Add listing"�element_type="Job board"�style="background: red !important;" class="my-custom-btn" %}

Uuenenud tagid:

content/contentblock

– “bind” atribuut

content/contentblock tagidega saab lisada lehele/artiklile/elemendile/saidile sisuala. bind atribuuti kasutatakse sisuala sidumiseks muu objektiga peale page objekti.

• bind atribuut võtab lisaks vastu ka objekte:
• article
• element
• language
• page

Nüüd on võimalik (paremini) juba mallis renderdada artikli/elemendi külge seotud sisualasid. Nii nimekirja vaadetes, kui elementcontext’is blogcontext’is.

Uuenenud tagid:

content/contentblock

– “bind” atribuut.

​

Näide 1

Näide 1:

Sisuala renderdamine nimekrija vaates. Kus articles asemel võib olla ka näiteks blog.articles, site.latest_3_articles vms.

{% for item in articles %}� <h2 class="post-title">� <a href="{{ iten.url }}">{{ iten.title }}</a>� </h2>� <div class="post-excerpt content-formatted">� {{ iten.excerpt }}� </div>� <div class="gallery">� {% content name="blogarticle_gallery"� bind=item %}� </div>�{% endfor %}

Uuenenud tagid:

content/contentblock

– “bind” atribuut.

​

Näide 2

Näide 2:

Ühe keele alla (xcontent) lisatud bänneri sisuala renderdamine kõigis keeltes.

{% for lang in site.languages %}� {% if lang.code == "en" %}� {% content name="banner" bind=lang %}� {% endif %}�{% endfor %}

Uuenenud tagid:

content/contentblock

– “bind” atribuut.

​

Näide 3

Näide 3:

Sisuala renderdamine menüüobjektide põhjal (menuitem).

{% for item in site.menuitems %}� {% unless editmode %}� {% if item.page_id and item.page.link? == false %}� <div class="menucontet">� {% content name="menucontent"� bind=item.page %}� </div>� {% endif %}� {% endunless %}�{% endfor %}

Uuenenud tagid:

content/contentblock

– “readonly” atribuut

content/contentblock tagidele lisandus readonly attribut.

Kasutus:

• Võimalus ohutult renderdada sama nimega sisuala muutmise vaates mitmes kohas, ilma konfliktideta salvestamisel.
• Võimalus teha ainult üle API uuendatavaid sisualasid.

Uuenenud tagid:

content/contentblock

– “readonly” atribuut.

​

Näide 1

Näide 1

Banner ala, mis muutmise vaates peaks hallatavuse parandamiseks teisiti käituma.

<div class="banner-area">� {% content name="banner-area"� readonly=editmode %}�</div>�{% if editmode %}� <div class="banner-area-edit-mode">� {% content name="banner-area" %}� </div>�{% endif %}

Uuenenud tagid:

content/contentblock

– “readonly” atribuut.

​

Näide 2

Näide 2:

Sisuala renderdamine menüüobjektide põhjal (menuitem) nii, et nad poleks muudetavad.

{% for item in site.menuitems %}� {% unless editmode %}� {% if item.page_id and item.page.link? == false %}� <div class="menucontet">� {% content name="menucontent"� bind=item.page readonly=true %}� </div>� {% endif %}� {% endunless %}�{% endfor %}

Täienenud objektid:

site objekt

site objektile lisandunud uued atribuudi:

• untranslated_menuitems ja untranslated_menuitems_with_data – tagastab kõik esimese menüütaseme tõlkimata objektid.

Täienenud objektid:

menuitem objekt

menuitem objektile lisandunud uued atribuudi:

• page – menüü objektilt on nüüd võimalik otse küsida temaga seotud lehe objekti.
• untranslated_children ja untranslated_children_with_data – tagastab kõik tõlkimata järgmise taseme objektid.
• layout_title – tagastab menüü lehega seotud malli nime.

Täienenud objektid:

page objekt

page objektile lisandunud uus atribuut:

• layout_title – tagastab menüü lehega seotud malli nime.

Muud Liquid’i täiendused

• Voos on kasutusel Liquidi värskeim versioon.
• Ühtlustunud on objektide json filtrite väljund.
• Paranenud on reorder ja grouped tagide töö.

Muud Liquid’i täiendused:

Liquidi baassüsteem

Liquidi baasüsteemi uuendused on muuhulgas kaasa toonud:

• Range tüüpide toe Shopify/liquid#761. Mis võimaldab:

{{ assign y = 5 }}�{{ assign nums = (1..5) }}�#=> [1, 2, 3, 4, 5]

• Tühikute eemaldamine väljundist Shopify/liquid#773. Näide:

{%- for item in site.menuitems -%}� {{- item | json -}}�{%- endfor -%}

Viiteid

• Voo arendajate leht:�developers.voog.com
• Voo Liquid markup dokumentatsioon:�www.voog.com/developers/markup
• Voo muudatuste logi:�github.com/Voog/voog/blob/master/�CHANGELOG.md
• Liquidi dokumentatsioon:�shopify.github.io/liquid