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

Question

昨天我决定加入 Middleman 和 HAML，他们很棒！因为我不想只为一个值创建多个布局，所以我尝试使用 frontmatter 变量 来更改 javascript 片段中的值在布局页面底部。

javascript 代码段包含在 :javascript 过滤器 (here's the reference), that triggers a jQuery plugin. The plugin needs some variables. The variable I want to change in other pages is top. According to the Middleman frontmatter guide page (here's the reference) 中，您只需在布局页面中需要该变量的位置添加 <% current_page.data.top %>。这个用 erb 写的字符串在 = current_page.data.top 中被翻译成 haml 但是当我在浏览器中运行页面时，开发者控制台告诉 SyntaxError: expected expression, got '='.

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

布局页面的底部（代码段所在的位置）如下所示：

/ 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 and in the Filter 部分我阅读了 "Filters can have Ruby code interpolated with #{}.".

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

在我的例子中，片段代码应该是：

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

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

How do I successfully integrate a Middleman frontmatter variable in a javascript snippet in the layout page written in haml?

javascript

haml

preprocessor

middleman

yaml-front-matter