基于nth规则的Handlebars博客模板HTML渲染实现咨询

Hey there! 刚上手Handlebars就捣鼓Bootstrap 4博客模板，思路很清晰嘛～针对你每5篇文章循环不同模板的需求，我给你整理了两种实用方案，都是Handlebars里常用的玩法：

方案一：用内置索引+基础条件判断（快速实现，无需复杂自定义） #

Handlebars的@index变量能拿到当前循环项的索引（从0开始），我们可以通过计算@index + 1得到文章的实际序号，再配合模运算判断它属于哪一组模板。

模板代码 #

{{#each posts}}
  {{!-- 计算当前是第n篇（从1开始计数） --}}
  {{setVar "postNumber" (add @index 1)}}
  {{!-- 计算5篇为一个周期的模值 --}}
  {{setVar "cycleMod" (mod postNumber 5)}}

  {{!-- 第1、6、11...篇：默认模板 --}}
  {{#if (eq cycleMod 1)}}
    <div class="mb-4 post-default">
      <h2 class="h4 font-weight-bold">{{title}}</h2>
      <p class="text-muted">{{excerpt}}</p>
      <a href="{{url}}" class="btn btn-primary">阅读全文</a>
      <!-- 这里放你的默认HTML结构 -->
    </div>
  {{!-- 第2、3、7、8...篇：第二套模板 --}}
  {{else if (or (eq cycleMod 2) (eq cycleMod 3))}}
    <div class="mb-4 row align-items-center post-type-2">
      <div class="col-md-4">
        <img src="{{featuredImage}}" alt="{{title}}" class="img-fluid rounded">
      </div>
      <div class="col-md-8">
        <h3 class="h5 font-weight-bold">{{title}}</h3>
        <small class="text-muted">{{publishDate}}</small>
        <p class="mt-2">{{excerpt}}</p>
        <a href="{{url}}" class="btn btn-outline-primary">查看</a>
      </div>
      <!-- 这里放你的第二套HTML结构 -->
    </div>
  {{!-- 第4、5、9、10...篇：第三套模板 --}}
  {{else if (or (eq cycleMod 4) (eq cycleMod 0))}}
    <div class="mb-4 col-md-6 post-type-3">
      <div class="card h-100">
        <div class="card-body">
          <h4 class="h6 font-weight-bold">{{title}}</h4>
          <p class="card-text small">{{excerpt}}</p>
          <a href="{{url}}" class="card-link">继续阅读</a>
        </div>
        <div class="card-footer text-muted">
          {{publishDate}}
        </div>
      </div>
      <!-- 这里放你的第三套HTML结构 -->
    </div>
  {{/if}}
{{/each}}

配套的小助手实现 #

上面用到的add、mod、eq、setVar属于Handlebars的扩展助手，你需要在JS里注册它们：

// 注册加法助手：计算@index+1得到实际序号
Handlebars.registerHelper('add', function(a, b) {
  return a + b;
});

// 注册模运算助手：判断周期位置
Handlebars.registerHelper('mod', function(a, b) {
  return a % b;
});

// 注册相等判断助手：用于条件判断
Handlebars.registerHelper('eq', function(a, b) {
  return a === b;
});

// 注册变量设置助手：临时存储计算结果
Handlebars.registerHelper('setVar', function(name, value) {
  this[name] = value;
});

方案二：自定义周期分组助手（更优雅，适合复杂场景） #

如果觉得模板里条件判断太繁琐，可以自定义一个助手，直接返回当前文章的分组类型，模板里只需要根据分组渲染对应结构即可。

自定义助手代码 #

Handlebars.registerHelper('getPostGroup', function(index) {
  const postNum = index + 1;
  const mod = postNum % 5;
  
  if (mod === 1) return 'default';
  if (mod === 2 || mod === 3) return 'type2';
  // mod为0时对应第5、10...篇，归到第三组
  if (mod === 4 || mod === 0) return 'type3';
});

简化后的模板代码 #

{{#each posts}}
  {{setVar "group" (getPostGroup @index)}}
  
  {{#if (eq group 'default')}}
    <!-- 第1组模板：和方案一的default结构一致 -->
    <div class="mb-4 post-default">...</div>
  {{else if (eq group 'type2')}}
    <!-- 第2组模板：和方案一的type2结构一致 -->
    <div class="mb-4 row align-items-center post-type-2">...</div>
  {{else if (eq group 'type3')}}
    <!-- 第3组模板：和方案一的type3结构一致 -->
    <div class="mb-4 col-md-6 post-type-3">...</div>
  {{/if}}
{{/each}}

注意事项 #

• 因为是每5篇循环，两种方案都会自动处理超过5篇的情况（第6篇会回到默认模板，以此类推）
• 模板里的Bootstrap 4类（比如row、col-md-*、card）可以直接保留，和Handlebars的渲染逻辑完全兼容
• 如果你的项目已经引入了handlebars-helpers这类扩展库，那add、mod、eq这些助手可以直接用，不用自己写

内容的提问来源于stack exchange，提问作者brewmeisterbean