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 中的 Jekyll if 语句