Gulp Front Matter + Markdown 通过 Nunjucks [英] Gulp Front Matter +Markdown through Nunjucks

问题描述

我正在努力为我的 Gulp 流程添加一些简单的 Markdown 处理，但我不能完全让这些部分一起工作.我似乎错过了获取前端内容和确定应用哪个 Nunjuck 模板之间的步骤.

I'm working on adding some simple Markdown processing to my Gulp process, but I can't quite get the pieces to work together. I seem to be missing the step between getting the front matter content, and determining which Nunjuck template to apply.

这是我的 Gulp 文件中的部分:

Here's the section in my Gulp file:

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 文件如下所示:

The markdown file looks like this:

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

...markdown content...

我觉得它正朝着正确的方向发展，但能否可视化前沿数据的去向，以及如何将其暴露给 Nunjucks 渲染，尚不清楚.有什么帮助吗?

I feel like it's going the right direction but being able to visualise where that front matter data has gone, and how to expose it to the Nunjucks rendering, is not clear. Any help?

推荐答案

你需要gulp-wrap和原版nunjucks.

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

gulp-nunjucks is a tool for compiling the stream of nunjucks templates, but what you need to do is to wrap your contents in a nunjucks template and that is what gulp-wrap is for.

尝试 npm install gulp-wrap nunjucks 以及其他设置，然后以下应该可以工作.

Try npm install gulp-wrap nunjucks in addition to other settings and then the following should work.

gulp 文件

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

layout.nunjucks

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

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

这篇关于Gulp Front Matter + Markdown 通过 Nunjucks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！