Bidirectional links (similar to Roam Research)

Hi, I was wondering about whether someone has implemented or knows a plugin for Hugo that implements bidirectional linking?

The idea comes from the concept of Digital Gardens paired with what Roam Research does.

This and some other blogs actually implemented this. All of them are Gatsby based and they’re using this Gatsby Theme.

I was wondering whether something similar exists for Hugo as well :slight_smile:


The thing with your question, that makes it unanswered, is, that it doesn’t explain one single thing (and I am meaning that friendly, not annoyed) :wink: Lots of fancy buzz-words and concepts, but no dummy explanation for to uninitialised. I clicked all the links and tried to get behind the idea, but I still don’t know what we (you) are talking about because to me it looks like two (or three) different things.

Bidirectional links sounds like something that started with Trackback/Pingbacks and ended in OEmbeds.

The Digital Gardens thing made most sense to me, I think I might have stumbled upon it before. I would implement the principal (I understand it as selective presentation of content with a full list behind a link) with, ehm, taxonomies in Hugo (like a tag featured). I understand that there are instances of this principle where people let the incoming links (aka Analytics) define what to present in the selection of articles.

I am pretty sure something like this does not exist yet in the Hugoverse.

Maybe you can explain what exactly you envision with the most Dummy-proof language and we can collect a list of ideas how to implement it.

Sounds interesting. If that Gatsby theme implemented it, there might be one single commit where they introduce the feature (looks like a lot of it is done via JavaScript). If you find that this might be a first step to re-do the same in Hugo.

1 Like

LOL, re-reading my question I have to admit you’re right :sweat_smile:

So let me try to explain better. The thing I’m most interested in is if there exists something similar to this Gatsby Theme in Hugo land. That Gatsby plugin takes the idea from the “Roam Research” app, allowing you to write your articles and tag words like [[some word]], and if that was used as the alias on some other page, it would automatically create a link to that original site + in additional that original site would also have a list of pages linking to it. That way you get bidirectional linking.

Now why did I mention “Digital Gardens” (and sorry for all the buzzwords)? This kind of bidirectional linking is especially useful there, because it allows for a super easy navigation between pages. But not exclusively.

How do I envision an implementation. Something like

type: 'post'
title: 'How to write a brag document'
  - brag document
  - brag documents

the content...

In some other Hugo page I could then write

title: 'Some other page'

Writing [[brag documents]] is important in order to track your accomplishments,...

What’s expected to happen:

  • the “brag document page” would contain a section “backlinks” containing the “Some other page” page.
  • the “Some other page” would have [[brag documents]] replaced with a link to the “Brag document page”

As an example:

This page has that link reference at the bottom:

And the document linking to it, only has this in their content

You can read more details about that on [[Bringing Bi-Directional Links to Gatsby Gardens]]

Sounds like you want a wiki-nav :wink: I would still do that with a taxonomy… maybe not the main taxonomy but it’s own. Because that enables you to add multiple “link words”. Then add a shortcode that goes through all pages and searches for these links.


article 1:

title: something title 1
- title1
- title 1
- something

text content

article 2:

title: something else

some text {{% textlink slug="title1" %}}

and in the shortcode (sorry, no sample here) you could {{ range .Pages }} and check if they have title1 in their linkage taxonomy.

And if you are very concentrated you can always use Ref which does exactly that with the markdown file name. But you need to make sure that the filename is used only once so Hugo doesn’t get confused.

1 Like

Ohhhh this is very interesting. I’m going to look into this.

and in the shortcode (sorry, no sample here) you could {{ range .Pages }} and check if they have title1 in their linkage taxonomy.

Yeah this sounds like a plan :thinking:

Not sure about Ref, have to look into those. thanks a lot! I’ll post back here once I implemented it

There is a variable that is better than .Pages that I just don’t find right now… It contains all pages. The .Pages is mostly a “paged” collection of pages, not all… I’ll search for it and add it.

Update: there it is, look for .Site.RegularPages!

1 Like

Note that the summary descriptions for ref and relref are wrong.

Example usage in a template:

{{ ref . "about" }}
{{ relref . "about" }}

Both lookup a content page by either a logical name or relative path. The difference is that ref returns an absolute permalink (http://localhost:1313/about/) while relref returns a relative permalink (/about/).

I’ve got a note to submit a PR on this.