對於partia來說，可以理解為元件化的運用，即將對應的html/js/css進行封裝，然後通過模板引擎直接進行呼叫

1、partial的註冊

1 //可以直接寫在app.js,也可以寫在之前所說的helper裡面，因為是做註冊，所以需要做的是配置化的處理
2 const hbs = require('hbs');//匯入hbs庫，擴充套件handlebars
3 const path = require('path'); // 處理路徑相關
4 
5 // 註冊partial目錄，即以後直接在對應的partials資料夾內去建partial檔案進行呼叫即可
6 hbs.registerPartials(path.join(__dirname, '
 
../views/partials'))

當註冊完畢之後，可以開始寫partial檢視了，以layout模板為例，直接在partials資料夾中建立一個 名為 nav.hbs檔案，然後把一段nav導航欄模組的html寫進nav檔案中，（可以將html中的css樣式直接提取到<style>標籤中來）

 1 <div class="nav">
 2     <div class="left-logo">
 3         <a href="/"><img src="../images/logo-new.png" alt="" style
 
="opacity: 0;"></a>
 4     </div>
 5     <div class="right-view">
 6         <ul class="right-text">
 7             <li class="vip hover-li" style="position: relative;">
 8                 <a href="/vip-course"><span>VIP課
 9               <i class="anticon anticon-plus plus"
 
></i>
10               <i class="anticon anticon-minus minus"></i>
11             </span>
12                 </a>
13                 <div class="menu-second">
14                     <i class="anticon anticon-caret-up caret-up"></i>
15                     <i class="anticon anticon-caret-up caret-up-cover"></i>
16                     <div class="menu-content">
17                         <div style="overflow: hidden; padding: 0px 43px;">
18                             <p class="vip-title">VIP課程</p>
19                             {{#each vipcourses}}
20                                 {{#if (checkEven @index)}}
21                                     <a href="{{url}}">
22                                         <div class="row-course left-course">
23                                             <img class="course-img" src="{{ico}}" alt="">
24                                             <div class="course-text">
25                                                 <p class="course-name">{{name}}</p>
26                                                 <p class="course-describe">{{desc}}</p>
27                                             </div>
28                                         </div>
29                                     </a>
30                                 {{else}}
31                                     <a href="{{url}}">
32                                         <div class="row-course ">
33                                             <img class="course-img" src="{{ico}}" alt="">
34                                             <div class="course-text">
35                                                 <p class="course-name">{{name}}</p>
36                                                 <p class="course-describe">{{desc}}</p>
37                                             </div>
38                                         </div>
39                                     </a>
40                                 {{/if}}
41                             {{/each}}
42                         </div>
43                     </div>
44                 </div>
45             </li>
46             <li><a href="/open-course">公開課</a></li>
47             <li><a href="/study-center">
48                 <img src="../images/grey1.png" class="study-icon-grey">
49                 <img src="../images/blue1.png" class="study-icon-blue">
50                 <div class="text-left">學習中心</div>
51             </a>
52             </li>
53         </ul>
54     </div>
55     <div class="toggle-bar">
56         <img class="bar" src="https://img.kaikeba.com/nav.png" alt="" style="width: 24px; height: 20px; position: absolute; top: 16px; display: block;">
57         <img src="https://img.kaikeba.com/delete.png" alt="" style="width: 20px; height: 20px; position: absolute; top: 16px; display: none;">
58     </div>
59 </div>

提取完畢之後就可以直接在模板引擎中進行引用{{> nav}} 也支援引數的傳遞

1 //往partial中傳遞資料 data （字串、陣列、集合都可以，僅支援單一資料，不支援表示式）
2 {{> nav name=data}}
3 
4 //若需要傳遞多個引數，直接在後面追加即可
5 {{>nav name=data title=jdata}}
6 
7 //在partial中接收該字串
8 {{name}}

2、動態partial

動態partial是指在某些特定的情況下，我們不知道該用哪個partial去做佈局，或者說需要對於頁面引用的partial去做動態化配置與使用；

需要通過撰寫一個相應的helper來進行處理，主要的也就是通過這個helper方法，在partial應用的時候進行動態partial名稱的替換

1 //動態Partial
2 hbs.registerHelper('whichPartial',function (name) {
3     return name;
4 })
5 
6 //頁面中應用  根據不同條件去給navname賦值，以此識別對應的partial
7 {{> (whichPartial navname)}}

3、 塊級部分檢視 partial-block

塊級部分檢視與partial大致類似，但是在應用層面會相對比較靈活，主要有以下幾種用法，對應的語法與partial有點不同，在呼叫的語法主要是{{#> @partial-block}}{{/@partial-block}},與一些常用的html標籤有點類似。

錯誤處理：

//對於partial檢視找不到的情況，可以適用，可以結合動態的partial進行使用
{{#> ooxx}}
   出現錯誤時，您會看到這句話！
 {{#> ooxx}}

使用塊級partial傳遞內容

 1 <!--定義名為win的partial頁面-->
 2 <div class="win">
 3     <div class="win-title">{{title}}</div>    
 4     {{> @partial-block}}
 5 </div>
 6 
 7 //呼叫塊級partial的方法，其中引數的傳遞也是跟partial差不多，可以傳遞多種型別的引數，也可以傳遞多個引數，但引數不能是表示式
 8 {{#> win title="22222"}}
 9      //此段的程式碼表示的是傳遞到以上的 {{> @partial-block}} 的位置
10     <div>這是窗口裡面的內容。。。。。。。。。。。。。</div>
11 {{/win}}

宣告佈局partial

 1 <!-定義命名為layout的partial 對於下面的top foo bar 都可以進行動態的傳遞內容-->
 2 <!--上面容器-->
 3 <div class="top">
 4     {{> top}}
 5 </div>
 6 <!--下面容器-->
 7 <div class="content">
 8     <div class="left">
 9         {{> foo}}
10     </div>
11     <div class="right">
12         {{> bar}}
13     </div>
14 </div>
15 
16 <!--對於佈局型別partial的呼叫->
17 <!--佈局元件-->
18 {{#> layout}}
19     {{#*inline 'top'}} //代表在上面top傳遞的內容
20         這是top
21     {{/inline}}
22     {{#*inline 'foo'}}
23         這是foo
24     {{/inline}}
25     {{#*inline 'bar'}}
26         這是bar
27     {{/inline}}
28 {{/layout}}