Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jekyll the static site generator Liquid For Des...

bruno2ms
August 20, 2015

Jekyll the static site generator Liquid For Designers

Jekyll the static site generator Liquid For Designers

bruno2ms

August 20, 2015
Tweet

More Decks by bruno2ms

Other Decks in Technology

Transcript

  1. 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)
  2. Output Markup {{ 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 • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
  3. Filtros Concatenados {{ 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 {{ 5 | times:4 | plus:5 | divided_by:2 }} -> 12 {{ "a~b" | split:"~" }} -> ab • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
  4. Como funciona? • Converte Markdown, Textile e HTML com Liquid

    Tags • Aplica templates e Layout Pages • Converte arquivos sass • Se aproveita da estrutura de pastas para gerar blog e posts • Transforma isso tudo em HTML estático
  5. O que já vem pronto? • Paginação • Estrutura personalizada

    de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Textile
  6. Configuração YAML • Configuração de variáveis globais • Variáveis reutilizáveis

    de acordo com estrutura dos arquivos • Adicione as chaves que desejar para reaproveitar em todo o site
  7. YAML Front Matter --- layout: post title: Blogging Like a

    Hacker permalink: /path/to/my/page/ published: true categories: [categoria1, categoria2] --- <!DOCTYPE HTML> <html> <head> <title>{{ site.name }} - {{ page.title }}</title> </head> <body> ...
  8. Deploy? • Instancia grátis do Heroku • GitHub Pages •

    Direto para a Amazon S3 • Qualquer lugar que aceite páginas estáticas • http://jekyllrb.com/docs/deployment- methods/
  9. Disqus ... layout: default comments: true # other options ...

    {% if page.comments %} {% include disqus.html %} {% endif %} <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = ‘your_user'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/ javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> sua_pagina.html _includes/disqus.html
  10. Data Files - name: Tom Preston-Werner github: mojombo - name:

    Parker Moore github: parkr - name: Liu Fengyun github: liufengyun <ul> {% for member in site.data.members %} <li> <a href="https://github.com/{{ member.github }}"> {{ member.name }} </a> </li> {% endfor %} </ul> index.yml _data/members.yml
  11. Data Files name: Bluesoft members: - name: Tom Preston-Werner github:

    mojombo - name: Parker Moore github: parkr _data/orgs/bluesoft.yml _data/orgs/webgoal.yml name: Webgoal members: - name: Tom Preston-Werner github: mojombo - name: Parker Moore github: parkr <ul> {% for org_hash in site.data.orgs %} {% assign org = org_hash[1] %} <li> <a href="https://github.com/{{ org.username }}"> {{ org.name }} </a> ({{ org.members | size }} members) </li> {% endfor %} </ul>