javascript - 使用 Gulp 基于 Handlebars 模板编译 partials 和 markdown
问题描述
我在这里有一个 Handlebars 模板,名为tpage.hbs
:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
{{> head}}
</head>
<body>
{{> home-header}}
{{{ mdcontents }}}
</body>
</html>
head
并且home-header
是部分。
我有一个 Markdown 文件文件夹,我想根据这个模板制作 HTML 页面,在模板中的 where 中添加 .md 文件mdcontents
。
我有以下 Gulpfile:
var gulp = require('gulp');
var handlebars = require('gulp-compile-handlebars');
var HB = require('Handlebars'); // I know I don't need two Handlebars imports, I'm just trying different things at this point
var uglify = require('gulp-uglify');
var markdown = require('gulp-markdown');
var tap = require('gulp-tap');
// ...
gulp.task('markhb', function() {
return gulp.src('./app/templates/tpage.hbs')
.pipe(handlebars({}, {
ignorePartials: false,
batch: ['./app/templates/partials'] /* my partials directory */
}))
.pipe(tap(function(file) {
var template = HB.compile(file.contents.toString());
console.log(file.contents.toString());
return gulp.src('./app/content/mdpages/**.md')
.pipe(markdown())
.pipe(tap(function(file) {
var data = {
mdcontents: file.contents.toString()
};
var html = template(data);
file.contents = new Buffer(html, 'utf-8'); // Buffer() is deprecated, I'll fix that later
}))
.pipe(rename({
extname: '.html'
}))
.pipe(gulp.dest('build/pages'));
}));
});
所以,我的问题是,如果我保留第一个pipe
电话,它会很好地加载部分,但它会忽略并mdcontents
完全删除。但是,如果我删除第一个pipe
调用,它会很好地呈现降价,但会去掉部分内容。我也不喜欢我现在使用两个 Handlebars 库,但此时我只想要一个工作模板,然后再清理。我需要添加、删除或更改什么才能同时渲染部分和降价?
解决方案
使用像https://github.com/helpers/helper-markdown这样的 Handlebars markdown 中间件。
然后的想法是使用带有 helper-markdown 的 Handlebars 作为过滤器包含文件,而不是让 gulp 为您进行处理。
推荐阅读
- windows - 如何在管理员模式下远程调用 PS 脚本
- javascript - Konva js Text 将比例转换为字体大小
- azure - 如何在 iOS 应用程序中集成 azure-map
- python - 如何从 Python 字典中的每个键打印一个特定值?
- spring-boot - 微服务架构的认证和授权
- encode - 使用第三方集成工具对 HTML 进行双重编码
- python - 按类别拆分excel选项卡并将它们保存为单独的文件
- parsing - 理论:LL(k) 解析器与 LL(k) 语法的解析器
- reactjs - 没有在 reactJS 钩子中的存在状态列表变量中添加新项目
- jsonnet - jsonnet std.mapWithKey - 不生成数组?