国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Handlebars partials 隱藏的力量

sixleaves / 1720人閱讀

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

一個項目的機會再加上我自己的探索,讓我對Handlebars partials有了更深的理解。事實證明,你可以做得比我了解的更多。

我最近在負責一個小項目,只有很少的靜態頁面。因為太小了,我們最開始沒有使用模板系統。當項目開始往深一層推進時,我們發現把靜態頁面拆分成partials & layout的模板明顯更好。

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

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

我并不是想吐槽handlebars-layouts,我們以后可能還會用到這個項目。但是我想試試只用Handlebars partials來實現一些handlebars-layouts通過helper來實現的一些特性。

花了一些時間來評估項目需求后我問自己:handlebars-layouts helpers提供的哪些特性是我需要的?根據過去的經驗,我列出了如下helpers:

{{#extend}} layouts的能力

{{#embed}} partials的能力

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

列出來后,我開始查Handlebars partials文檔來看看行不行。然后我發現我從來沒有利用到partials的全部潛力,只要做一點小小的努力就可以讓它們實現我的需求。有兩個特性吸引了我:partial blocks和inline partials。

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

Partials基礎

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

基本partials就像這樣:

{{> content-block }}

它會試圖找到一個命名為content-block的partial進行渲染,否則就報錯。

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.

渲染一個partial的默認行為是,如果沒找到就報錯。如果要進行錯誤處理,就要用block的方式來使用。

partial block就像這樣:

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

這樣寫有一個好處,就是當content-block沒有找到時,partial block里面的部分就會被渲染,像上面就會渲染“Default content”。

而inline partial就像這樣:

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

文檔里是這樣說的:

Templates may define block scoped partials via the inline decorator.

通過使用inline修飾符,可以在模板中定義塊級partials。

inline partial允許你臨時創建partials。如果頁面中有一個content-block partial block,然后我們創建了content-block inline partial的話,inline partial中的內容(“My new content”) 就會替換partial block中默認內容。inline partial同樣可以替換基本partials,只是基本partials沒有默認內容而已。

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

目錄結構

我想同時擁有layouts/includes/pages/,目錄結構看起來如下:

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

為了進行渲染使用了Gulp + gulp-compile-handlebars,在htmlgulp任務中把src/pages/*.hbs當成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”和“layout”,本質上都是Handlebars partial,這就是保證可擴展性的關鍵。一旦了解了這個,新世界的大門就打開了。

Layouts, pages 和 includes

再來分別看看每個文件:

Layouts 文件

首先是layouts/base.hbs

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



  
    
      {{#if title}}
        {{title}}
      {{else}}
        Base Page Title
      {{/if}}
    
    
    {{#> head-block}}
      {{!-- Custom  content per page could be added. --}}
    {{/head-block}}
  
  
    {{#> hero-block}}
      {{!-- Hero content goes here. --}}
    {{/hero-block}}

    
{{#> footer-block}} {{!-- The `includes/footer` partial is the default content, but can be overridden. --}} {{> includes/footer }} {{/footer-block}}
{{#> scripts-block}} {{!-- Custom scripts per page can be added. --}} {{/scripts-block}}

有些值得注意的地方,拆開來多帶帶看:


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

引入了一個虛構的main.css。然后設置了head-block,當一個具體的page繼承此layout時在這里傳入中的內容(注:就跟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一樣,我們在hero和scripts部分都用了Handlebars partial blocks。在同一套模板有不同的內容和scripts的時候,顯得更加靈活。

{{#> footer-block}} {{!-- The `includes/footer` partial is the default content, but can be overridden. --}} {{> includes/footer }} {{/footer-block}}

footer部分我們又用了Handlebars partial block,不同的是我們用了{{> includes/footer }}基本partial來指定默認內容。

footer-block沒有被傳入內容時就會渲染默認內容。所有代碼中,我們都用的Handlebars注釋(注:這些注釋不會被渲染到HTML中,如果你用HTML注釋就會被渲染到HTML中,因為partial block中所有內容都會被渲染)。

page 文件

拼圖的下一部分就是page partial。我們也用到了Handlebars partial blocks,同時還有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一樣),同時設置了page的title(注:用到了partial 參數特性)。

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

這是我們第一次用到Handlebars inline partial。這個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 文件

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

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

沒什么開創性的東西,只是簡單地渲染傳入的hero-srchero-alt(注:可以改進的地方:用{{#if}}{{else}}來判斷參數是否為空)。

再看看includes/footer.hbs

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

This is some default footer content.

沒啥特別的,這就是layouts/base中footer的默認內容。

最后成果

來概括一下所有東西。

layouts/base.hbs

充當基礎layout文件

使用partial blocks定義默認和動態內容

pages/page-one.hbs

充當page文件

使用partial block來繼承基本layout

使用inline partials填充內容到layout中的 partial blocks

includes/*.hbs

partials可以被 layouts 或 pages 引用

可以在partial block或inline partial中使用

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





  
    Page One
    
    
  
  
    
    

This is some default footer content.

讓我們再試試使用同一個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}}

渲染出來就是這樣:





  
    Page Two
    
    
    
  
  
    
    

We are now overriding the default "footer-block" content with this content.

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

感謝

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

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

如果你想要了解更多,可以看看這個項目,試試各種組合,看看能不能挖掘出更多的Handlebars partials的潛力。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97736.html

相關文章

  • 如何實現一個腳手架進階版(Vue-cli v2.9學習篇)

    摘要:如果沒有看過之前一篇博客的,或者對的腳手架沒有了解過的同學,推薦先看上一篇如何實現一個簡單的腳手架。它是一個用來構建靜態網站的類庫,也能夠用來對文件進行處理。有任何問題歡迎進行交流。 前言 在之前一篇博客介紹了關于Node腳手架的一些基礎的知識,這篇博客是在之前的基礎上針對在Node中開發腳手架中遇到的問題,如: 終端樣式、交互問題 文件處理問題 通過對Vue-cli 2.9.2的...

    thekingisalwaysluc 評論0 收藏0
  • 用express搭建網站

    摘要:先建個簡單的服務器當然你先得安裝使用,如果這里的代碼復制后運行不了請移步我的下載源碼順手給我個小星星鼓勵哈運行后訪問默認匹配的路由是,多個要使用方法,但是使用了,或者就不能使用到達下一個了是添加路由的方法,忽略大小寫,反斜杠,進行匹配時不 先建個簡單的服務器 當然你先得安裝express npm install express //使用express,如果這里的代碼復制后運行不了請移步...

    Kosmos 評論0 收藏0
  • Handlebars模板部署時發布為預編譯過模板函數

    摘要:靜態模板文件的內容,如模板等,多為字符串,如果直接部署上線,則需要在線上實時編譯,引入的模板引擎也需要包含編譯的部分。如果部署時之前先進行模板預編譯,則模板文件內容為一個預編譯后生成的模板函數。使用進行預編譯,有幾種方式。 靜態模板文件的內容,如 Handlebars模板等,多為字符串,如果直接部署上線,則需要在線上實時編譯,引入的模板引擎也需要包含編譯的部分。 如果部署時之前先進行...

    SnaiLiu 評論0 收藏0
  • Handlebars—semantic template engine

    摘要:維護起來將是我們開發的噩夢。的都是這種的閉合結構的判斷只能判斷和,沒辦法進行這種的邏輯判斷。它的設定就是如此,它認為邏輯判斷的內容不應該出現在模板中。因為的輸出默認轉義,幾乎所有的模板引擎輸出默認都是轉義的,避免攻擊。 概述 剛接觸前端的時候,師傅就給我推薦了Handlebars,自己也蠻喜歡它的語法。到現在,Handlebars都已經更新到3.0.3了,是時候重新過一遍文檔了。 ...

    cyrils 評論0 收藏0
  • 環境搭建以及使用Ember.js創建第一個靜態頁面

    摘要:原文環境搭建以及使用創建第一個靜態頁面本篇將為讀者介紹項目開發環境的搭建,并創建一個靜態頁面。在文件中增加如下內容使用快捷鍵關閉在用命令啟動項目。創建一個模板仍然是使用命令創建模板。 原文:環境搭建以及使用Ember.js創建第一個靜態頁面 本篇將為讀者介紹Ember項目開發環境的搭建,并創建一個靜態頁面。 安裝Ember CLI 本教程使用的是2.4.3版本的Ember CLI工具集...

    pinecone 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<