2014-11-11 18 views
39

Tôi đang sử dụng Express 4.9.0 và express-generator.Làm cách nào để thay đổi bố cục mặc định bằng cách sử dụng tay lái?

Created soạn sẵn với một lệnh sau:

express --hbs projectname 

tay lái Builtin đang sử dụng views/layout.hbs theo mặc định như một trang chủ. Nhưng tôi không thể thấy bất kỳ cài đặt nào trong app.js của mình để thay đổi hành vi đó.

đoạn mã từ app.js tôi:

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs');

  1. Làm thế nào tôi có thể thay đổi cách bố trí mặc định của tôi trên toàn cầu?
  2. Nếu tôi muốn có 2 hoặc 3 bố cục chung khác nhau thì sao?
+0

tôi muốn cảm ơn bạn Heihachi bạn đã đưa lên câu hỏi này, tôi đã được tìm kiếm một cách để tích hợp handlebars w/Express nhưng không thể tìm thấy một ví dụ điển hình, nhìn vào dòng lệnh máy phát nhanh, làm tôi nhớ lại cách sử dụng hbs, và cho tôi một bản demo đơn giản nhưng tốt mà tôi không thể tìm thấy Trực tuyến. Cảm ơn. – Bharat

Trả lời

73

Bạn có thể chỉ định bố cục bạn muốn sử dụng làm một phần của cuộc gọi hiển thị. Nếu bạn tạo một bố cục mới được gọi là other.hbs, sau đó bạn có thể làm điều gì đó như:

res.render('view', { title: 'my other page', layout: 'other' }); 

Để ghi đè này cho toàn bộ ứng dụng, bạn có thể sử dụng:

app.set('view options', { layout: 'other' }); 
+0

Cảm ơn, nhưng tôi không thể làm điều đó trên toàn cầu? – Heihachi

+1

@Heihachi Tôi đã cập nhật câu trả lời để bao gồm tùy chọn toàn cầu. –

+0

đó là nó! Nếu tôi muốn vài bố trí toàn cục hơn, tôi sẽ chỉ sao chép một dòng với app.set(), phải không? – Heihachi

2

Nếu bạn đang sử dụng 'bày tỏ mô-đun -handlebars', sau đó những điều sau đây nên làm việc:

// ... 
app.set("views", __dirname); 

exphbs.ExpressHandlebars.prototype.layoutsDir = 'path/to/directory/'; 
app.engine('handlebars', exphbs({defaultView: 'name-of-template'})); 

// ... 

tôi đến điều này bằng cách đào xung quanh trong nguồn của module, nó quay ra rằng dòng này ...

// express-handlebars/lib/express-handlebars.js (line 55 in v1.2.2) 
ExpressHandlebars.prototype.layoutsDir = 'views/layouts/'; 

... là những gì mang lại cho hành vi mặc định luôn tìm kiếm trong '{{bất cứ điều gì mà bạn chỉ định}}/views/layouts /'

Vì vậy, về cơ bản - nếu, có lẽ, bạn có một thư mục khác nhau cấu trúc trong tâm trí hoặc có một số lý do khác để ghi đè lên nó, bạn có thể bằng cách sử dụng dòng trong ví dụ của tôi. Chỉ cần chắc chắn rằng bạn làm điều này trước bạn nhanh chóng exphbs.

Nếu bạn đang sử dụng một số mô-đun khác (tôi không chắc chắn điều gì ở ngoài đó) có khả năng là chúng có một số cài đặt tương tự có thể bị ghi đè bằng một chút jiggery-pokery (chỉ cần chạy 'tìm' trên nội dung tệp cho 'lượt xem/bố cục /'.

lưu ý rằng tôi đang thoát khỏi 'app.set ("views", __dirname);' để giữ mẫu ở bất kỳ đâu trong thư mục máy chủ của tôi và hiển thị chúng như vậy :

res.render("moduleName/templateName"); 

Sau khi cập nhật lên v2.0.1 trên sẽ không hoạt động, thay vào đó bạn có thể vượt qua các thư mục mặc định trong khi một cuộc tranh cãi như sau:

var hbs = exphbs.create({ 
    layoutsDir: 'app/server/', 
    ... 
5

Từ tay lái readme:

Có hai cách để thiết lập một cách bố trí mặc định: cấu hình bất động sản defaultLayout các công cụ xem, hoặc thiết lập người dân địa phương nhanh app.locals.layout.

Bố cục mà chế độ xem nên được hiển thị có thể được ghi đè theo yêu cầu bằng cách gán giá trị khác cho yêu cầu bố cục cục bộ. Sau đây sẽ làm cho "nhà" xem không có bố trí:

app.get('/', function (req, res, next) { 
    res.render('home', {layout: false}); 
}); 

Trong trường hợp bạn muốn thiết lập cách bố trí mặc định chỉ dành riêng cho một subroute cụ thể, bạn có thể muốn sử dụng như sau trong phần đầu của tuyến đường của bạn :

router.all('/*', function (req, res, next) { 
    req.app.locals.layout = 'admin'; // set your layout here 
    next(); // pass control to the next handler 
    }); 

bạn cũng có thể thiết lập cách bố trí mặc định trên khởi tạo:

// Create `ExpressHandlebars` instance with a default layout. 
var hbs = exphbs.create({ 
    defaultLayout: 'main', 
    helpers  : helpers, 

    // Uses multiple partials dirs, templates in "shared/templates/" are shared 
    // with the client-side of the app (see below). 
    partialsDir: [ 
     'shared/templates/', 
     'views/partials/' 
     ] 
    }); 

// Register `hbs` as our view engine using its bound `engine()` function. 
app.engine('handlebars', hbs.engine); 
app.set('view engine', 'handlebars'); 
Các vấn đề liên quan