SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
Static Site Generator
@bruno2ms
Liquid for Noobs
Liquid is an open-source, Ruby-based template language created by Shopify. It is the
backbone of Shopify themes and is used to load dynamic content on storefronts.
Syntax
{{ matched pairs of curly brackets (ie, braces) }}
{% matched pairs of curly brackets and percent signs %}
Output markup (que pode retornar texto)
Tag markup (não pode retornar texto)
Output Markup
• Aceita que você trabalhe os conteúdos com
filtros
• Trata o conteúdo e retorna um texto
{{ output markup }}
Hello {{ user.name }} -> Hello Bruno
Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO
Letters: {{ 'bruno' | size }} -> Letters 5
Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar
{{ "a~b" | split:"~" }} -> ab
Filtros Concatenados
{{ 5 | times:4 | plus:5 | divided_by:2 }} -> 12
{{ "a~b" | split:"~" | captilize }} -> AB
• Aceita que você concatene filtros para
processar o texto
Filtros Nativos
• capitalize - capitalize words in the input sentence
• downcase - convert an input string to lowercase
• upcase - convert an input string to uppercase
• first - get the first element of the passed in array
• last - get the last element of the passed in array
• join - join elements of the array with certain character between them
• sort - sort elements of the array
• map - map/collect an array on a given property
• size - return the size of an array or string
• escape - escape a string
• escape_once - returns an escaped version of html without affecting existing
escaped entities
• strip_html - strip html from string
• strip_newlines - strip all newlines (n) from string
• newline_to_br - replace each newline (n) with html break
• replace - replace each occurrence e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'
• replace_first - replace the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }}
#=> 'foobar'
Filtros Nativos
• remove - remove each occurrence e.g. {{ 'foobarfoobar' | remove:'foo' }} #=>
'barbar'
• remove_first - remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }}
#=> 'bar'
• truncate - truncate a string down to x characters. It also accepts a second
parameter that will append to the string e.g. {{ 'foobarfoobar' | truncate: 5, '.' }}
#=> 'foob.'
• truncatewords - truncate a string down to x words
• prepend - prepend a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar'
• append - append a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar'
• slice - slice a string. Takes an offset and length, e.g. {{ "hello" | slice: -3, 3 }} #=> llo
• minus - subtraction e.g. {{ 4 | minus:2 }} #=> 2
• plus - addition e.g. {{ '1' | plus:'1' }} #=> '11', {{ 1 | plus:1 }} #=> 2
• times - multiplication e.g {{ 5 | times:4 }} #=> 20
• divided_by - integer division e.g. {{ 10 | divided_by:3 }} #=> 3
• split - split a string on a matching pattern e.g. {{ "a~b" | split:"~" }} #=> ['a','b']
• modulo - remainder, e.g. {{ 3 | modulo:2 }} #=> 1
Tags Nativas
• assign - Assigns some value to a variable
• capture - Block tag that captures text into a variable
• case - Block tag, its the standard case...when block
• comment - Block tag, comments out the text in the block
• cycle - Cycle is usually used within a loop to alternate between values, like colors or
DOM classes.
• for - For loop
• if - Standard if/else block
• include - Includes another template; useful for partials
• raw - temporarily disable tag processing to avoid syntax conflicts.
• unless - Mirror of if statement
If / Else
{% if user %}
Hello {{ user.name }}
{% endif %}
{% if user != null %}
Hello {{ user.name }}
{% endif %}
{% if user.name == 'tobi' %}
Hello tobi
{% elsif user.name == 'bob' %}
Hello bob
{% endif %}
{% if user.age > 18 %}
Login here
{% else %}
Sorry, you are too young
{% endif %}
# array = 1,2,3
{% if array contains 2 %}
array includes 2
{% endif %}
`
# string = 'hello world'
{% if string contains 'hello' %}
string includes 'hello'
{% endif %}
Case Statement
{% case condition %}
{% when 1 %}
hit 1
{% when 2 or 3 %}
hit 2 or 3
{% else %}
... else ...
{% endcase %}
{% case template %}
{% when 'label' %}
// {{ label.title }}
{% when 'product' %}
// {{ product.vendor | link_to_vendor }} / {{ product.title }}
{% else %}
// {{page_title}}
{% endcase %}
For Loops
{% for item in array %}
{{ item }}
{% endfor %}
Basico
forloop.length # => length of the entire for loop
forloop.index # => index of the current iteration
forloop.index0 # => index of the current iteration (zero based)
forloop.rindex # => how many items are still left?
forloop.rindex0 # => how many items are still left? (zero based)
forloop.first # => is this the first iteration?
forloop.last # => is this the last iteration?
For Loops
{% for product in collections.frontpage.products %}
{% if forloop.first == true %}
First time through!
{% else %}
Not the first time.
{% endif %}
{% endfor %}
{% for product in collections.frontpage.products %}
{{ forloop.index }}
{% endfor %}
Variáveis
{% assign name = 'freestyle' %}
{% for t in collections.tags %}{% if t == name %}
<p>Freestyle!</p>
{% endif %}{% endfor %}
{% capture attribute_name %}{{ item.title | handleize }}-{{ i }}-color{% endcapture %}
<label for="{{ attribute_name }}">Color:</label>
<select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Exemplos Com Includes
(facilidade de extender)
_plugins/*.rb
http://jekyllrb.com/docs/plugins/
Adicionando includes
template.html
Basico
Includes com Parametros
Includes _data
clientes.yml
Includes _data
Se aproveitando de variáveis
Se aproveitando de variáveis
Static Site Generator
Liquid for Noobs
@bruno2ms
OBRIGADO
@bruno2ms

Weitere ähnliche Inhalte

Was ist angesagt?

String in programming language in c or c++
 String in programming language  in c or c++  String in programming language  in c or c++
String in programming language in c or c++ Samsil Arefin
 
String in c programming
String in c programmingString in c programming
String in c programmingDevan Thakur
 
C programming - String
C programming - StringC programming - String
C programming - StringAchyut Devkota
 
Handling of character strings C programming
Handling of character strings C programmingHandling of character strings C programming
Handling of character strings C programmingAppili Vamsi Krishna
 
Learning sed and awk
Learning sed and awkLearning sed and awk
Learning sed and awkYogesh Sawant
 
Class 5 - PHP Strings
Class 5 - PHP StringsClass 5 - PHP Strings
Class 5 - PHP StringsAhmed Swilam
 
Manipulating strings
Manipulating stringsManipulating strings
Manipulating stringsJancypriya M
 
String in python use of split method
String in python use of split methodString in python use of split method
String in python use of split methodvikram mahendra
 
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...Andrea Telatin
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressionsmussawir20
 

Was ist angesagt? (20)

The string class
The string classThe string class
The string class
 
14 strings
14 strings14 strings
14 strings
 
Strings
StringsStrings
Strings
 
Strings in c++
Strings in c++Strings in c++
Strings in c++
 
Strings
StringsStrings
Strings
 
String in programming language in c or c++
 String in programming language  in c or c++  String in programming language  in c or c++
String in programming language in c or c++
 
strings
stringsstrings
strings
 
String in c
String in cString in c
String in c
 
String in c programming
String in c programmingString in c programming
String in c programming
 
C programming - String
C programming - StringC programming - String
C programming - String
 
Handling of character strings C programming
Handling of character strings C programmingHandling of character strings C programming
Handling of character strings C programming
 
Learning sed and awk
Learning sed and awkLearning sed and awk
Learning sed and awk
 
Strings in C
Strings in CStrings in C
Strings in C
 
Class 5 - PHP Strings
Class 5 - PHP StringsClass 5 - PHP Strings
Class 5 - PHP Strings
 
C++ string
C++ stringC++ string
C++ string
 
Manipulating strings
Manipulating stringsManipulating strings
Manipulating strings
 
String in python use of split method
String in python use of split methodString in python use of split method
String in python use of split method
 
Strings in C
Strings in CStrings in C
Strings in C
 
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...
Bioinformatica: Esercizi su Perl, espressioni regolari e altre amenità (BMR G...
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressions
 

Andere mochten auch

Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprintBruno Mendes
 
Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutosBruno Mendes
 
Montes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas GeraisMontes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas GeraisBruno Mendes
 
Tá esperando o que?
Tá esperando o que?Tá esperando o que?
Tá esperando o que?Felipe Faias
 
Tá fazendo o que aqui?
Tá fazendo o que aqui?Tá fazendo o que aqui?
Tá fazendo o que aqui?Felipe Faias
 
Como falhar como líder
Como falhar como líderComo falhar como líder
Como falhar como líderBruno Mendes
 
Muito prazer, nós somos a família PEDREIRA!
Muito prazer, nós somos a família PEDREIRA!Muito prazer, nós somos a família PEDREIRA!
Muito prazer, nós somos a família PEDREIRA!Felipe Faias
 
Eu escolho ser feliz!
Eu escolho ser feliz!Eu escolho ser feliz!
Eu escolho ser feliz!Felipe Faias
 
Pomodoro technique
Pomodoro techniquePomodoro technique
Pomodoro techniqueBruno Mendes
 
Agilidade: como começar?
Agilidade: como começar?Agilidade: como começar?
Agilidade: como começar?Alex Chastinet
 
A arte de ser feliz
A arte de ser felizA arte de ser feliz
A arte de ser felizHelio Cruz
 
Fisica da agilidade
Fisica da agilidadeFisica da agilidade
Fisica da agilidadeBruno Mendes
 
Ser Feliz é Uma Decisão
Ser Feliz é Uma DecisãoSer Feliz é Uma Decisão
Ser Feliz é Uma DecisãoPower Point
 
Liderança com Inteligência Emocional
Liderança com Inteligência EmocionalLiderança com Inteligência Emocional
Liderança com Inteligência EmocionalLeonardo Filardi
 

Andere mochten auch (20)

Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
Lean ux
Lean uxLean ux
Lean ux
 
No silencio da minha mente
No silencio da minha menteNo silencio da minha mente
No silencio da minha mente
 
Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutos
 
Montes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas GeraisMontes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas Gerais
 
Tá esperando o que?
Tá esperando o que?Tá esperando o que?
Tá esperando o que?
 
Tá fazendo o que aqui?
Tá fazendo o que aqui?Tá fazendo o que aqui?
Tá fazendo o que aqui?
 
OOCSS
OOCSSOOCSS
OOCSS
 
Anything You Want
Anything You WantAnything You Want
Anything You Want
 
Como falhar como líder
Como falhar como líderComo falhar como líder
Como falhar como líder
 
Muito prazer, nós somos a família PEDREIRA!
Muito prazer, nós somos a família PEDREIRA!Muito prazer, nós somos a família PEDREIRA!
Muito prazer, nós somos a família PEDREIRA!
 
Eu escolho ser feliz!
Eu escolho ser feliz!Eu escolho ser feliz!
Eu escolho ser feliz!
 
Pomodoro technique
Pomodoro techniquePomodoro technique
Pomodoro technique
 
Jekyll
JekyllJekyll
Jekyll
 
Agilidade: como começar?
Agilidade: como começar?Agilidade: como começar?
Agilidade: como começar?
 
A arte de ser feliz
A arte de ser felizA arte de ser feliz
A arte de ser feliz
 
Fisica da agilidade
Fisica da agilidadeFisica da agilidade
Fisica da agilidade
 
Vida saudável
Vida saudávelVida saudável
Vida saudável
 
Ser Feliz é Uma Decisão
Ser Feliz é Uma DecisãoSer Feliz é Uma Decisão
Ser Feliz é Uma Decisão
 
Liderança com Inteligência Emocional
Liderança com Inteligência EmocionalLiderança com Inteligência Emocional
Liderança com Inteligência Emocional
 

Ähnlich wie Jekyll - Liquid for noobs

Functional Smalltalk
Functional SmalltalkFunctional Smalltalk
Functional SmalltalkESUG
 
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013Puppet
 
shellScriptAlt.pptx
shellScriptAlt.pptxshellScriptAlt.pptx
shellScriptAlt.pptxNiladriDey18
 
Refactor like a boss
Refactor like a bossRefactor like a boss
Refactor like a bossgsterndale
 
Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of TwigBrandon Kelly
 
Ruby_Coding_Convention
Ruby_Coding_ConventionRuby_Coding_Convention
Ruby_Coding_ConventionJesse Cai
 
Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9sagaroceanic11
 
Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9sagaroceanic11
 
Asp.Net MVC - Razor Syntax
Asp.Net MVC - Razor SyntaxAsp.Net MVC - Razor Syntax
Asp.Net MVC - Razor SyntaxRenier Serven
 
Xslate sv perl-2013-7-11
Xslate sv perl-2013-7-11Xslate sv perl-2013-7-11
Xslate sv perl-2013-7-11Goro Fuji
 
Introduction to Modern Perl
Introduction to Modern PerlIntroduction to Modern Perl
Introduction to Modern PerlDave Cross
 
Code for Startup MVP (Ruby on Rails) Session 2
Code for Startup MVP (Ruby on Rails) Session 2Code for Startup MVP (Ruby on Rails) Session 2
Code for Startup MVP (Ruby on Rails) Session 2Henry S
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland
 
C cheat sheet for varsity (extreme edition)
C cheat sheet for varsity (extreme edition)C cheat sheet for varsity (extreme edition)
C cheat sheet for varsity (extreme edition)Saifur Rahman
 
Understanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxUnderstanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxRuss Weakley
 

Ähnlich wie Jekyll - Liquid for noobs (20)

Designing Ruby APIs
Designing Ruby APIsDesigning Ruby APIs
Designing Ruby APIs
 
Functional Smalltalk
Functional SmalltalkFunctional Smalltalk
Functional Smalltalk
 
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013
Loops and Unicorns - The Future of the Puppet Language - PuppetConf 2013
 
shellScriptAlt.pptx
shellScriptAlt.pptxshellScriptAlt.pptx
shellScriptAlt.pptx
 
Php
PhpPhp
Php
 
Refactor like a boss
Refactor like a bossRefactor like a boss
Refactor like a boss
 
Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of Twig
 
Ruby_Coding_Convention
Ruby_Coding_ConventionRuby_Coding_Convention
Ruby_Coding_Convention
 
Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9
 
Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9Rubyforjavaprogrammers 1210167973516759-9
Rubyforjavaprogrammers 1210167973516759-9
 
Ruby 2.0
Ruby 2.0Ruby 2.0
Ruby 2.0
 
Love Twig
Love TwigLove Twig
Love Twig
 
Asp.Net MVC - Razor Syntax
Asp.Net MVC - Razor SyntaxAsp.Net MVC - Razor Syntax
Asp.Net MVC - Razor Syntax
 
Xslate sv perl-2013-7-11
Xslate sv perl-2013-7-11Xslate sv perl-2013-7-11
Xslate sv perl-2013-7-11
 
Variables
VariablesVariables
Variables
 
Introduction to Modern Perl
Introduction to Modern PerlIntroduction to Modern Perl
Introduction to Modern Perl
 
Code for Startup MVP (Ruby on Rails) Session 2
Code for Startup MVP (Ruby on Rails) Session 2Code for Startup MVP (Ruby on Rails) Session 2
Code for Startup MVP (Ruby on Rails) Session 2
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
 
C cheat sheet for varsity (extreme edition)
C cheat sheet for varsity (extreme edition)C cheat sheet for varsity (extreme edition)
C cheat sheet for varsity (extreme edition)
 
Understanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxUnderstanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntax
 

Mehr von Bruno Mendes

Building a ux team
Building a ux team Building a ux team
Building a ux team Bruno Mendes
 
Ciência do conforto
Ciência do confortoCiência do conforto
Ciência do confortoBruno Mendes
 
Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?Bruno Mendes
 
Fatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao ClienteFatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao ClienteBruno Mendes
 

Mehr von Bruno Mendes (7)

Will js kill css
Will js kill cssWill js kill css
Will js kill css
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
Building a ux team
Building a ux team Building a ux team
Building a ux team
 
Ciência do conforto
Ciência do confortoCiência do conforto
Ciência do conforto
 
Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?
 
Pense como dono
Pense como donoPense como dono
Pense como dono
 
Fatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao ClienteFatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao Cliente
 

Kürzlich hochgeladen

NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...Amil baba
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxjeswinjees
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiVIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiSuhani Kapoor
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...nagunakhan
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girlsmodelanjalisharma4
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Call Girls in Nagpur High Profile
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130Suhani Kapoor
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...Suhani Kapoor
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 

Kürzlich hochgeladen (20)

NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiVIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 

Jekyll - Liquid for noobs

  • 2.
  • 3. Liquid is an open-source, Ruby-based template language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
  • 4.
  • 5. Syntax {{ matched pairs of curly brackets (ie, braces) }} {% matched pairs of curly brackets and percent signs %} Output markup (que pode retornar texto) Tag markup (não pode retornar texto)
  • 6. Output Markup • Aceita que você trabalhe os conteúdos com filtros • Trata o conteúdo e retorna um texto {{ output markup }} Hello {{ user.name }} -> Hello Bruno Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO Letters: {{ 'bruno' | size }} -> Letters 5 Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar {{ "a~b" | split:"~" }} -> ab
  • 7. Filtros Concatenados {{ 5 | times:4 | plus:5 | divided_by:2 }} -> 12 {{ "a~b" | split:"~" | captilize }} -> AB • Aceita que você concatene filtros para processar o texto
  • 8. Filtros Nativos • capitalize - capitalize words in the input sentence • downcase - convert an input string to lowercase • upcase - convert an input string to uppercase • first - get the first element of the passed in array • last - get the last element of the passed in array • join - join elements of the array with certain character between them • sort - sort elements of the array • map - map/collect an array on a given property • size - return the size of an array or string • escape - escape a string • escape_once - returns an escaped version of html without affecting existing escaped entities • strip_html - strip html from string • strip_newlines - strip all newlines (n) from string • newline_to_br - replace each newline (n) with html break • replace - replace each occurrence e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar' • replace_first - replace the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
  • 9. Filtros Nativos • remove - remove each occurrence e.g. {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar' • remove_first - remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }} #=> 'bar' • truncate - truncate a string down to x characters. It also accepts a second parameter that will append to the string e.g. {{ 'foobarfoobar' | truncate: 5, '.' }} #=> 'foob.' • truncatewords - truncate a string down to x words • prepend - prepend a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar' • append - append a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar' • slice - slice a string. Takes an offset and length, e.g. {{ "hello" | slice: -3, 3 }} #=> llo • minus - subtraction e.g. {{ 4 | minus:2 }} #=> 2 • plus - addition e.g. {{ '1' | plus:'1' }} #=> '11', {{ 1 | plus:1 }} #=> 2 • times - multiplication e.g {{ 5 | times:4 }} #=> 20 • divided_by - integer division e.g. {{ 10 | divided_by:3 }} #=> 3 • split - split a string on a matching pattern e.g. {{ "a~b" | split:"~" }} #=> ['a','b'] • modulo - remainder, e.g. {{ 3 | modulo:2 }} #=> 1
  • 10. Tags Nativas • assign - Assigns some value to a variable • capture - Block tag that captures text into a variable • case - Block tag, its the standard case...when block • comment - Block tag, comments out the text in the block • cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes. • for - For loop • if - Standard if/else block • include - Includes another template; useful for partials • raw - temporarily disable tag processing to avoid syntax conflicts. • unless - Mirror of if statement
  • 11. If / Else {% if user %} Hello {{ user.name }} {% endif %} {% if user != null %} Hello {{ user.name }} {% endif %} {% if user.name == 'tobi' %} Hello tobi {% elsif user.name == 'bob' %} Hello bob {% endif %} {% if user.age > 18 %} Login here {% else %} Sorry, you are too young {% endif %} # array = 1,2,3 {% if array contains 2 %} array includes 2 {% endif %} ` # string = 'hello world' {% if string contains 'hello' %} string includes 'hello' {% endif %}
  • 12. Case Statement {% case condition %} {% when 1 %} hit 1 {% when 2 or 3 %} hit 2 or 3 {% else %} ... else ... {% endcase %} {% case template %} {% when 'label' %} // {{ label.title }} {% when 'product' %} // {{ product.vendor | link_to_vendor }} / {{ product.title }} {% else %} // {{page_title}} {% endcase %}
  • 13. For Loops {% for item in array %} {{ item }} {% endfor %} Basico forloop.length # => length of the entire for loop forloop.index # => index of the current iteration forloop.index0 # => index of the current iteration (zero based) forloop.rindex # => how many items are still left? forloop.rindex0 # => how many items are still left? (zero based) forloop.first # => is this the first iteration? forloop.last # => is this the last iteration?
  • 14. For Loops {% for product in collections.frontpage.products %} {% if forloop.first == true %} First time through! {% else %} Not the first time. {% endif %} {% endfor %} {% for product in collections.frontpage.products %} {{ forloop.index }} {% endfor %}
  • 15. Variáveis {% assign name = 'freestyle' %} {% for t in collections.tags %}{% if t == name %} <p>Freestyle!</p> {% endif %}{% endfor %} {% capture attribute_name %}{{ item.title | handleize }}-{{ i }}-color{% endcapture %} <label for="{{ attribute_name }}">Color:</label> <select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>
  • 16. Exemplos Com Includes (facilidade de extender) _plugins/*.rb http://jekyllrb.com/docs/plugins/
  • 21. Se aproveitando de variáveis
  • 22. Se aproveitando de variáveis
  • 23. Static Site Generator Liquid for Noobs @bruno2ms