Поймал себя на том, что мысль о собственном шаблонизаторе становится все более навзчивой. Причем, я ее гоню..., выгоняю..., а потом она приходиит ко мне под видом gulp-ejs. Оказалось, что в описании к Gulp-swig исчерпывющий набор примеров...
Так что здесь я начал было разбирать, как использовать Swig and YAML front-matter, но все оказалось очень просто, так что пост короткий.
Update: Оказалось, что в посте нет ссылки на документацию, нашел вот здесь Liquid-for-Designers... и еще есть пара ссылок в комментариях к посту.
Swig Plugin for Gulp - загрузить данные для экспорта в HTML можно из gulpfile.js, .json файла, исплользовать плагин gulp-data... By default, gulp-swig will look for the json data file in the same location as the template. If you have your data in a different location, there's an option for that
Разработка → Swig — JavaScript шаблонизатор с Django Template синтаксисом
26 SWIG and Javascript
npm swigA simple, powerful, and extendable templating engine for node.js and browsers, similar to Django, Jinja2, and Twig.
swig-template stackoverflow
gulp-data plugin Inject data into your templates via the new gulp-data plugin. It creates a file.data property with the data you need. This new method makes it much easier and less restrictive for getting data, than the methods below it. I'd recommend using this new method.
[Templating with Swig and YAML front-matter](http://gulpjs.org/recipes/templating-with-swig-and-yaml-front-matter.h¶
#age.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']);
EJS - это осеновной язык для Hexo¶
Getting Started with EJS - начинать отсюда
Effective JavaScript templating GET STARTED
embeddedjavascript /ViewHelpers.wiki /Testing.wiki /Templates.wiki
EJS is packaged with view helpers. View helpers are shortcuts to commonly used display code, like links and forms. Similar to those found in the Ruby on Rails framework, they keep view code as short, simple, and to the point as possible.
Посты чуть ниже также могут вас заинтересовать
2 комментария:
Swig For Designers
http://eddywashere.com/blog/swig-for-designers/
In order to better understand Swig, I'll break things out the way Shopify documentation did for liquid templating
https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
with Liquid for Designers and sprinkle in the best parts of the Swig docs.
http://handlebarsjs.com/
https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
There are two types of markup in Liquid: Output and Tag.
Output markup (which may resolve to text) is surrounded by
{{ matched pairs of curly brackets (ie, braces) }}
Tag markup (which cannot resolve to text) is surrounded by
{% matched pairs of curly brackets and percent signs %}
Отправить комментарий