Themes

Themes

Overview

A HyperTemplates theme is a collection of layouts and related files.

Directory structure

A theme is a directory containing at least two files:

• theme.json
• layouts/default.html

These are the only requirements for a HyperTemplates theme. However, themes typically contain additional resources organized into subdirectories such as layouts/, partials/, and static/.

Example

 1layouts/
 2    default.html
 3    home.html
 4    blog.html
 5    post.html
 6partials/
 7    head.html
 8    header.html
 9    footer.html
10static/
11    css/
12        reset.css
13        styles.css
14    fonts/
15    img/
16        logo.svg
17        favicon.png
18    js/
19        main.js
20theme.json

Configuration

Themes are configured using the theme.json file.

 1{
 2    "name": "Example Theme",
 3    "description": "A super basic example theme",
 4    "version": "0.1.0",
 5    "config": {
 6        "layouts_dir": "layouts",
 7        "static_dir": "static",
 8        "blocks_dir": "blocks",
 9        "contenttypes_dir": "types"
10    }
11}

Specification

theme.name

The theme name.

Example

1{
2  "name": "Example Theme"
3}

theme.description

The theme description.

Example

1{
2  "description": "An example theme."
3}

theme.version

The theme version.

Example

1{
2  "version": "0.1.0"
3}

theme.config

Theme configuration settings (optional).

Example

1{
2  "name": "Example Theme",
3  "config": {}
4}

theme.config.layouts_dir

The theme layouts directory (optional). The default value is layouts. See the layouts reference for more information.

Example

1{ 
2  "name": "Example Theme",
3  "config": {
4      "layouts_dir": "layouts"
5  }
6}

theme.config.static_dir

The theme static directory (optional). The default value is static. See the assets reference and asset hierarchy for more information.

Example

1{ 
2  "name": "Example Theme",
3  "config": {
4      "static_dir": "assets"
5  }
6}

theme.config.blocks_dir

The theme blocks directory (optional). The default value is blocks.

Example

1{ 
2  "name": "Example Theme",
3  "config": {
4      "blocks_dir": "components"
5  }
6}

theme.config.contenttypes_dir

The content types directory. The default value is types. See the content types reference for more information.

Example

1{ 
2  "name": "Example Theme",
3  "config": {
4      "contenttypes_dir": "types"
5  }
6}