Folks,
Objective
I would like to have internal links show the target note’s title
property if an alias or display text is not defined.
So for example, given note1.md
is a file with the property “title
” defined:
---
title: >
This is the Note's Title!
---
Hello, world.
I would like to see:
Source | Rendered |
---|---|
[[path/to/folder/note1.md|a link to the note]] |
a link to the note |
[[path/to/folder/note1.md]] |
This is the Note’s Title! |
If test1.md
is:
---
title: Not All Who Wander Are Lost
---
Another note.
Source:
Rendered:
I figured out a way to do those with the fantastic Supercharged Links plugin, which I would like to share here.
Honestly, the plugin is so well designed and authored (thanks @Mat!), that most of it is very straightforward … EXCEPT detecting whether or not the link has any display text or alias given.
Track the Property
First, set up the plugin to track the property, “title
” (or whatever you want):
Add the CSS Snippet
Thanks the supercharged plugin magic, all we need to do is add a few lines of CSS:
/* The following two blocks hide the link primary text
* and swap in the title if the target not
* has a ``title`` property.
*/
/* In reading view, hide link content */
.markdown-reading-view .data-link-text[data-link-title]
{
font-size: 0px;
visibility: hidden;
font-weight: bold;
}
/* In reading view, show linked title */
.markdown-reading-view .data-link-text[data-link-title]::before
{
font-size: 16px;
content: "🖧 " attr(data-link-title);
visibility: visible;
}
/* The following two blocks reverses the above if the link
* has a display or alias attribute: ``[[link-path|display-text]]``.
* From the inspector, it seems that any link with a display text
* also has the following attributes set: ``data-tooltip-position``
* and ``aria-label``.
*
* It seems to work?
*
*/
/* In reading view, if there is aria-label/ tool-tip show normal link text */
/* Is this robust? non-empty tooltip means display / alias is given? */
.markdown-reading-view .data-link-text[aria-label]
{
/* content: attr(data-link-title) !important; */
/* font-size: 16px !important; */
visibility: visible !important;
font-size: 16px;
}
/* In reading view, if there is aria-label/ tool-tip hide title */
/* Is this robust? non-empty tooltip means display / alias is given? */
.markdown-reading-view .data-link-text[aria-labe]::before
{
content: none;
}
Remarks
-
The property name can, of course, be changed, and we can get creative/fancy with the rendering as desired.
-
I’ve set it to only do the magic in reading mode. I find it too confusing to use in editor/source mode.
-
I’m confident that the title being swapped in when we want it (i.e., if the alias/display is not given). However, I’m not so sure about the other way. I’m not sure how reliable is the use of the attributes
aria-label
(ordata-tooltip-position
) etc.? I don’t think that this is the design/purpose and I may be abusing it.