javascript - 如何成功地将 Middleman frontmatter 变量集成到用 haml 编写的布局页面中的 javascript 片段中？

Question

昨天我决定加入Middleman和HAML，他们非常棒!由于我不想仅为一个值创建多个布局，因此我尝试使用 frontmatter 变量 来更改布局底部 javascript 代码段 中的值页。

JavaScript 片段包含在 :javascript 中过滤器 ( here's the reference )，触发 jQuery 插件。该插件需要一些变量。我想在其他页面更改的变量是 top 。根据 Middleman frontmatter 指南页面 ( here's the reference )，您只需添加 <% current_page.data.top %>布局页面中您想要该变量的位置。此字符串以 erb 编写，在 = current_page.data.top 中被翻译为 haml。但是当我在浏览器中运行该页面时，开发人员控制台告诉 SyntaxError: expected expression, got '=' .

如何成功地将 Middleman frontmatter 变量集成到用 haml 编写的布局页面中的 javascript 代码段中？

布局页面的底部(代码片段所在的位置)如下所示:

/ content of the layout the page

:javascript
    $('#sidenav').simplerSidebar({
        opener: '#toggle-sidenav',
        top: = current_page.data.top
        animation: {
            easing: 'easeOutQuint'
        },
        sidebar: {
            align: 'right',
            width: 320,
            closingLinks: 'a',
            css: {
                zIndex: 3000
            }
        }
    });

我想要更改的页面如下所示:

---
top: 30
---

/ rest of the page

Answer 1

我自己设法回答了我的问题。我再次更仔细地阅读了Haml reference并在 Filter我读到“过滤器可以使用 #{} 插入 Ruby 代码。”。

基本上，在过滤器下编码时(无论是什么过滤器)，您应该使用这个 #{current_page.data}，而不是使用 Middleman 和 Haml 提供的字符串。

就我而言，片段代码应该是:

:javascript
    $('#sidenav').simplerSidebar({
        opener: '#toggle-sidenav',
        top: #{current_page.data.top},
        animation: {
            easing: 'easeOutQuint'
        },
        sidebar: {
            align: 'right',
            width: 320,
            closingLinks: 'a',
            css: {
                zIndex: 3000
            }
        }
    });