Test Drive Twig with Sculpin

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