对于partia来说，可以理解为组件化的运用，即将对应的html/js/css进行封装，然后通过模板引擎直接进行调用
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'))
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>
1 //往partial中传递数据 data （字符串、数组、集合都可以，仅支持单一数据，不支持表达式） 2 {{> nav name=data}} 3 4 //若需要传递多个参数，直接在后面追加即可 5 {{>nav name=data title=jdata}} 6 7 //在partial中接收该字符串 8 {{name}}
动态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)}}
//对于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}}