sylhare / Type-on-Strap

🎨 Simplistic, responsive jekyll based open source theme
https://sylhare.github.io/Type-on-Strap/
MIT License
813 stars 901 forks source link

External link in the menu #350

Closed Compizfox closed 2 years ago

Compizfox commented 2 years ago

How do I add a menu item to the menu that is a link to an external website as opposed to an internal page? As far as I understand, the menu only sources its content from the pages' front matter.

Sorry in advance if this is a stupid question, Jekyll noob here ;)

sylhare commented 2 years ago

The links in the navigation bar are added automatically based on the pages in the pages folder (with search, tags, portfolio ...).

So you can't just plug an external link there by default. (We could customize the navbar.liquid to display some websites from the config.yml, something that I might look into in the future).

However, If you wish to add a link to an external page, there's a workaround, where you can add a new page which will redirect on load to the external one. For example, adding this github.md in the pages folder, I am able to go to the GitHub repository when clicking on the title in the navbar.

---
layout: page
title: GitHub
permalink: /redirect/
---

### Redirecting to the GitHub page ...

<script type="text/javascript">
    window.location.href = "https://github.com/sylhare/Type-on-Strap"
</script>
Compizfox commented 2 years ago

Thanks, I see.

I already came across the JS redirect method, but it's a hacky workaround imo. I'd really like to have a proper, direct link in the menu.

I'll look into modifying navbar.liquid!

Compizfox commented 2 years ago

For now, I just added this in navbar.liquid, before the existing loop:

        {% for item in site.data.menu %}
            <li class="separator"> | </li>
            <li>
                <a class="clear" aria-label="{{ item.title }}" title="{{ item.title }}" href="{{ item.url}}">
                    {% if item.icon %} <i class="fas {{ item.icon }}" aria-hidden="true"></i>
                    {% else %} {{ item.title }} {% endif%}
                </a>
            </li>
        {% endfor %}

And create a file _data/menu.yml containing a list of menu items (with title and url).

This isn't perfect, as it constrains your external links to be in front (or after) the internal ones, but it's a start.