Output link to "parent page"?

Question

I have a collection _colletion. In there is a file _collection/path/topic.md and a folder _collection/path/topic/ that includes lots of .md files with content. The permalinks for these files are /path/topic and /path/topic/file-x - so a parent page with a folder with the same name with multiple random pages in it.

Now I want to output a link to /path/topic in all these .md files with the title of topic.md as link text:

---
title: This is the page title defined in topic.md
---

should become <a href="/path/topic">This is the page title defined in topic.md</a>

How do I do that most easily?

Can I somehow access the folder name topic of the .md files and use this to read topic.md and output it's title and also generate a link to it?

Answer 1

During discussion in the comments on my question and the other answers I noticed that what I wanted to build was actually a very common thing: A breadcrumb navigation! Just a very "small" one, with only one level.

With this newfound knowledge I could google "breadcrumb" plugins for Jekyll:

This solution uses the path of the page to extract the "crumbs":

• https://www.mikestowe.com/blog/2017/08/adding-breadcrumbs-in-jekyll.php

It uses the folder name for the link text.

Another similar implementation:

• https://stackoverflow.com/a/9633517/252627

Another one:

• https://stackoverflow.com/a/37448941/252627

So no title link text in all of these.

---

This solution actually reads the page title, but can also read breadcrumb frontmatter from the pages, and uses these as link text:

• https://github.com/comsysto/jekyll-breadcrumb-for-github-pages/
• https://comsysto.com/blog-post/automatic-breadcrumb-for-jekyll-on-github-pages
• https://gist.github.com/csgruenebe/8f7beef9858c1b8625d6

This one might be a valid solution.

---

There are also real plugins (that unfortunately don't work with Github Pages):

• https://github.com/git-no/jekyll-breadcrumbs

Answer 2

My current manual "solution" (or workaround):

Add a parent entry to the frontmatter of all pages in /topic/ that contains the title and relative URL for the topic.md:

parent: ['Topic Title', '../topic']

In the template of the pages:

{% if page.parent %}
  <p>« <a href="{{ page.parent[1] }}">{{ page.parent[0] }}</a></p>
{% endif %}

Works, but of course duplicates this information n times and has to be maintained manually.

Answer 3

How about this (option 1)?

{% assign pageurl_array = page.url | split: "/" %}
{% assign path = pageurl_array[0] %}
{% assign topic = pageurl_array[1] %}
<p>« <a href="{{ path }}/{{ topic }}/{{ topic }}.html">
  {{ topic | capitalize | replace: "-", " " }}
</a></p>

If you do not mind crazy build times, do this (option 2):

{% assign pageurl_array = page.url | split: "/" %}
{% assign path = pageurl_array[0] %}
{% assign topic = pageurl_array[1] %}
{% capture parent_url %}{{ path }}/{{ topic }}/{{ topic }}.html{% endcapture %}
<p>« <a href="{{ parent_url }}">
  {% for i in site.pages %}
    {% if i.url == parent_url %}
      {{ i.title }}
    {% endif %}
  {% endfor %}
</a></p>

I would go for the first option (much faster) and use this javascript to get the capitals and special characters right:

$('a').each( function() {
  var str = $(this).html();
  str = str.replace('Topic from url', 'Topic from URL');
  $(this).html(str);
});

I admit that the javascript solution is far from pretty, but it solves the build time problem pretty well.

Note that Jekyll is pretty slow. I would advice you to dig into Hugo if you require faster build times.

Answer 4

My solution, based on JoostS code:

{% assign  url = page.url | remove:'.html' | split: "/"  %}
{% assign path = url | pop %}
{% if path.size == 1 %}
    <a class="back" href="/home/">home</a>
{% else %}
    <a class="back" href="/{% for dir in path offset: 1 %}{{ dir | append: "/" }}{% endfor %}">{{ path | last }}</a>
{% endif %}```