Jak z powodzeniem zintegrować zmienną frontmiter typu Middleman w fragmencie kodu javascript na stronie układu napisanej w Haml? - javascript, haml, preprocessor, middleman, yaml-front-mater

Wczoraj zdecydowałem się wejść Pośrednik i HAML i są niesamowite! Ponieważ nie chcę tworzyć wielu układów tylko dla pewnej wartości, próbowałem użyć a zmienna frontmattera zmienić wartość w fragment javascript u dołu strony układu.

Fragment kodu javascript jest zawijany w :javascript filtr (tutaj jest odniesienie), który uruchamia wtyczkę jQuery. Wtyczka potrzebuje pewnych zmiennych. Zmienna, którą chcę zmienić na innych stronach, to top. Według strony przewodnika po frontmatterach Middlemana (tutaj jest odniesienie), po prostu musisz dodać <% current_page.data.top %> gdzie chcesz tę zmienną na stronie układu. Ten ciąg, napisany w erb jest tłumaczone na Haml w = current_page.data.top ale gdy uruchamiam stronę w przeglądarce, mówi konsola programisty SyntaxError: expected expression, got "=".

Jak z powodzeniem zintegrować zmienną frontmiter typu Middleman w fragmencie kodu javascript na stronie układu napisanej w Haml?

Dolna strona układu (gdzie znajduje się ten fragment) wygląda następująco:

/ 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
}
}
});

strona, którą chcę zmienić wygląda następująco:

---
top: 30
---

/ rest of the page

Odpowiedzi:

Udało mi się samodzielnie odpowiedzieć na moje pytanie. Przeczytałem raz jeszcze i uważniej Odwołanie Haml i w Filtr sekcja Czytałem to "Filtry mogą mieć interpolowany kod Rubinowy z # {}.".

Zasadniczo, podczas kodowania pod filtrem (bez względu na to, jaki jest filtr), zamiast używać łańcuchów dostarczonych przez Middleman i Haml, powinieneś użyć tego #{current_page.data}.

W moim przypadku kod fragmentu powinien wyglądać następująco:

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