Maquetus
Maquetus es un sencillo generador de archivos estáticos que se usa con Gulp. Compila una serie de páginas en Handlebars a HTML pudiendo usar partials, helpers o datos procedentes de un archivo JSON o YAML.
Instalación
npm install maquetus
Uso
Estructura de archivos
.
├── ...
├── src
│ ├── data
| ├── example.json
| ├── example2.yml
| └── ...
│ ├── helpers
| ├── bold.js
| └── ...
│ ├── layouts
| ├── default.hbs
| ├── post.hbs
| └── ...
│ ├── pages
| ├── index.hbs
| ├── post.hbs
| └── ...
│ └── partials
| ├── header.hbs
| ├── footer.hbs
| └── ...
└── ...
Nota: Las páginas, los partials y los layouts pueden usar las extensiones .html
, .hbs
, or .handlebars
.
Gulpfile
const gulp = ;const maquetus = ; gulp;
Opciones
Opción | Tipo | Descripción |
---|---|---|
layouts |
String |
Ruta que contiene los layouts. Es necesario tener uno llamado default . |
partials |
String o Object |
Ruta que contiene los partials. Cada partial se registrará en Handelbars con la ruta del archivo. En caso de usar un objeto usará la key del objeto como alias. |
helpers |
String |
Ruta que contiene los helpers. Cada helper se registrará en Handelbars con el nombre del archivo. |
data |
String |
Ruta que contiene los data. Los datos del archivo serán accesibles mediante una variable llamada igual que el nombre del archivo. Los archivos pueden ser JSON (.json ) o YAML (.yml ) |
hbsOptions |
Object |
Opciones para Handelbars |
customHelpers |
Object |
Regístrar helpers programáticamente. |
customPartials |
Object |
Regístrar partials programáticamente. |
globalVariables |
Object |
Variables globales. |
Ejemplos
Layouts
layouts/post.hbs
{{ pageTitle }} {{ postTitle }} {{ body }} <!-- ... -->
pages/post.hbs
---layout: postpageTitle: Best BlogpostTitle: Lorem ipsum--- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nota: Si el layout no está definido llamará por defecto al default
.
Partials
gulpfile.js
// Single path // Multiple paths
post.hbs
---layout: post--- <!-- Si es de tipo String -->{{> header }}{{> subDir/example }} <!-- En caso de estar en un subdirectorio --> <!-- Si es de tipo Object -->{{> components/example }}{{> components/subDir/example }} <!-- En caso de estar en un subdirectorio -->{{> partials/example }}{{> partials/subDir/example }} <!-- En caso de estar en un subdirectorio -->
Data
Importante: No usar las variables body
, root
y page
ya que se usan por maquetus.
example.json
index.hbs
{{ example.name }}{{ example.phone }}
Helpers
Maquetus ya incluye algunos helpers:
ifpage
{{#ifpage 'index'}} Se mostrará si la página se llama index.html{{/ifpage}}
unlesspage
{{#ifpage 'index'}} No se mostrará si la página se llama index.html{{/ifpage}}
repeat
{{#repeat 5}} Lorem ipsum dolor sit amet. {{/repeat}}
markdown
{{#markdown}} # Heading 1 Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.{{/markdown}}
eq
{{#eq var 'value'}} Print this{{/eq}}
concat
{{> partialExample title=(concat foo bar) }}
Custom Helpers
bold.js
module { const bolder = '<strong>' + options + '</strong>'; return bolder;}
index.hbs
{{#bold}}Lorem ipsum dolor sit amet.{{/bold}}