Stawiając tego bloga, spotkałam się z Jekyll’em po raz pierwszy. Jednak nie byłabym sobą, gdybym nie rozszerzyła templeta jakiego zainstalowałam o własne funkcjonalności. Są to między innymi:
- Ustawienie widoku kategorii i tagów
- Dynamiczne menu - ten wpis właśnie czytasz
- Dodanie opcji “Kopiuj” i oznaczenie kodu dla generowanych fragmentów kodu tzw. highlight
- Tłumaczenie daty z domyślnego języka angielskiego na polski
Do dzieła zatem.
1.Prosty przepis na dynamiczne menu w Jekyll’u
Tutaj śpieszę z wyjaśnieniami, dynamiczne, ponieważ generowane z kodu. Można je zrobić w dwojaki sposób. Możemy ustawić menu w pliku konfiguracyjnym, wiele templetów właśnie tak skonstruowanych widziałam. Wolę jednak sposób z wykorzystaniem katalogu _data i ten też opiszę. Wydaj mi się on bardziej modułowy.
- Jeśli nie mamy w swojej instalacji, tworzymy katalog
_data - W katalogu
_datatworzymy plik o nazwie np.navigation.yml - W
navigation.ymlwpisujemy nasze linki. Poniżej przykład:1 2 3 4 5 6
- name: Strona główna link: - name: O mnie link: o-mnie - name: Szukaj link: search
- Wiecie, że to jest już wszystko ;). Teraz możemy nasze menu wykorzystać w instalacji.
Poniżej podaję przykład generowania menu w templecie. W poniższym przykładzie brane jest pod uwagę czy link menu jest zewnętrzny, czy wewnętrzny oraz zaznaczenie obecnej strony.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav>
{% for item in site.data.navigation %}
<a {% if item.link contains '://' %}
href="{{item.link}}"
{% else %}
href="{{ site.baseurl }}/{{ item.link }}"
{% endif %}
{% if item.target%}
target="{{item.target}}"
{%endif %}
{% assign url = item.link | append:"/" | prepend:"/" %}
{% if page.url == url %}
style="color: #c5c5c5;"
{% endif %}>
{{ item.name }}
</a>
{% endfor %}
</nav>