摘要：和再來分別看看每個(gè)文件文件首先是有些值得注意的地方，拆開來多帶帶看引入了一個(gè)虛構(gòu)的。部分我們又用了，不同的是我們用了基本來指定默認(rèn)內(nèi)容。文件拼圖的下一部分就是。我們也用到了，同時(shí)還有，下面是的示例同樣拆開來看看這里又用到了。

一個(gè)項(xiàng)目的機(jī)會(huì)再加上我自己的探索，讓我對(duì)Handlebars partials有了更深的理解。事實(shí)證明，你可以做得比我了解的更多。

我最近在負(fù)責(zé)一個(gè)小項(xiàng)目，只有很少的靜態(tài)頁面。因?yàn)樘×耍覀冏铋_始沒有使用模板系統(tǒng)。當(dāng)項(xiàng)目開始往深一層推進(jìn)時(shí)，我們發(fā)現(xiàn)把靜態(tài)頁面拆分成partials & layout的模板明顯更好。

我們以前用過handlebars-layouts并且很喜歡它提供的那些特性。我本來想同時(shí)安裝Handlebars和handlebars-layouts，但是又感覺過于累贅了。

我在想有沒有可能只使用Handlebars而不用額外的handlebars-layouts庫？

我并不是想吐槽handlebars-layouts，我們以后可能還會(huì)用到這個(gè)項(xiàng)目。但是我想試試只用Handlebars partials來實(shí)現(xiàn)一些handlebars-layouts通過helper來實(shí)現(xiàn)的一些特性。

花了一些時(shí)間來評(píng)估項(xiàng)目需求后我問自己：handlebars-layouts helpers提供的哪些特性是我需要的？根據(jù)過去的經(jīng)驗(yàn)，我列出了如下helpers：

