Templates configuration

Configure where your Templates live, where they should be output, as well as what file extensions to use/look for and which assets should be copied over in the process.

config.js
module.exports = {
  build: {
    templates: {
      filetypes: 'html',
      source: 'src/templates',
      destination: {
        path: 'build_local',
        extension: 'html'
      },
      assets: {
        source: './src/images',
        destination: 'images'
      }
    }
  }
}

Multiple sources

You may define multiple templates sections. Each section will be processed and templates will be output based on the section's configuration.

config.js
module.exports = {
  build: {
    templates: [
      {
        source: 'src/templates',
        destination: {
          path: 'build_local'
        }
      },
      {
        source: 'src/amp-templates',
        destination: {
          path: 'build_amp'
        }
      }
    ]
  }
}

filetypes

Default: html

Define what file extensions your Templates use.

filetypes can be a string, but it can also be an array or a pipe|delimited list:

config.js
module.exports = {
  build: {
    templates: {
      filetypes: ['html', 'blade.php'] // or 'html|blade.php'
    }
  }
}

Maizzle will only compile files with these extensions.

This means you can keep other files alongside your Templates, and Maizzle will not try to compile them - it will simply copy them over to the build destination directory.

source

Define the source directory where Maizzle should look for Templates to compile.

config.js
module.exports = {
  build: {
    templates: {
      source: 'src/templates'
    }
  }
}

Remember, Maizzle will copy these folders and their entire contents to the templates.destination.path directory.

destination

This allows you to customize the output path and file extension.

path

Directory path where Maizzle should output the compiled emails.

config.js
module.exports = {
  build: {
    templates: {
      destination: {
        path: 'build_local'
      }
    }
  }
}

If you omit this key, a build_${env} directory name will be used.

extension

Define the file extension - without the leading dot - to be used for the compiled templates. For example, let's output Laravel Blade files:

config.js
module.exports = {
  build: {
    templates: {
      destination: {
        path: 'build_laravel',
        extension: 'blade.php'
      }
    }
  }
}

You may use a custom output path for a Template file with the help of the permalink Front Matter key.

src/templates/example.html
---
permalink: output/this/template/here.html
---

<extends src="src/layouts/main.html">
  <block name="template">
    <!-- ... -->
  </block>
</extends>

This will override destination.path from your config and will output the compiled Template file at the location set in permalink.

You may use both relative and absolute file paths.

For example, output one level above project directory:

---
permalink: ../newsletter.html
---

Output at a specific system location:

---
permalink: C:/Users/Cosmin/Newsletter/2022/06/index.html
---

assets

Source and destination directories for your asset files.

At build time, templates.assets.destination will be created relative to templates.destination, and everything inside templates.assets.source will be copied into it:

config.js
module.exports = {
  build: {
    templates: {
      assets: {
        source: 'src/images',
        destination: 'images'
      }
    }
  }
}

You can use it to store any files you might need, not just images.

Of course, if using multiple templates blocks, you can have different asset configurations for each block:

config.js
module.exports = {
  build: {
    templates: [
      {
        source: 'src/templates',
        destination: {
          path: 'build_basic'
        },
        assets: {
          source: 'src/images',
          destination: 'images' // assets output to build_basic/images
        }
      },
      {
        source: 'src/amp-templates',
        destination: {
          path: 'build_amp'
        },
        assets: {
          source: 'src/assets/amp',
          destination: 'media' // assets output to build_amp/media
        }
      }
    ]
  }
}

Copyright © 2022 Maizzle Edit this page on GitHub