Jak wygenerować nawigację w Middleman?

Question

Po prostu przyzwyczajam się do Middleman i ogólnie do Rubiego. Jaki jest najlepszy sposób na wygenerowanie nawigacji z aktywnymi stanami?

Answer 1

W bieżącej wersji MM (2.x, chociaż 3.0 jest blisko), możesz to zrobić, dodając następujące dodatki do config.rb i kilka poprawek w pliku nav (s). Oto a working version w razie zostawiam niektóre krytyczne bitów:

najpierw utworzyć funkcję pomocniczą:

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

Następnie w nav bar include file (w tym przypadku jest to plik haml) można użyć nav_active pomocnika jako następująco:

#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') 

wynik netto jest to, aby dodać klasę „aktywny” do łącza w pasku nawigacyjnym, gdy strona jest budynek zbudowany na tej stronie. To znaczy. jeśli strona jest plikiem o nazwie "index", wówczas @page_id będzie "index" i ten link będzie miał aktywny motyw.

Aby dokończyć przykład, oto fragment z scss style partial który definiuje aktywny:

&.Active { 
    font-weight: bold; 
} 

W nowszej wersji pliku nagłówka, faktycznie usunięte odnośnik gdy na aktywnej stronie. Wygląda to mniej więcej tak - które mogłyby wyraźnie uporządkowany, ale FWIW: D:

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

pamiętać, że wszystkie t („rzeczy”) ma do czynienia z funkcjami tłumaczeń i18n. Możesz to zignorować. Nie chcę, aby przykład składniowy był nieprawidłowy, próbując je usunąć.

Mam nadzieję, że to pomoże - zobacz także forum pod adresem http://forum.middlemanapp.com/.

Answer 2

Oto nowy klejnot do zaznaczania aktualnego ogniwo pośrednika z aria-current (które można następnie wykorzystać do stylu off): https://github.com/thoughtbot/middleman-aria_current