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

Test Drive Twig with Sculpin

Test Drive Twig with Sculpin

Oliver Davies

July 25, 2015
Tweet

More Decks by Oliver Davies

Other Decks in Programming

Transcript

  1. Test Drive Twig with
    Sculpin
    AKA Get Ready for Theming in Drupal 8

    View Slide

  2. ● What is Sculpin, and why should I use it?
    ● How to install Sculpin
    ● How to build a Sculpin site
    ● How to do cool things with Twig
    This Talk

    View Slide

  3. Oliver Davies (opdavies)
    ● Drupaler since 2007
    ● Senior Developer at Microserve
    ● Drupal 7 and 8 core contributor
    ● Contrib project maintainer
    ● User group, sprint, conference organiser
    whoami

    View Slide

  4. Oliver Davies (opdavies)
    ● Sculpin hobbyist
    ● Twig enthusiast
    ● Former Jekyll user
    whoami

    View Slide

  5. Sculpin

    View Slide

  6. ● Static site generator
    ● Open source
    ● Written in PHP, based on Symfony components
    ● CLI tool, based on Symfony Console
    ● Markdown/HTML/Twig > HTML
    ● Awesome for small sites, HTML prototypes and learning Twig.
    What is Sculpin?

    View Slide

  7. Why use a static site generator at all?
    ● Reduces duplication / D.R.Y.
    ● Better performance compared to dynamic sites
    ● Faster to develop (maybe?)
    Why?

    View Slide

  8. Drupal 8’s little brother
    ● Both use YAML and Twig
    ● Both have content types
    ● Both have taxonomies
    ● Both have “fieldable entities”
    Similarities

    View Slide

  9. Getting Started
    Installation and Configuration

    View Slide

  10. $ curl -O https://download.sculpin.io/sculpin.phar
    $ chmod +x sculpin.phar
    $ mv sculpin.phar /usr/local/bin/sculpin
    https://sculpin.io/download/
    Install

    View Slide

  11. Alternatives
    ● Download via Composer
    ● Clone from GitHub
    ● Use Sculpin Blog Skeleton or Sculpin Minimal
    ● Use the Ansible role
    Install

    View Slide

  12. Basic Site Structure
    app/
    config/
    sculpin_kernel.yml
    sculpin_site.yml
    source/
    _layouts/
    default.html
    index.md

    View Slide

  13. Configure
    app/config/sculpin_site.yml
    title: Oliver Davies
    source/_layouts/default.html
    {{ site.title }}

    View Slide

  14. Configure
    app/config/sculpin_site_prod.yml
    imports:
    - sculpin_site.yml
    url: http://www.oliverdavies.uk
    google_analytics_tracking_code: UA-XXXXXX-1

    View Slide

  15. Configure
    source/_layouts/default.html
    {% if site.google_analytics_tracking_code %}
    ...
    {% endif %}

    View Slide

  16. app/config/sculpin_kernel.yml
    sculpin_content_types:
    posts:
    permalink: blog/:slug_title/
    talks:
    Content Types

    View Slide

  17. app/config/sculpin_kernel.yml
    sculpin_content_types:
    posts:
    permalink: blog/:slug_title/
    taxonomies: [ tags, categories ]
    talks:
    Taxonomies

    View Slide

  18. source/_posts/2015-07-24-drupalcamp-north.md
    ---
    title: DrupalCamp North
    tags:
    - drupalcamp
    - drupalcamp-north
    Taxonomies

    View Slide

  19. source/_layouts/post.html
    ---
    use: [ ‘tags’ ]
    ---
    {% for tag in page.tags %}
    {{ tag }}
    {% endfor %}
    Taxonomies

    View Slide

  20. app/config/sculpin_kernel.yml
    sculpin_theme:
    theme: opdavies/oliverdavies15
    Themes (Experimental)

    View Slide

  21. Adding custom functionality.
    They are a thing.
    Bundles

    View Slide

  22. $ sculpin generate
    $ sculpin generate --server
    $ sculpin generate --server --watch
    $ sculpin generate --env=prod
    Build

    View Slide

  23. Adding Content

    View Slide

  24. Simplest Source File
    source/index.md
    ---
    ---
    # Hello World

    View Slide

  25. Simplest Source File
    output_dev/
    index.html

    View Slide

  26. ---
    layout: default
    title: About
    ---
    # Hello World
    YAML Front Matter

    View Slide

  27. ---
    layout: default
    title: About
    foo: bar
    ---
    # Hello World
    YAML Front Matter

    View Slide

  28. Twig

    View Slide

  29. source/_layouts/default.html

    {% block content %}{% endblock %}

    Layouts

    View Slide

  30. source/about.html
    ---
    {% block body_classes ‘page--about’ %}
    {% block content %}
    Content
    {% endblock %}
    Blocks

    View Slide

  31. source/about.md
    ---
    {% block body_classes ‘page--about’ %}
    {% block content %}
    Content
    {% endblock %}
    Blocks

    View Slide

  32. source/_layouts/post.html
    {% extends ‘default’ %}
    {% block content %}{% endblock %}
    Template Inheritance

    View Slide

  33. source/_partials/talk-listing-item.html

    {% if talk.link -%}{%-
    endif -%}
    {{ talk.title }}
    {% if talk.link %}{% endif %}

    Partials

    View Slide

  34. source/talks.html

    {% for talk in page.talks %}
    {% include(‘talk-listing-item’) %}
    {% endfor %}

    Partials

    View Slide

  35. source/_partials/head.html
    {% if page.meta.og %}
    {% include "og" with { og: page.meta.og } %}
    {% endif %}
    Partials

    View Slide

  36. Twig
    Tips & Tricks

    View Slide

  37. Filters
    {{ foo|upper }}
    {{ bar|lower }}
    {{ page.excerpt|replace( { ‘h2’: ‘h3’ } ) }}
    Tips & Tricks

    View Slide

  38. Rendering objects and arrays
    {{ site.drupalorg.url }}
    Tips & Tricks

    View Slide

  39. Loops
    {% for meetup in site.meetups %}
    {% if loop.first %}
    ...
    {% endif %}
    {% endfor %}
    Tips & Tricks

    View Slide

  40. Conditional logic
    {% if site.foo == ‘bar’ %}
    ...
    {% else %}
    ...
    {% endif %}
    Tips & Tricks

    View Slide

  41. Conditional logic
    {% set date = ‘now’|date(‘Y’) %}
    {% for talk in page.talks if talk.date >= now %}
    ...
    {% endfor %}
    Tips & Tricks

    View Slide

  42. Shorthand blocks
    {% block body_classes %}page--blog page--blog__list
    {% endblock %}
    {% block body_classes ‘page--blog page--blog__list’
    %}
    Tips & Tricks

    View Slide

  43. Block appending
    {% block sidebar %}
    {{ parent() }}
    {% endblock %}
    Tips & Tricks

    View Slide

  44. Whitespace
    {% if site.foo == ‘bar’ -%}
    ...
    {%- endif %}
    Tips & Tricks

    View Slide

  45. Spaceless
    {% spaceless %}
    ...
    {% endspaceless %}
    Tips & Tricks

    View Slide

  46. Raw output
    {% raw %}
    {% if site.foo == ‘bar’ %} ... {% endif %}
    {% endraw %}
    Tips & Tricks

    View Slide

  47. Links
    Links

    View Slide

  48. Useful Links
    ● http://bit.ly/sculpin-twig-resources

    View Slide

  49. Questions
    @opdavies

    View Slide