在ExpressJS版本中構建Assemble.io前端

Question

忍受我，目前正在學習以下技術。

我已經建立了一個由+的NodeJS + ExpressJS的MongoDB +僧+翡翠打造的基本應用。我打算用Handlebars替換Jade，這是一種不同的模板引擎。爲了解決這個問題，我考慮實施Assemble.io，因爲它是一個使用Handlebars的靜態站點生成器，它爲使用Bootstrap前端框架開始構建奠定了良好的基礎。我也喜歡Assemble很好地將文件分割成佈局，模板和部分。

這個應用程序/網站的目標是從MongoDB中提取數據並將其顯示在前端。前端將由100個不同的內容頁面組成，因此它們需要易於維護。當然，我還需要從前端和後端代碼中明確區分。

什麼可能是最合乎邏輯的方式去建立這樣的事情？ ExpressJS可以實現彙編嗎？如果是這樣，我將如何在app.js中設置我的視圖來顯示彙編文件？或者，將view engine設置爲句柄並將CDN鏈接拉入Bootstrap會更好嗎？ （但是，如果我這樣做，我將如何設置佈局，模板和諧音？）

Answer 1

有您可以採取幾種不同的方法。

1. 在構建時使用匯編預渲染頁面結構。然後使用前端JavaScript來加載數據並呈現動態內容。
2. 在服務器端控制器中使用assemble api來加載模板和數據並在運行時渲染內容。
3. 與（2）類似，覆蓋express中內置的View類，並在其中進行裝載和渲染。

我現在要＃2，所以你可以直接使用匯編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); 
    }); 
}); 

希望這有助於。