Używam github do hostowania witryny statycznej i Jekyll do jej generowania.
Mam pasek menu (as <ul>
) i chciałbym, aby <li>
odpowiadający bieżącej stronie miał przypisaną inną klasę do podświetlania CSS.
Więc coś w rodzaju pseudokodu:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
A może nawet wygeneruj całość <ul>
w Jekyll.
Jak można to zrobić przy minimalnych zmianach poza przestępstwem <ul>
?
Odpowiedzi:
Tak, możesz to zrobić.
Aby to osiągnąć, wykorzystamy fakt, że bieżąca strona jest zawsze reprezentowana przez zmienną ciecz:
page
w szablonie, a także, że każdy post / strona ma unikalny identyfikator w swoimpage.url
atrybucie.Oznacza to, że musimy po prostu użyć pętli do zbudowania naszej strony nawigacyjnej, a robiąc to, możemy sprawdzić
page.url
każdy element pętli. Jeśli znajdzie dopasowanie, wie, jak podświetlić ten element. No to ruszamy:Działa to zgodnie z oczekiwaniami. Jednak prawdopodobnie nie chcesz, aby cała strona była na pasku nawigacyjnym. Aby emulować "grupowanie" stron, możesz coś takiego:
Teraz strony można „grupować”. Aby nadać stronie grupę, musisz określić ją na stronach YAML Front Matter:
Wreszcie możesz użyć nowego kodu! Gdziekolwiek potrzebujesz nawigacji w szablonie, po prostu „wywołaj” swój plik nagłówkowy i przekaż mu kilka stron oraz grupę, którą chcesz wyświetlić:
Przykłady
Ta funkcja jest częścią struktury Jekyll-Bootstrap . Możesz zobaczyć dokładną dokumentację opisanego kodu tutaj: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Wreszcie możesz zobaczyć to w akcji w samej witrynie. Wystarczy spojrzeć na nawigację po prawej stronie, a zobaczysz, że bieżąca strona jest podświetlona na zielono: Przykład podświetlonego łącza nawigacyjnego
źródło
jekyll 2.4.0 | Error: The included file '/Users/joelglovier/project/jekyllsite/_includes/pages_list' should exist and should not be a symlink
.html
rozszerzenie do pages_list i zamiast tego dołączyć toMam ochotę na najprostsze wymagania nawigacyjne, wymienione rozwiązania są zbyt skomplikowane. Oto rozwiązanie, które nie obejmuje sprawy przedniej, JavaScript, pętli itp.
Ponieważ mamy dostęp do adresu URL strony, możemy znormalizować i podzielić adres URL oraz przetestować na segmentach, na przykład:
Oczywiście jest to przydatne tylko wtedy, gdy statyczne segmenty zapewniają środki do wytyczenia nawigacji. Coś bardziej skomplikowanego, a będziesz musiał użyć przedniej materii, jak zademonstrował @RobertKenny.
źródło
classs="active"
?.active
, to tak. W powyższej odpowiedzi autor mówi, że klasą do przywołania w jej / jego arkuszu stylów jest.current
. Nie ma sprawy.Podobne do rozwiązania @ ben-foster, ale bez użycia jQuery
Potrzebowałem czegoś prostego, oto co zrobiłem.
W mojej pierwszej sprawie dodałem zmienną o nazwie
active
na przykład
Mam nawigację zawierającą następującą sekcję
U mnie to działa, ponieważ liczba linków w nawigacji jest bardzo wąska.
źródło
Oto moje rozwiązanie, które moim zdaniem jest najlepszym sposobem na wyróżnienie bieżącej strony:
Zdefiniuj listę nawigacji w swoim _config.yml w następujący sposób:
Następnie w pliku _includes / header.html musisz przejrzeć listę w pętli, aby sprawdzić, czy bieżąca strona ( page.url ) przypomina dowolny element listy nawigacyjnej, jeśli tak, po prostu ustaw aktywną klasę i dodaj ją do
<a>
tagu:A ponieważ używasz operatora zawiera zamiast operatora równa się = , nie musisz pisać dodatkowego kodu, aby działał z adresami URL, takimi jak „/ blog / nazwa-posta /” lub „projekty / nazwa-projektu / ” . Więc działa naprawdę dobrze.
PS: Nie zapomnij ustawić zmiennej permalink na swoich stronach.
źródło
/
ponieważ wszystkie adresy URL stron zawierają początkowy ukośnik. Następujące prace:{% for link in site.navigation %} {% assign class = nil %} {% if page.url == link.url %} {% assign class = 'active' %} {% elsif page.url != '/' and page.url contains link.url %} {% assign class = 'active parent' %} {% endif %} <a href="{{link.url}}" class="{{class}}">{{link.title}}</a> {% endfor %}
Aby to osiągnąć, użyłem trochę JavaScript. W menu mam następującą strukturę:
Ten fragment kodu javascript podkreśla aktualną odpowiednią stronę:
źródło
Moje podejście polega na zdefiniowaniu zmiennej niestandardowej w przedniej części strony YAML i umieszczeniu jej w
<body>
elemencie:Moje linki nawigacyjne zawierają identyfikator strony, do której prowadzą:
W kwestii pierwszej strony ustawiamy identyfikator strony:
I na koniec trochę jQuery do ustawienia aktywnego linku:
źródło
Nawigacja w Twojej witrynie powinna być nieuporządkowaną listą. Aby elementy listy rozjaśniły się, gdy są aktywne, poniższy płynny skrypt dodaje do nich klasę „aktywną”. Ta klasa powinna być stylizowana za pomocą CSS. Aby wykryć, który link jest aktywny, skrypt używa wyrażenia „zawiera”, jak widać w poniższym kodzie.
Ten kod jest kompatybilny ze wszystkimi stylami permalinków w Jekyll. Oświadczenie „zawiera” pomyślnie podświetla pierwszą pozycję menu pod następującymi adresami URL:
Źródło: http://jekyllcodex.org/without-plugin/simple-menu/
źródło
Wiele mylących odpowiedzi. Po prostu używam
if
:Odsyłam bezpośrednio do strony i umieszczam ją w klasie, którą chcę
Gotowe. Szybki.
źródło
Używałem
page.path
i wychodziłem z nazwy pliku.źródło
Istnieje już wiele dobrych odpowiedzi.
Spróbuj tego.
Nieznacznie zmieniam powyższe odpowiedzi.
_data/navigation.yaml
Na stronie ->
portfolio.html
(takie same dla wszystkich stron ze względną aktywną nazwą strony)Navigation html part
źródło
jeśli używasz motywu Minima dla jekyll, wystarczy dodać trójnik do atrybutu class w header.html:
pełny fragment:
dodaj to do swojego _config.yml
No i oczywiście twój css:
źródło
Oto metoda jQuery, która robi to samo
źródło