Gulp Front Matter + Markdown通过Nunjucks

时间:2015-09-27 16:18:56

标签: gulp markdown nunjucks yaml-front-matter

我正在努力为我的Gulp流程添加一些简单的Markdown处理,但我无法完成这些工作。我似乎错过了获取前端内容和确定应用哪个Nunjuck模板之间的步骤。

以下是我的Gulp文件中的部分:

gulp.task('pages:md', function() {
  gulp.src('./content/**/*.md')
    .pipe(frontMatter({ // optional configuration
      property: 'frontMatter', // property added to file object
      remove: true // should we remove front-matter header?
    }))
    .pipe(marked({
        // optional : marked options
    }))
    .pipe(nunjucks({
      // ?? Feels like I need to specify which template applies based on the front matter "layout" property?
    }))
    .pipe(gulp.dest('build/'))
});

markdown文件如下所示:

---
title: Title
layout: layout.html
nav_active: home
---

...markdown content...

我觉得它正朝着正确的方向前进,但是能够直观地了解前端数据的去向,以及如何将它暴露给Nunjucks渲染,目前尚不清楚。有什么帮助吗?

2 个答案:

答案 0 :(得分:6)

您需要gulp-wrap和原始nunjucks

gulp-nunjucks是一个用于编译nunjucks模板流的工具,但你需要做的是将你的内容包装在nunjucks模板中,这就是gulp-wrap的用途。

除了其他设置外,请尝试npm install gulp-wrap nunjucks,然后以下内容应该有效。

gulpfile

var gulp = require('gulp')
var wrap = require('gulp-wrap')
var frontMatter = require('gulp-front-matter')
var marked = require('gulp-marked')

var fs = require('fs')

gulp.task('pages:md', function() {
  gulp.src('./content/**/*.md')
    .pipe(frontMatter())
    .pipe(marked())
    .pipe(wrap(function (data) {
      return fs.readFileSync('path/to/layout/' + data.file.frontMatter.layout).toString()
    }, null, {engine: 'nunjucks'}))
    .pipe(gulp.dest('build/'))
});

降价

---
title: Title
layout: layout.nunjucks
nav_active: home
---

...markdown content...

layout.nunjucks

<h1>{{ file.frontMatter.title }}</h1>

<p>{{ contents }}</p>

答案 1 :(得分:2)

您可能想要查看插件gulp-ssg。我不知道它的价值,但在this issue中提到了与你有同样问题的人。

不完全是你所期待的,但对于这种工作,我使用metalsmith取得了成功。如果像我一样,你可以为你的javascripts资源进行更复杂的处理,你甚至可以将它与gulp混合。