Swig 以及 YAML front-matter 模板
Swig 以及 YAML front-matter 模板
模板可以使用 gulp-swig
和 gulp-front-matter
来设置:
page.html
---
title: Things to do
todos:
- First todo
- Another todo item
- A third todo item
---
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<ul>{% for todo in todos %}
<li>{{ todo }}</li>
{% endfor %}</ul>
</body>
</html>
gulpfile.js
var gulp = require('gulp'
var swig = require('gulp-swig'
var frontMatter = require('gulp-front-matter'
gulp.task('compile-page', function() {
gulp.src('page.html')
.pipe(frontMatter{ property: 'data' }))
.pipe(swig())
.pipe(gulp.dest('build')
}
gulp.task('default', ['compile-page']