Gulp Front Matter + Markdown 通过 Nunjucks

Posted

技术标签:

【中文标题】Gulp Front Matter + Markdown 通过 Nunjucks【英文标题】:Gulp Front Matter +Markdown through Nunjucks 【发布时间】:2015-12-24 22:22:55 【问题描述】:

我正在努力为我的 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 渲染,尚不清楚。有什么帮助吗?

【问题讨论】:

你过得怎么样@don-h。你的管子工作了吗? 嘿@rickysullivan 最后我对这个过程感到沮丧,并选择了 Metalsmith。能很好地满足我的需要。 【参考方案1】:

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

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

【讨论】:

【参考方案2】:

您需要gulp-wrap 和原始nunjucks

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

除了其他设置之外,尝试npm install gulp-wrap nunjucks,然后以下应该可以工作。

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

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

<p> contents </p>

【讨论】:

以上是关于Gulp Front Matter + Markdown 通过 Nunjucks的主要内容,如果未能解决你的问题,请参考以下文章

无法访问自定义 Front Matter 变量

在 YAML Front Matter 变量中使用液体标签

在 Front Matter 中的 Jekyll if 语句

Jekyll - Front Matter 默认不工作

Jekyll 教程——Front Matter & YAML

Jekyll 教程——Front Matter & YAML