Gulp Front Matter +通过Nunjucks降价

问题描述

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

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

  gulp.task（'pages：md'，function（）{
 gulp.src（'./ content / ** / * .md'）
 .pipe（frontMatter（{//可选配置
属性：'frontMatter'，//属性添加到文件对象
 remove：true //我们是否应该删除前端内容（{
 //可选：标记的选项
}））
 .pipe（nunjucks（{
 //感觉我需要根据前面的问题layout属性指定应用哪个模板？
）））
 .pipe（gulp.dest（'build /'））
}）; 
  

降价文件如下所示：

  --- 
 title：标题
 layout：layout.html 
 nav_active：主页
 --- 
 
 ...降价内容... 
  

我觉得它正朝着正确的方向发展，但能够可视化前端物质数据的去向，以及如何将其展示给Nunjucks渲染，目前还不清楚。您需要 gulp-wrap 和原始的<$>

c $ c> nunjucks 。

gulp-nunjucks是编译nunjucks模板流的工具，但您需要做的是

尝试 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）.toSt ring（）
}，null，{engine：'nunjucks'}））
 .pipe（gulp.dest（'build /'））
}）; 
  

降价

  --- 
 title：Title 
 layout：layout.nunjucks 
 nav_active：home 
 --- 
 
 ...降价内容... 
  

layout.nunjucks

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

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.

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/'))
});

The markdown file looks like this:

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

...markdown content...

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?

解决方案

You need gulp-wrap and original nunjucks.

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.

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

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/'))
});

markdown

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

...markdown content...

layout.nunjucks

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

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

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