Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Test Drive Twig with Sculpin
Search
Oliver Davies
July 25, 2015
Programming
1
600
Test Drive Twig with Sculpin
Oliver Davies
July 25, 2015
Tweet
Share
More Decks by Oliver Davies
See All by Oliver Davies
Building Static Websites with Sculpin
opdavies
0
1.3k
Taking Flight with Tailwind CSS
opdavies
0
4.5k
TDD - Test Driven Drupal
opdavies
0
3.2k
Building "Build Configs"
opdavies
0
300
Communities and contribution
opdavies
0
100
Working without Workspace
opdavies
0
170
Things you should know about PHP
opdavies
1
670
An Introduction to Mob Programming
opdavies
0
200
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
opdavies
0
5.9k
Other Decks in Programming
See All in Programming
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
CSC307 Lecture 10
javiergs
PRO
0
310
CSC307 Lecture 07
javiergs
PRO
0
220
Activities at Cairo Library
cairolibrary720
0
1.2k
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
生成AIをkintoneに連携してみた
hideg
0
230
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
英語
s_shimotori
1
220
Temporalを取り巻く仕様を整理する
sajikix
0
110
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The Invisible Side of Design
smashingmag
294
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Producing Creativity
orderedlist
PRO
340
39k
Statistics for Hackers
jakevdp
792
220k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Transcript
Test Drive Twig with Sculpin AKA Get Ready for Theming
in Drupal 8
• 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
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
Oliver Davies (opdavies) • Sculpin hobbyist • Twig enthusiast •
Former Jekyll user whoami
Sculpin
• 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?
Why use a static site generator at all? • Reduces
duplication / D.R.Y. • Better performance compared to dynamic sites • Faster to develop (maybe?) Why?
Drupal 8’s little brother • Both use YAML and Twig
• Both have content types • Both have taxonomies • Both have “fieldable entities” Similarities
Getting Started Installation and Configuration
$ curl -O https://download.sculpin.io/sculpin.phar $ chmod +x sculpin.phar $ mv
sculpin.phar /usr/local/bin/sculpin https://sculpin.io/download/ Install
Alternatives • Download via Composer • Clone from GitHub •
Use Sculpin Blog Skeleton or Sculpin Minimal • Use the Ansible role Install
Basic Site Structure app/ config/ sculpin_kernel.yml sculpin_site.yml source/ _layouts/ default.html
index.md
Configure app/config/sculpin_site.yml title: Oliver Davies source/_layouts/default.html {{ site.title }}
Configure app/config/sculpin_site_prod.yml imports: - sculpin_site.yml url: http://www.oliverdavies.uk google_analytics_tracking_code: UA-XXXXXX-1
Configure source/_layouts/default.html {% if site.google_analytics_tracking_code %} ... {% endif %}
app/config/sculpin_kernel.yml sculpin_content_types: posts: permalink: blog/:slug_title/ talks: Content Types
app/config/sculpin_kernel.yml sculpin_content_types: posts: permalink: blog/:slug_title/ taxonomies: [ tags, categories ]
talks: Taxonomies
source/_posts/2015-07-24-drupalcamp-north.md --- title: DrupalCamp North tags: - drupalcamp - drupalcamp-north
Taxonomies
source/_layouts/post.html --- use: [ ‘tags’ ] --- {% for tag
in page.tags %} {{ tag }} {% endfor %} Taxonomies
app/config/sculpin_kernel.yml sculpin_theme: theme: opdavies/oliverdavies15 Themes (Experimental)
Adding custom functionality. They are a thing. Bundles
$ sculpin generate $ sculpin generate --server $ sculpin generate
--server --watch $ sculpin generate --env=prod Build
Adding Content
Simplest Source File source/index.md --- --- # Hello World
Simplest Source File output_dev/ index.html
--- layout: default title: About --- # Hello World YAML
Front Matter
--- layout: default title: About foo: bar --- # Hello
World YAML Front Matter
Twig
source/_layouts/default.html <body class=”{% block body_classes ‘’ %}”> {% block content
%}{% endblock %} </body> Layouts
source/about.html --- {% block body_classes ‘page--about’ %} {% block content
%} <p>Content</p> {% endblock %} Blocks
source/about.md --- {% block body_classes ‘page--about’ %} {% block content
%} Content {% endblock %} Blocks
source/_layouts/post.html {% extends ‘default’ %} {% block content %}{% endblock
%} Template Inheritance
source/_partials/talk-listing-item.html <li> {% if talk.link -%}<a href="{{ talk.link }}">{%- endif
-%} {{ talk.title }} {% if talk.link %}</a>{% endif %} </li> Partials
source/talks.html <ul> {% for talk in page.talks %} {% include(‘talk-listing-item’)
%} {% endfor %} </ul> Partials
source/_partials/head.html {% if page.meta.og %} {% include "og" with {
og: page.meta.og } %} {% endif %} Partials
Twig Tips & Tricks
Filters {{ foo|upper }} {{ bar|lower }} {{ page.excerpt|replace( {
‘h2’: ‘h3’ } ) }} Tips & Tricks
Rendering objects and arrays {{ site.drupalorg.url }} Tips & Tricks
Loops {% for meetup in site.meetups %} {% if loop.first
%} ... {% endif %} {% endfor %} Tips & Tricks
Conditional logic {% if site.foo == ‘bar’ %} ... {%
else %} ... {% endif %} Tips & Tricks
Conditional logic {% set date = ‘now’|date(‘Y’) %} {% for
talk in page.talks if talk.date >= now %} ... {% endfor %} Tips & Tricks
Shorthand blocks {% block body_classes %}page--blog page--blog__list {% endblock %}
{% block body_classes ‘page--blog page--blog__list’ %} Tips & Tricks
Block appending {% block sidebar %} {{ parent() }} {%
endblock %} Tips & Tricks
Whitespace {% if site.foo == ‘bar’ -%} ... {%- endif
%} Tips & Tricks
Spaceless {% spaceless %} ... {% endspaceless %} Tips &
Tricks
Raw output {% raw %} {% if site.foo == ‘bar’
%} ... {% endif %} {% endraw %} Tips & Tricks
Links Links
Useful Links • http://bit.ly/sculpin-twig-resources
Questions @opdavies