Lodash Templates/Variables 未在 YAML Front-matter 中处理 .hbs 文件
Lodash Templates/Variables not processed in YAML Front-matter for .hbs files
我一直在与 Assemble 团队就这个问题来回沟通,他们认为这似乎是一个实施问题而不是错误。
基本上我有一个 assemble 设置(不是 grunt-assemble),我试图通过 assembles YAML 前端将 YAML 文件中的一些数据拉入车把模板- 问题,将其传递给局部渲染。
我在记录 assembles 数据上下文时得到的是前端变量未定义。
与其浏览我所做的一切和此处的代码片段,您还可以查看此线程以了解对话的历史、代码片段和迄今为止尝试过的所有事情:https://github.com/assemble/assemble/issues/758
我还在我的 github 上创建了一个 public 演示存储库,供任何想要将其拉下/分叉以进行进一步调查的人使用。
https://github.com/tgdev/assemble-yaml-demo
为什么前面的lodash模板return未定义,而不是外部YAML文件的内容?
2016 年 11 月 9 日更新:使用 json 似乎工作正常
将 yml 文件中的数据更改为 json(带有 .json 扩展名)使用 tools/templates.js
中的前端中间件按预期呈现,所以看起来好像 assemble and/or handlebars 在解析 yml 文件时遇到问题。
这是我正在测试的主要 yml 文件的副本:
content: >
<h2>Page sub heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<img src="http://placehold.it/1170x658" alt="" class="align-left" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><img src="http://placehold.it/1170x658" alt="" class="align-right" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
所以现在,我的问题是为什么 assemble handlebars 模板前端的 lodash 模板无法解析 yaml 文件(日志中未定义)?
好吧,我终于弄明白了。
问题是这个...
Assemble 不支持外部 yaml 字体文件,所以我需要在我的中间件之前使用这段代码。
import yaml from 'js-yaml';
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
然后 expander 中间件通过 lodash 模板从 front-matter 加载 yaml 文件内容,将其添加到数据上下文中。
所以这里是整个assemble构建任务文件以供参考(希望对以后的人有所帮助)。
import assemble from 'assemble';
import expander from 'expander';
import merge from 'lodash.merge';
import yaml from 'js-yaml';
import through from 'through2';
import plumber from 'gulp-plumber';
import { projectName, templatesPathConfig as path } from '../project.config';
export default function templates() {
// Create assemble instance
let templates = assemble();
function expand(data) {
// `data` is front-matter
const ctx = merge({}, templates.cache.data, data);
return expander.process(ctx, data);
}
// @reference
// https://github.com/node-base/base-data#dataloader
//
// @notes
// Loading yaml files is not built in. Assemble uses
// base-data now. You can add yaml loading by using
// a custom dataLoader.
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
templates.data(path.data); // path.data = ./src/templates/data/**/*.yml
templates.preRender(/\.(hbs|html)$/, function (view, next) {
view.data = expand(view.data);
next();
});
templates.task('preload', function(cb) {
templates.partials(path.partials);
templates.layouts(path.layouts);
// Register helpers
templates.helpers(path.helpers);
// Add master pages and listing page
templates.pages(path.pages);
templates.pages(path.referencePages);
templates.pages(path.index);
// Add custom data
templates.data({
projectName: projectName
});
cb();
});
// Assemble task to build template files
templates.task('build', ['preload'], () => {
// Render out the template files to 'dist'
return templates.toStream('pages')
.pipe(plumber({
errorHandler: err => {
log.error(`${err.message}.`);
}
}))
.pipe(templates.renderFile())
.pipe(plumber.stop())
.pipe(renameExt())
.pipe(templates.dest('dist'));
});
// Run the Assemble build method
templates.build('build');
}
// Change the file extension through node stream
function renameExt() {
return through.obj( (file, enc, next) => {
file.extname = '.html';
next(null, file);
});
}
我一直在与 Assemble 团队就这个问题来回沟通,他们认为这似乎是一个实施问题而不是错误。
基本上我有一个 assemble 设置(不是 grunt-assemble),我试图通过 assembles YAML 前端将 YAML 文件中的一些数据拉入车把模板- 问题,将其传递给局部渲染。
我在记录 assembles 数据上下文时得到的是前端变量未定义。
与其浏览我所做的一切和此处的代码片段,您还可以查看此线程以了解对话的历史、代码片段和迄今为止尝试过的所有事情:https://github.com/assemble/assemble/issues/758
我还在我的 github 上创建了一个 public 演示存储库,供任何想要将其拉下/分叉以进行进一步调查的人使用。
https://github.com/tgdev/assemble-yaml-demo
为什么前面的lodash模板return未定义,而不是外部YAML文件的内容?
2016 年 11 月 9 日更新:使用 json 似乎工作正常
将 yml 文件中的数据更改为 json(带有 .json 扩展名)使用 tools/templates.js
中的前端中间件按预期呈现,所以看起来好像 assemble and/or handlebars 在解析 yml 文件时遇到问题。
这是我正在测试的主要 yml 文件的副本:
content: >
<h2>Page sub heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<img src="http://placehold.it/1170x658" alt="" class="align-left" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><img src="http://placehold.it/1170x658" alt="" class="align-right" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
所以现在,我的问题是为什么 assemble handlebars 模板前端的 lodash 模板无法解析 yaml 文件(日志中未定义)?
好吧,我终于弄明白了。
问题是这个...
Assemble 不支持外部 yaml 字体文件,所以我需要在我的中间件之前使用这段代码。
import yaml from 'js-yaml';
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
然后 expander 中间件通过 lodash 模板从 front-matter 加载 yaml 文件内容,将其添加到数据上下文中。
所以这里是整个assemble构建任务文件以供参考(希望对以后的人有所帮助)。
import assemble from 'assemble';
import expander from 'expander';
import merge from 'lodash.merge';
import yaml from 'js-yaml';
import through from 'through2';
import plumber from 'gulp-plumber';
import { projectName, templatesPathConfig as path } from '../project.config';
export default function templates() {
// Create assemble instance
let templates = assemble();
function expand(data) {
// `data` is front-matter
const ctx = merge({}, templates.cache.data, data);
return expander.process(ctx, data);
}
// @reference
// https://github.com/node-base/base-data#dataloader
//
// @notes
// Loading yaml files is not built in. Assemble uses
// base-data now. You can add yaml loading by using
// a custom dataLoader.
templates.dataLoader('yml', function(str) {
return yaml.safeLoad(str);
});
templates.data(path.data); // path.data = ./src/templates/data/**/*.yml
templates.preRender(/\.(hbs|html)$/, function (view, next) {
view.data = expand(view.data);
next();
});
templates.task('preload', function(cb) {
templates.partials(path.partials);
templates.layouts(path.layouts);
// Register helpers
templates.helpers(path.helpers);
// Add master pages and listing page
templates.pages(path.pages);
templates.pages(path.referencePages);
templates.pages(path.index);
// Add custom data
templates.data({
projectName: projectName
});
cb();
});
// Assemble task to build template files
templates.task('build', ['preload'], () => {
// Render out the template files to 'dist'
return templates.toStream('pages')
.pipe(plumber({
errorHandler: err => {
log.error(`${err.message}.`);
}
}))
.pipe(templates.renderFile())
.pipe(plumber.stop())
.pipe(renameExt())
.pipe(templates.dest('dist'));
});
// Run the Assemble build method
templates.build('build');
}
// Change the file extension through node stream
function renameExt() {
return through.obj( (file, enc, next) => {
file.extname = '.html';
next(null, file);
});
}