gulp-templater
v1.1.3
Published
Create html page from layout
Downloads
3
Readme
gulp-templater
gulp-templater
Плагин созданный для быстрого создания HTML страниц, из исходных файлов сохраняя структуру папок страниц.
установка:
npm install --saveГлавный шаблон в который встраивается содержимое страниц это обычная html страница, с добавленными в нужные места определенными полями.
По умолчанию всегда текст новой страницы в шаблоне буде заменять строку <%content%>.
В страницы можно так же вставлять дополнительные части шаблонов которые повторяются на других страницах. Такие как меню, хэдер или футер.
Для их вставки в опциях нужно указать значение partials с путем до папки с этими частями. Части должны иметь расширение .html к примеру menu.html.
В основном шаблоне занчение <%%menu%%> будет заменено содержимым данного шаблона.
Все остальные поля берутся из самой страницы, оформленной в специальном формате.
Создание страницы проходит по такому сценарию.
- Берется исходный шаблон.
- Проверяются есть ли части которые вставляются в шаблон, если да они находятся и выполняется данная операция.
- Далее проходим по страницам и вставляем их с переменными в получившийся шаблон и сохраняем результат.
Пример страницы:
title: В шаблоне этот текст заменит переменную <%title%>
foo_bar: В шаблоне этот текст заменит переменную <%foo_bar%>
=====
<p>
тут обычная html разметка страницы, в шаблоне она заменит переменную <%content%>
</p>
Пример шаблона:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%title%></title>
</head>
<body>
<%%menu%%>
<%content%>
<%foo_bar%>
</body>
</html> Пример использования:
У нас есть шаблон, и есть группа папок со страницами, которые нужно превратить в html страницы сохраняя пути папок.
.
├── content
│ └── style.css
├── pages
│ ├── index.html
│ └── subfolder
│ └── second.html
├── partials
│ └── menu.html
└── template
└── layout
└── index.html
Нам необходимо на основе шаблона
source/template/layout/index.html
Построить список страниц находящихся в папке
source/pages сохраняя их структуру папок и уровень вложенности.
var gulp = require('gulp');
var templater = require('gulp-templater');
gulp.task('test', function() {
gulp.src([
'./source/pages/**' // папки со страницами
])
.pipe(templater({
layout: 'source/template/layout/index.html', // путь до шаблона
dist: 'public', // папка в которую будут сложены готовые страницы
source: 'source/pages', // участок пути до папки, который нужно исключить
partials: 'source/partials' // части страниц типа footer
}));
});