Reconsider theme templating
Laura’s thoughts:
For improved flexibility, each page template should contain:
<!DOCTYPE html>
<html lang='en'>
<head>
</head>
<body>
</body>
So we can add and remove elements from both the <head>
and <body>
on a per-template basis. So, then we would need to pull in the default header, footer, and main body templates accordingly, such as:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>This way we can have a custom title, or override with set-stuff</title>
<!-- pull in <head> contents currently in page.html here -->
</head>
<body <!-- maybe pull in necessary set-stuff here -->>
<!-- pull in <nav> contents currently in header.html here -->
<main <!-- maybe pull in necessary set-stuff here -->>
</main>
<!-- pull in <footer> contents currently in page.html here -->
</body>
</html>
Use cases
- We have a Spotlight that requires custom CSS. There’s no way to pull CSS into an individual template as valid HTML (asides from per-element inline CSS), because an individual template does not have access to the
<head>
of the document. The template-specific CSS needs to be pulled in after the global common styles, and the app- or site- specific styles. - We have JavaScript for the modal window for the trackers list currently included on every page, when it is only needed on the site template.
- We have HTML overrides in the
Blockdown.coffee
script (seeimageStyleOverrides
), which could be handled within the template if we had more fine-grained control over the templates themselves.