{{#extend}} layouts的能力

{{#embed}} partials的能力

能像{{#block}} 和 {{#content}}一樣配合

列出來后，我開始查Handlebars partials文檔來看看行不行。然后我發(fā)現(xiàn)我從來沒有利用到partials的全部潛力，只要做一點(diǎn)小小的努力就可以讓它們實(shí)現(xiàn)我的需求。有兩個(gè)特性吸引了我：partial blocks和inline partials。

我興奮地意識(shí)到Handlebars partials可以做到比我想象中多得多的事情并馬上開始了工作。

在開始前，還是先看一看基本partials, partial blocks 和 inline partials。

基本partials就像這樣：

{{> content-block }}

它會(huì)試圖找到一個(gè)命名為content-block的partial進(jìn)行渲染，否則就報(bào)錯(cuò)。

Handlebars partial的文檔上寫：

The normal behavior when attempting to render a partial that is not found is for the implementation to throw an error. If failover is desired instead, partials may be called using the block syntax.
渲染一個(gè)partial的默認(rèn)行為是，如果沒找到就報(bào)錯(cuò)。如果要進(jìn)行錯(cuò)誤處理，就要用block的方式來使用。

partial block就像這樣：

{{#> content-block}}
  Default content
{{/content-block}}

這樣寫有一個(gè)好處，就是當(dāng)content-block沒有找到時(shí)，partial block里面的部分就會(huì)被渲染，像上面就會(huì)渲染“Default content”。

而inline partial就像這樣：

{{#*inline "content-block"}}
  My new content
{{/inline}}

文檔里是這樣說的：

Templates may define block scoped partials via the inline decorator.
通過使用inline修飾符，可以在模板中定義塊級(jí)partials。

inline partial允許你臨時(shí)創(chuàng)建partials。如果頁面中有一個(gè)content-block partial block，然后我們創(chuàng)建了content-block inline partial的話，inline partial中的內(nèi)容(“My new content”) 就會(huì)替換partial block中默認(rèn)內(nèi)容。inline partial同樣可以替換基本partials，只是基本partials沒有默認(rèn)內(nèi)容而已。

了解完這些后我們就可以開始了。

我想同時(shí)擁有layouts/、includes/和pages/，目錄結(jié)構(gòu)看起來如下：

src/
├── pages
│   ├── page-one.hbs
│   └── page-two.hbs
└── partials
    ├── includes
    │   ├── hero.hbs
    │   └── footer.hbs
    └── layouts
        └── base.hbs

為了進(jìn)行渲染使用了Gulp + gulp-compile-handlebars，在htmlgulp任務(wù)中把src/pages/*.hbs當(dāng)成source目錄，就像下面這樣：

// gulpfile.js

const handlebars = require("gulp-compile-handlebars");
const rename = require("gulp-rename");

gulp.task("html", () => {
  return gulp.src("./src/pages/*.hbs")
    .pipe(handlebars({}, {
      ignorePartials: true,
      batch: ["./src/partials"]
    }))
    .pipe(rename({
      extname: ".html"
    }))
    .pipe(gulp.dest("./dist"));
});

需要注意，我們口中的“page”, “include”和“l(fā)ayout”，本質(zhì)上都是Handlebars partial，這就是保證可擴(kuò)展性的關(guān)鍵。一旦了解了這個(gè)，新世界的大門就打開了。

再來分別看看每個(gè)文件：

首先是layouts/base.hbs：

{{!-- layouts/base.hbs --}}



  
    
    
    {{#> head-block}}
      {{!-- Custom  content per page could be added. --}}
    {{/head-block}}
  
  
    {{#> hero-block}}
      {{!-- Hero content goes here. --}}
    {{/hero-block}}

    

    {{#> scripts-block}}
      {{!-- Custom scripts per page can be added. --}}
    {{/scripts-block}}
  

有些值得注意的地方，拆開來多帶帶看：

{{#> head-block}}
  {{!-- Custom  content per page could be added. --}}
{{/head-block}}

引入了一個(gè)虛構(gòu)的main.css。然后設(shè)置了head-block，當(dāng)一個(gè)具體的page繼承此layout時(shí)在這里傳入中的內(nèi)容(注：就跟handlebars-layouts的{{#block}} helper一樣)。

{{#> hero-block}}
  {{!-- Hero content goes here. --}}
{{/hero-block}}

{{#> scripts-block}}
  {{!-- Custom scripts per page can be added. --}}
{{/scripts-block}}

跟head-block一樣，我們?cè)趆ero和scripts部分都用了Handlebars partial blocks。在同一套模板有不同的內(nèi)容和scripts的時(shí)候，顯得更加靈活。

footer部分我們又用了Handlebars partial block，不同的是我們用了{{> includes/footer }}基本partial來指定默認(rèn)內(nèi)容。

當(dāng)footer-block沒有被傳入內(nèi)容時(shí)就會(huì)渲染默認(rèn)內(nèi)容。所有代碼中，我們都用的Handlebars注釋(注：這些注釋不會(huì)被渲染到HTML中，如果你用HTML注釋就會(huì)被渲染到HTML中，因?yàn)閜artial block中所有內(nèi)容都會(huì)被渲染)。

拼圖的下一部分就是page partial。我們也用到了Handlebars partial blocks，同時(shí)還有Handlebars inline partials，下面是pages/page-one.hbs的示例：

{{!-- pages/page-one.hbs --}}

{{#> layouts/base title="Page One" }}

  {{#*inline "hero-block"}}
    {{> includes/hero
      hero-src="img/hero-1.png"
      hero-alt="Hero 1 alt title"
    }}
  {{/inline}}

{{/layouts/base}}

同樣拆開來看看：

{{#> layouts/base title="Page One" }}
  ...
{{/layouts/base}}

這里又用到了Handlebars partial block。但是這次，我們用它來繼承layouts/base（注：就跟handlebars-layouts {{#extend}} helper一樣），同時(shí)設(shè)置了page的title（注：用到了partial 參數(shù)特性）。

{{#*inline "hero-block"}}
  ...
{{/inline}}

這是我們第一次用到Handlebars inline partial。這個(gè)inline partial被傳入layouts/base然后被其中的hero-block注入（注：用法就跟 handlebars-layouts 的 {{#content}} helper 一樣）。

{{> includes/hero
  hero-src="http://fpoimg.com/500x200"
  hero-alt="Hero 1 alt title"
}}

最后我們引入indludes/hero基本partial（注：就跟handlebars-layouts {{#embed}} helper一樣）。

includes/*.hbs可以被layouts 和 pages引用。既然都用到了，那就看看大概是什么樣子的：

{{!-- includes/hero.hbs --}}


  

沒什么開創(chuàng)性的東西，只是簡(jiǎn)單地渲染傳入的hero-src 和 hero-alt（注：可以改進(jìn)的地方：用{{#if}}{{else}}來判斷參數(shù)是否為空）。

再看看includes/footer.hbs：

{{!-- includes/footer.hbs --}}

This is some default footer content.

沒啥特別的，這就是layouts/base中footer的默認(rèn)內(nèi)容。

來概括一下所有東西。

充當(dāng)基礎(chǔ)layout文件

使用partial blocks定義默認(rèn)和動(dòng)態(tài)內(nèi)容

充當(dāng)page文件

使用partial block來繼承基本layout

使用inline partials填充內(nèi)容到layout中的 partial blocks

partials可以被 layouts 或 pages 引用

可以在partial block或inline partial中使用

然后就是最后渲染出的page-one.html文件，看起來就是這樣：

讓我們?cè)僭囋囀褂猛粋€(gè)layout，但改一些東西，就叫它pages/page-two.hbs好了：

{{!-- pages/page-two.hbs --}}

{{#> layouts/base title="Page Two" }}

  {{!-- Let"s add a second stylesheet for this layout. --}}
  {{#*inline "head-block"}}
    
  {{/inline}}

  {{!-- Let"s change the hero image for this layout. --}}
  {{#*inline "hero-block"}}
    {{> includes/hero
      hero-src="http://fpoimg.com/400x400"
      hero-alt="Hero 2 alt title"
    }}
  {{/inline}}

  {{!-- Let"s override the "footer-block" content. --}}
  {{#*inline "footer-block"}}
    
We are now overriding the default "footer-block" content with this content.
  {{/inline}}

  {{!-- Let"s add a script for this layout. --}}
  {{#*inline "scripts-block"}}
    
  {{/inline}}

{{/layouts/base}}

渲染出來就是這樣：

這樣我們就用同一個(gè)layout渲染出了兩個(gè)不同的頁面。

我們用Handlebars 的partial blocks, inline partials, basic partials 和partial parameters模擬出了handlebars-layouts的{{#extend}, {{#embed}}, {{#block}} 和 {{#content}} helpers。

這是一次有趣的嘗試，讓我更好地理解了Handlebars partials。注意在不同的項(xiàng)目中，我們必須先評(píng)估庫提供的特性，有哪些是需要的，哪些是不需要的，沒有一個(gè)完美的解決方案（注：有些特性是無法模擬的，比如 {{#content}} 的 append 和 prepend，又比如content作subexpression時(shí)，用conditonal blocks 檢查content是否為空）。

如果你想要了解更多，可以看看這個(gè)項(xiàng)目，試試各種組合，看看能不能挖掘出更多的Handlebars partials的潛力。