Move backlinks from sidepanel into the document section (as in Roam)

is it just me or is HTML broken in preview mode in v0.6.7 ?

@mrjackphil’s original code no longer works for me… I can’t click the button to trigger the function.

That’s fine. There is no way to inject JS from notes. That was made because of security reasons.

1 Like

Has anybody found a suitable solution to this issue in 0.7+ already? I’m using Andy v2 and find it quite unsatisfying to only have the backlink panel below the very first panel.

I’m currently having the left sidebar open all the time with the backlink panel attached but find this quite unsatisfying. My issues with this are:

  • only one backlink view at a time
  • backlinks always visible, not only if scrolled down all the way

My favoured experience by far would still be the Roam-like backlink section per document at the very bottom.

Maybe I do not understand it correctly but you can drag-and-drop the backlinks panel to be under the current note right? If it is only the placement of the backlinks you are concerned about. That way you can hide both sidebars.

JeRoen

Before the html scrubber was added a couple if iterations ago @Kognise had a way of appending Backlinks to the bottom of a page/doc. I miss that.

I’m usually run this snippet

(function() {
	const backlinks = document.querySelector('.backlink-pane')
	const doc = document.querySelector('.mod-root .CodeMirror-lines');
	doc.appendChild(backlinks);
})()

in a console (which could be opened using Ctrl+Shift+I

:warning: But be careful. It’s a hacky way which can break your experience with obsidian and cause unpredictable behavior.

This will bring backlinks section at the bottom of the root document only. You can restore Obsidian’s default behavior by refreshing the page (using Ctrl+R)

6 Likes

Love it :pray::pray::pray:

Great! So far the best approximation to how Roam works*. Any idea on how to make this piece of code run automatically every time I open Obsidian?

( * yeah, I get that Obsidian doesn’t want to copy Roam just for the sake of it, but I truly think Roam FOR NOW handles backlinks better, while Obsidian is WAY BETTER in all the other fronts - that’s why I’m here, although I got a Roam believer plan as a gift.)

1 Like

What platform(s) are you on?

Mac OS X.

Just tweaked @mrjackphil original code to include buttons from the backlinks panel, since they are useful to me:

(function() {
	const backlinks = document.querySelector('div[data-type="backlink"] > .view-content')
	const doc = document.querySelector('.mod-root .CodeMirror-lines');

    backlinks.setAttribute("style", "margin-top: 50px;");

	doc.appendChild(backlinks);
})()

This is the end result of my editor panel (using the “clutter free markdown” custom css altogether):

I’m close to the perfect setup for my personal use case. The only thing missing is more/better context for backlinks but I can totally live with that.

As long as I have backlinks easily spottable, I don’t actually mind about the need to click on them to get context.

Next step is figure out how to make this piece of code run by itself :slight_smile:

4 Likes

I would love to have this (back again), but I get this error…

})()

Uncaught TypeError: Cannot read property ‘setAttribute’ of null at :5:15 at :8:3

Any idea what I can do about it?

I don’t know enough about JavaScript and JavaScript for Automation to know how to set this up offhand, but Keyboard Maestro would provide an easy way of running JXA whenever you activate Obsidian:
https://wiki.keyboardmaestro.com/action/Execute_a_JavaScript_For_Automation

Any idea what I can do about it?

You need to have the backlinks panel activated somewhere, otherwise the JS snipped does not find it. I have it in the collapsed sidebar on the right. Do a F5 or CMD+R before running the code just to make sure.

Boom! Did the trick, nicely nice. Thanks @mark1nhu

1 Like

Just wanted to say this is insane.
Wow.

I played around with the CSS a bit to make it a bit more inline with the document. Looks even better. The CSS below is smart enough to apply this only to this hacked view, so if you want to keep your regular styles for sidebar viewing you can

Cheers

.CodeMirror-lines > .view-content > .backlink-pane > .side-dock-collapsible-section-header {
    padding-left: 0px;
    font-size: 20px;
    font-weight: 700;
}
.CodeMirror-lines >.view-content > .backlink-pane .search-result-container {
  padding: 0px !important;
}

.CodeMirror-lines >.view-content > .nav-header > .nav-buttons-container {
  position: relative;
  float: right;
}

.CodeMirror-lines > .view-content > .backlink-pane {
  clear: both;
}

3 Likes

A post was split to a new topic: Need help formatting button CSS in Obsidian

Did anybody of you find a way to enable this in multiple panels? I’m on Andy v2 and would love to have this hacky workaround under every note.

Would appreciate any hints!

1 Like

Do the backlinks disappear for anyone else after entering the graph view?

hey guys,

Does this still work for version 0.9.7 I’m aware the javascript version is no longer working

I tried the css method, but pressing the button in preview mode doesn’t do anything for editing mode in my case.

Thanks