CODEWITHSUNDEEP
htmlheaderjekyllgithub-pagesstatic-site
user23444194
user23444194

Reputation:

Automatic dynamic header with Jekyll?

I was wondering how to use Jekyll to write in markdown and also have a header that will open new sub menus depending on which file you are on. Preferably this will be done with folders in the directory. (I don’t know a lot of coding, so please make anything extremely easy to understand or implement). A good working example of this would be nchrs.

I tried forking the Anchors (nchrs) repo, but it is already populated and I didn’t understand how to fix it.

Upvotes: 0

Views: 67

Answers (1)

John B
John B

Reputation: 20350

If you take a look at this question/answer you can see how to deal with "the current page": Jekyll - Automatically highlight current tab in menu bar

They assign the current page URL, and compare that to other hardcoded URL's:

{% assign current = page.url | downcase | split: '/' %}

<li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>

Using that information, you could construct something that shows the appropriate sub menu when on a certain path in your site. That might look something like this:

{% assign currentUrl = page.url | downcase %}
{% assign showAboutMenu = currentUrl  | startswith: "/about/" %}

{% if showAboutMenu %}
    <ul class="sub-menu">
        <li><a href="/about/whatever1">...</a></li>
        <li><a href="/about/whatever2">...</a></li>
        <li><a href="/about/whatever3">...</a></li>
        <li><a href="/about/whatever4">...</a></li>
    </ul>
{% endif %}

This is a pretty basic but might make sense if you just want to get it done and your site doesn't have too many menus.

Upvotes: 0

Related Questions