Chapter 4. Shakespearean Templates
Yesod uses the Shakespearean family of template languages as its standard approach to HTML, CSS, and JavaScript creation. This language family shares some common syntax, as well as overarching principles:
As little interference to the underlying language as possible, while providing conveniences where unobtrusive
Compile-time guarantees on well-formed content
Static type safety, greatly helping the prevention of XSS (cross-site scripting) attacks
Automated checking of valid URLs, whenever possible, through type-safe URLs
There is nothing inherently tying Yesod to these languages, or the other way around: each can be used independently of the other. This chapter will address these template languages on their own, while the remainder of the book will use them to enhance Yesod application development.
Synopsis
There are four main languages at play: Hamlet is an HTML templating language, Julius is for JavaScript, and Cassius and Lucius are both for CSS. Hamlet and Cassius are both whitespace-sensitive formats, using indentation to denote nesting. By contrast, Lucius is a superset of CSS, keeping CSS’s braces for denoting nesting. Julius is a simple passthrough language for producing JavaScript; the only added feature is variable interpolation.
Hamlet (HTML)
$doctype 5 <html> <head> <title>#{pageTitle} - My Site <link rel=stylesheet href=@{Stylesheet}> <body> <h1 .page-title>#{pageTitle} <p>Here is a list of your friends: $if null friends <p>Sorry, I lied, you ...