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

Question

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

Answer 1

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

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

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

Затем в nav bar include file (в этом случае его файл 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') 

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

Чтобы завершить пример, вот выдержка из scss style partial, который определяет активные:

&.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) 

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

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

Answer 2

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