Strip url to 1 word in Jekyll

Question

I am building a Jekyll blog, and I have come across an issue with permalinks.

My permalinks to blog posts are set like this in _config.yml:

permalink: /:page/:categories/:title

It outputs like this when navigating to a blog post:

http://localhost:4000/blog/travel/netherlands-trip-prequesites/

I have some static pages in the site: Blog, Travel

The variable page.url outputs this url: /blog/travel/netherlands-trip-prequesites

The code my navigation bar uses to highlight the current page (giving it an "active" class):

          {% assign url = page.url|remove:'index.html' %}
          {% for nav in site.navigation %}
            {% if nav.href == url %}
              <li class="active"><a href="{{nav.href}}">{{nav.name}}</a></li>
            {% else %}
              <li><a href="{{nav.href}}">{{nav.name}}</a></li>
            {% endif %}
          {%endfor%}

It works great when navigating to static pages, however when I click a blog post it doesn't highlight the correct static page. (ex.: If i navigate to a blog post with the url /blog/smth/title it should automatically highlight "Blog" in my navigation. When I navigate to /travel/smth/title it should highlight "Travel")

What I'd like to do is to strip down the output of page.url to its first part. For example I'd like to stip the following output

/blog/travel/netherlands-trip-prequesites

down to

/blog/

Why? So I can use it to check which static page it belongs to and highlight it accordigly.

Answer 1

I managed to solve it with three filters:

{{ page.url | replace:'/',' ' | truncatewords: 1 | remove:'...' }}

page.url outputs: /page/cat/title, then replace removes the forward slashes producing: page cat title. truncatewords truncates the string down to one word, producing: page... (for some reason three dots gets inserted after the remaining word). After all this I only needed to remove those dots with remove and voilá, my final string: page.

Hope this helps someone.

Answer 2

The easiest way is to use split:

{{ page.url | split:'/' | first }}

That will give you the URL content up to the first / character.

Answer 3

The answer provided by PeterInvincible was almost perfect, however, there's no need to get piping to remove involved...

The following also will produce desired output

{{ page.url | replace:'/',' ' | truncatewords: 1,"" }}

And to save it to a variable use capture redirection

 {{ capture url_base }}{{ page.url | replace:'/',' ' | truncatewords: 1,"" }}{{ endcapture }}

Which can be called via {{url_base}} or mixed with other processing calls.

Also for file paths instead of URLs page.dir works well if you're not using permalink settings for layout, check the gh-pages branch (specifically _includes/nav_gen.html for functional, though rough'round the edges, example) for hosted examples of similar code examples related to liquid syntax and other magic.

Edits & Updates

The above linked script is now live/mostly-working/modular and auto-serving parsed sub-directories viewed currently at the related https://s0ands0.github.io/Perinoid_Pipes/ project site providing examples of recursive parsing of directories. Including and modding for nearly any theme should be possible just check the commented section at the top for currently recognized commands that maybe passed at inclusion call... on that note of inclusion and modularization here's how to turn the above example code for directory parsing into a function

{% comment %}
    # Save this to _include/dir_path_by_numbers.html
    # import with the following assigning arguments if needed
    # {% include dir_path_by_numbers.html directory_argument_path="blog" directory_argument_depth=1 %}
{% endcomment %}
{% assign default_arg_directory_path = page.url %}
{% assign default_arg_directory_depth = 1 %}
{% if directory_argument_path %}
    {% assign directory_to_inspect = directory_argument_path %}
{% else %}
    {% assign directory_to_inspect = default_arg_directory_path %}
{% endif %}
{% if directory_argument_depth %}
    {% assign directory_to_inspect_depth = directory_argument_path %}
{% else %}
    {% assign directory_to_inspect_depth = default_arg_directory_depth %}
{% endif %}
{% comment %}
    # Defaults read and assigned now to output results
{% endcomment %}
{{ directory_to_inspect_depth | replace:'/',' ' | truncatewords: directory_to_inspect_depth,"" | remove_first: '/' | replace:' ','/' }}

The above should output directory path lengths of whatever size desired and maybe included as shown previously or if feeling adventurous try what's shown below; though for looping and recursive features look to the linked script for how I've worked around stack size restrictions.

{% capture dir_sub_path %}{{include dir_path_by_numbers.html directory_argument_path="blog" directory_argument_depth=1}}{% endcapture %}

Note above is just speculation, untested, and maybe more buggy than scripts tested and hosted publicly... in other words inspiration.

Answer 4

Simplest way would be using

if page.url contains

example:

<li class="{% if page.url contains '/docs/' %}current{% endif %}">
<a href="/docs/home/">Docs</a>