循环遍历 yeoman 中的子目录并进行组装

Question

我是 Yeoman 和 Assemble 的新手，我正在尝试构建带有子目录的导航结构。我可以通过以下方式遍历模板/页面目录中的主要页面：

{{#each pages}}
   <li{{#if this.isCurrentPage}} class="active"{{/if}}>
      <a href="{{relative dest this.dest}}">{{ data.title }}</a>
   </li>
{{/each}}

当然，这不包括 pages 目录中的子目录。这就是我的 Gruntfile 的 assemble 任务的样子：

assemble: {
  pages: {
    options: {
      flatten: true,
      assets: '<%= config.dist %>/assets/',
      layout: '<%= config.src %>/templates/layouts/default.hbs',
      data: '<%= config.src %>/data/*.{json,yml}',
      partials: '<%= config.src %>/templates/partials/*.hbs',
      plugins: ['assemble-contrib-permalinks'],
    },
    files: {
      '<%= config.dist %>/': ['<%= config.src %>/templates/pages/**/*.hbs']
    }
  }
}

我想要的是最终得到一个嵌套列表，该列表将在子目录中公开页面。在循环中是否有任何直接的方法可以做到这一点，或者我需要考虑硬编码吗？

Answer 1

您需要从选项中删除 flatten: true 并修改您的 pages.files:

files: [
    { expand: true, cwd: '<%= config.src %>/templates/pages', src: ['**/*.hbs'], dest: '<%= config.dist %>' }
]

由于您使用的是永久链接插件，因此只需在您的 pages.option 末尾添加：

plugins: ['assemble-contrib-permalinks'],
permalinks: {
    preset: 'pretty'
},

现在，您的导航应该如下所示：

{{#each pages}}
<li{{#if this.isCurrentPage}} class="active"{{/if}}>
  <a href="{{basename}}/index.html">{{ data.title }}</a>
</li>
{{/each}}