gulp - site - trago generar archivo html con jade a través de markdown json
static site framework (2)
Estoy usando gulp-markdown-to-json y gulp-jade
Mi objetivo es obtener datos del archivo de marcado que se ve así:
---
template: index.jade
title: Europa
---
This is a test.
agarrar template: index.jade archivo template: index.jade y pasarlo junto con otras variables al compilador de jade.
Hasta ahora tengo esto:
gulp.task(''docs'', function() {
return gulp
.src(''./src/docs/pages/*.md'')
.pipe(md({
pedantic: true,
smartypants: true
}))
.pipe(jade({
jade: jade,
pretty: true
}))
.pipe(gulp.dest(''./dist/docs''));
});
Me falta un paso donde se lee json de markdown, y el nombre de archivo de la plantilla de jade se envía a gulp.src antes de que se ejecute el compilador de jade.
gulp-jade es el complemento gulp incorrecto para su caso de uso.
Si tiene una secuencia de plantillas que desea rellenar con datos, use
gulp-jade:gulp.src(''*.jade'') .pipe(...) .pipe(jade({title:''Some title'', text:''Some text''}))Si tiene una secuencia de datos que desea representar en plantillas, use
gulp-wrap:gulp.src(''*.md'') .pipe(...) .pipe(wrap({src:''path/to/my/template.jade''})
Su caso es un poco más difícil, ya que quiere una plantilla .jade diferente para cada archivo .md . Afortunadamente, gulp-wrap acepta una función que puede devolver una plantilla diferente para cada archivo en la transmisión:
var gulp = require(''gulp'');
var md = require(''gulp-markdown-to-json'');
var jade = require(''jade'');
var wrap = require(''gulp-wrap'');
var plumber = require(''gulp-plumber'');
var rename = require(''gulp-rename'');
var fs = require(''fs'');
gulp.task(''docs'', function() {
return gulp.src(''./src/docs/pages/*.md'')
.pipe(plumber()) // this just ensures that errors are logged
.pipe(md({ pedantic: true, smartypants: true }))
.pipe(wrap(function(data) {
// read correct jade template from disk
var template = ''src/docs/templates/'' + data.contents.template;
return fs.readFileSync(template).toString();
}, {}, { engine: ''jade'' }))
.pipe(rename({extname:''.html''}))
.pipe(gulp.dest(''./dist/docs''));
});
src / docs / pages / test.md
---
template: index.jade
title: Europa
---
This is a test.
src / docs / templates / index.jade
doctype html
html(lang="en")
head
title=contents.title
body
h1=contents.title
div !{contents.body}
dist / docs / test.html
<!DOCTYPE html><html lang="en"><head><title>Europa</title></head><body><h1>Europa</h1><div><p>This is a test. </p></div></body></html>
No necesita usar gulp-markdownto-json . Hay si hay muchas mejores soluciones. Por ejemplo:
- Observación : es un procesador de reducción que analiza Markdown en AST-tree (en formato JSON). Tiene soporte de YAML-frontmatter fuera de la caja. Por cierto, hay muchos complementos para diferentes casos de uso.
- artículo-datos : extrae los datos de su artículo de descuento sin usar front-tabter. Personalmente, utilizo este paquete, porque me ayuda a escribir archivos de marcación Juse, sin preocuparme por los datos correctos en frontmate. Simplemente extorsiona los datos del archivo de rebajas y luego puede hacer lo que sea necesario: pasar al complemento gulp, recopilar en conjunto, analizar sus artículos, etc.
Aquí hay un ejemplo de cómo uso los datos del artículo en mi blog personal.