Remove 1 word url in Jekyll

Question

I am creating a Jekyll blog and I ran into a problem with permalinks.

My permalinks to blog posts are as follows: _config.yml:

permalink: /:page/:categories/:title 

It is displayed this way when you go to a blog post:

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

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

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

The code used by my navigation bar allows me to select the current page (assign 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 through static pages, however when I click on a blog post it does not highlight the correct static page. (for example: if I go to the blog post with url /blog/smth/title , it will automatically highlight “Blog” in my navigation. When I go to /travel/smth/title , it should highlight “Travel”)

What I would like to do is split the output of page.url into its first part. For example, I would like to indicate the following output

 /blog/travel/netherlands-trip-prequesites 

before

 /blog/ 

Why? Therefore, I can use it to check which static page it belongs to and select it accordingly.

Answer 1

I managed to solve this with three filters:

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

page.url outputs: /page/cat/title , then replace removes the forward slashes: page cat title . truncatewords trims a string to one word, producing: page... (for some reason, three dots are inserted after the remaining word). In the end, I needed to remove these points with remove and voilá, my last line: page .

Hope this helps someone.

Answer 2

The easiest way is to use split :

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

This will give you the contents of the URL up to the first character / .

Answer 3

The answer provided by PeterInvincible was almost perfect, however there is no need to connect the pipeline to remove ...

The following will also produce the desired result.

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

And to save it in a variable, use capture redirection

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

which is called via {{url_base}} or mixed with other processing calls.

Also for file paths, instead of page.dir URLs, page.dir works well if you do not use the permalink settings for the layout, check the gh-pages branch (in particular _includes/nav_gen.html for functional, albeit rough edges, example) for hosted examples of similar code examples related to fluid syntax and other magic.

Editing and Updates

The above script now works in real time / basically, it works / modularly and is automatically serviced by parsed subdirectories currently viewed on the corresponding project website https://s0ands0.imtqy.com/Perinoid_Pipes/ , where examples of recursive directory parsing are presented . Inclusion and modification for almost any topic should be possible, just check the comment at the top for currently recognized commands that can be transmitted when the call is turned on ... on this inclusion and modulation note, here is how to include the above code for parsing directory in 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 the directory path length of any desired size and possibly turn on as shown earlier, or if you feel adventurous, try what is shown below; although for looping and recursive functions, see the related script for how I worked on stack size limits.

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

The note above is just speculation, untested and possibly more buggy than proven scripts and public publishing ... in other words, inspiration.

Answer 4

The easiest way is to use

 if page.url contains 

Example:

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