在 ExpressJS 构建中构建 Assemble.io 前端

Question

耐心等待，目前正在学习以下技术。

我构建了一个由 NodeJS + ExpressJS + MongoDB + Monk + Jade 构建的基本应用程序。我打算用不同的模板引擎 Handlebars 替换 Jade。为此，我正在考虑实施 Assemble.io，因为它是一个使用 Handlebars 的静态站点生成器，它为开始使用 Bootstrap 前端框架进行构建奠定了良好的基础。我也喜欢 Assemble 将文件很好地分成布局、模板和部分。

此 application/website 的目标是从 MongoDB 中提取数据并将其显示在前端。前端将包含 100 多个不同的内容页面，因此它们需要易于维护。当然，我也需要明确区分前后端代码。

设置这样的东西最合乎逻辑的方法是什么？可以用 ExpressJS 实现 Assemble 吗？如果是这样，我将如何在 app.js 中设置我的视图以显示 Assemble 文件？或者将 view engine 设置为 handlebars 并将 CDN 链接拉入 Bootstrap 会更好吗？（但如果我这样做，我将如何设置布局、模板和部分？）

Answer 1

您可以采用几种不同的方法。

在构建时使用 assemble 预渲染页面结构。然后使用前端javascript加载数据和渲染动态内容。
使用服务器端控制器中的 assemble api 加载模板和数据并在运行时呈现内容。
类似于（2），覆盖express中内置的View class，并在其中使用assemble进行加载和渲染。

我现在会选择#2，这样您就可以使用 assemble api 直接在您的 app.js 中加载模板、数据、助手、中间件等... .然后创建一个 render 函数，您可以在路由中使用它来获取页面并呈现它...

var express = require('express');
var Assemble = require('assemble');

var app = express();
var assemble = new Assemble();

// setup middleware
assemble.onLoad(/\.hbs/, function(file, next) {
  // so something if needed
  next();
});

// load helpers
assemble.helpers(['path/to/helpers/*.js']);
// load async helpers
assemble.asyncHelpers(['path/to/async-helpers/*.js']);

// load templates
assemble.layouts(['path/to/layouts/*.hbs']);
assemble.partials(['path/to/partials/*.hbs']);
assemble.pages(['path/to/pages/*.hbs']);

// load global site data
assemble.data(['path/to/site.json']);

// render function to make looking up and rendering pages easier
function render(name, locals, cb) {
  var view = assemble.getView(name);
  if (!view) return cb(new Error('Unable to find "' + name + '"'));
  view.render(locals, function(err, result) {
    if (err) return cb(err);
    cb(null, result.content);
  });
}

// setup some express routes
app.get('/', function(req, res, next) {
  render('index', {title: 'Home Page'}, function(err, content) {
    if (err) return next(err);
    res.status(200); // I don't remember this api off the top of my head
    res.send(content);
  });
});

希望对您有所帮助。

在 ExpressJS 构建中构建 Assemble.io 前端

Building an Assemble.io front-end in an ExpressJS build

mongodb

node.js

twitter-bootstrap

assemble