Swig 以及 YAML front-matter 模板

Swig 以及 YAML front-matter 模板

模板可以使用 gulp-swiggulp-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']);

有疑问、勘误、请您在下方留言,感谢您的支持 ღ( ´・ᴗ・` )!

感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/691.html) 知识共享许可协议
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.

关于作者:

    简介:

    系统架构师 、作家、
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理