2017-01-15 17 views
0

Я использую Pug для создания некоторых html-файлов, и у меня есть панель навигации, которая находится в файле partials/nav.pug.Мопс: класс toggle на основе filename

Я хотел бы, когда я бегу:

pug.renderFile('file1.pug', {file: 'file1'}); 
pug.renderFile('file2.pug', {file: 'file2'}); 

Затем в file1.html подам элемент в нав получает активный класс, если вы находитесь на странице /file1.html:

<ul> 
    <li class="active"><a href="">File 1</a></li> 
    <li><a href="">File 2</a></li> 
</ul> 

Тогда в file2.html активный класс находится на втором элементе, если вы находитесь на странице /file2.html.

Вот основное предположение о том, как я думаю, что это может быть сделано (я не знаю, как это будет сделано в МОПС):

ul 
    li(class=#{file} == 'file1.html' ? 'active' : ''): a(href='/file2.html') File 1 
    li(class=#{file} == 'file2.html' ? 'active' : ''): a(href='/file1.html') File 2 

ответ

0

Ну это было в основном то, что я думал, просто необходимо было переместить брекеты и использовать $ перед ними here is the doc describing that:

ul 
    li(class=`${file == 'file1.html' ? 'active' : ''}`): a(href='/file2.html') File 1 
    li(class=`${file == 'file2.html' ? 'active' : ''}`): a(href='/file1.html') File 2