Làm cách nào để tạo điều hướng trong Middleman?

Question

Tôi chỉ quen với Middleman và Ruby nói chung. Cách tốt nhất để tạo điều hướng với trạng thái hoạt động là gì?

Answer 1

Trong phiên bản MM hiện tại (2.x, mặc dù 3.0 đang đóng), bạn có thể thực hiện với các bổ sung sau đây config.rb và một số chỉnh sửa trong (các) tệp điều hướng của bạn. Dưới đây là a working version trong trường hợp tôi bỏ qua một số bit quan trọng:

Đầu tiên tạo một hàm helper:

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

Sau đó, trong nav bar include file (trong trường hợp này là một tập tin Haml của nó), bạn có thể sử dụng nav_active helper như sau:

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

kết quả thực của việc này là thêm lớp "Active" để liên kết trong thanh nav khi trang đang xây dựng xây dựng cho trang này. I E. nếu trang là một tệp được gọi là "chỉ mục" thì @page_id sẽ là "chỉ mục" và liên kết đó sẽ có chủ đề Hoạt động.

Để hoàn thành ví dụ, đây là đoạn trích từ scss style partial định nghĩa tích cực:

&.Active { 
    font-weight: bold; 
} 

Trong một phiên bản sau này của tập tin header, chúng tôi thực sự loại bỏ các liên kết khi trên trang hoạt động. Nó trông giống như sau - mà rõ ràng có thể được sắp xếp gọn gàng lên, nhưng FWIW: D:

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

Lưu ý rằng tất cả các t ('thứ') đã làm với chức năng dịch cho i18n. Bạn có thể bỏ qua điều đó. Tôi không muốn làm cho ví dụ về cú pháp sai bằng cách cố gắng loại bỏ chúng.

Hy vọng điều này sẽ giúp - cũng xem diễn đàn tại http://forum.middlemanapp.com/.

Answer 2

Dưới đây là một viên ngọc mới để đánh dấu lên một liên kết hiện tại trung gian với aria-current (mà sau đó bạn có thể sử dụng để phong cách tắt của): https://github.com/thoughtbot/middleman-aria_current