Как я могу создать навигацию в Middleman? - PullRequest
Новая
       2

Как я могу создать навигацию в Middleman?

9 голосов
/ 20 марта 2012

Я просто привыкаю к ​​ Мидлману и Руби в целом. Каков наилучший способ создания навигации с активными состояниями?

Ответы [ 2 ]

9 голосов
/ 20 марта 2012

В текущей версии MM (2.x, хотя версия 3.0 близка), вы можете сделать это со следующими дополнениями к config.rb и некоторыми изменениями в ваших файлах навигации. Вот рабочая версия на случай, если я пропущу некоторые критические биты:

Сначала создайте вспомогательную функцию: 

helpers do
  def nav_active(page)
    @page_id == page ? {:class => "Active"} : {}
  end
end

Затем в навигационной панели включите файл (в данном случае это файл haml), вы можете использовать помощник nav_active следующим образом: 

#HeaderNavigationBar
  %ul
    %li{nav_active("index")}= link_to t('top_navigation.home'), t('paths.index')
    %li{nav_active("pricing")}= link_to t('top_navigation.pricing'), t('paths.pricing')
    %li{nav_active("faq")}= link_to t('top_navigation.faq'), t('paths.faq')

Конечным результатом этого является добавление класса «Active» к ссылке в навигационной панели, когда страница строится для этой страницы. То есть если страница представляет собой файл с именем «index», то @page_id будет «index» и эта ссылка будет иметь активную тему.

Чтобы завершить пример, вот отрывок из частичного стиля scss , который определяет active: 

&.Active {
  font-weight: bold;
}

В более поздней версии файла заголовка мы фактически удалили ссылку, когда были на активной странице. Это выглядит примерно так - что явно можно привести в порядок, но FWIW: D: 

%li{nav_active("index")}
  -if "index" == @page_id
    = t('top_navigation.home')
  -else
    = link_to t('top_navigation.home'), root()
  ... (etc)

Обратите внимание, что все t ('stuff') связано с функциями перевода для i18n. Вы можете игнорировать это. Я не хотел делать синтаксически неправильный пример, пытаясь удалить их.

Надеюсь, это поможет - см. Также форум на http://forum.middlemanapp.com/.

0 голосов
/ 19 марта 2017

Вот новый драгоценный камень для разметки текущей ссылки в Middleman с помощью aria-current (который вы затем можете использовать для стилевого оформления): https://github.com/thoughtbot/middleman-aria_current

...