Foundation：链接中的根变量不适用于子目录中的页面

Question

在我正在处理的 Foundation 站点上，导航部分中有一个下拉顶部栏，它从 src/data 中的几个 YML 文件（每个下拉类别一个）填充其 links。每个条目看起来像这样：

link:
  text: "Example Link"
  url:  "beta/page2.html"
  external: false

生成每个菜单项的部分如下：

{{#each category}}
    <li><a href="{{#unless external}}{{root}}{{/unless}}{{url}}" {{#if external}}target="_blank"{{/if}}>{{text}}</a></li>
{{/each}}

如果 external 为 false，目标是 link 相对于站点的根目录，如果 external 为 true，则按原样使用（并打开一个新选项卡）。

问题是当我导航的页面位于子目录中时，内部 links 似乎无法正确生成。例如，如果我在 example.com/alpha/page1.html，上面的菜单 link 指向 example.com/alpha/beta/page2.html 而不是 example.com/beta/page2.html。

如何更改我的代码以正确生成页面的 link？

Answer 1

我想通了这个问题。在 {{#each}} 块内，Handlebars 上下文发生变化，使得像 {{root}} 这样的变量只能通过父上下文访问。可以通过将 {{root}} 替换为 {{../root}}.

来解决此问题

来自Handlebars documentation：

The exact value that ../ will resolve to varies based on the helper that is calling the block. Using ../ is only necessary when context changes, so children of helpers such as each would require the use of ../ while children of helpers such as if do not.

Foundation：链接中的根变量不适用于子目录中的页面

Foundation: Root variable in links not working for pages in subdirectories

handlebars.js

zurb-foundation