【实用技巧】如何改善笔记的链接编辑体验

缩短过长的链接文本

在 Obsidian 里,你是否被链接文本困扰过?

举个栗子,有时候链接文本会非常非常长:

实时编辑模式下,一旦编辑光标移上去,它就会展开成一大串,非常影响编辑。

如果链接的内容长到跨行了,还会导致你得多按几次「下」键才能跳到原本的下一行文本内容。

像是这样糟糕的体验:
240720_如何改善Markdown笔记的链接编辑体验-img-240801_000029

然而事实上,一旦插入一个链接之后,我几乎很少需要再次编辑它的链接地址
那么有没有办法避免这种干扰的「展开链接」呢?

有的,我在 OB 论坛上找到了这样一个帖子:
How to hide url link in edit mode until hovered on?

这里提供了一段 css,可以自动隐藏链接文本,转而显示成一个 :link: 小图标。
只有当鼠标移上去的时候,才显示原来的链接:
240720_如何改善Markdown笔记的链接编辑体验-img-240801_000539

加上这个 css 之后,体验一下子就舒服多了!

只有在你确实想要看到链接的时候——把鼠标移动上去——它才会显示出来,否则链接再长都只会占据一个 emoji 符号的位置,最大限度的减少链接文本展开缩短带来的干扰!

笔记链接

一不做二不休,我干脆给 Wikilink 的笔记也添加了这个特性!

这样不但看起来清爽了许多,对于带有多个链接的文本编辑也更加友好。

临时禁用链接跳转

有时候我们会需要编辑链接的显示文本,但默认点击链接会直接打开,怎么办呢?

以前我都是先把光标移动到最边上的字符,聚焦到链接,再进行编辑。
但这样就很麻烦,都得小心翼翼的。

直到某次看到了链接美化 这个帖子,里面有一个对链接的处理很有意思!它可以通过 css 来 禁用链接的跳转

于是我也学了过来,在启用这个 css 的情况下,所有链接的跳转功能都会失效,可以随意进行编辑。

效果演示:
240720_如何改善Markdown笔记的链接编辑体验-img-240801_001103

在借由 css 实现的「编辑链接」模式下,可以无所顾忌地直接点击链接进行想要的编辑。
完成之后,再关闭这个 css 即可。

css 文件

/* Moy Link Optimize.css */

/* 点击链接的时候不跳转 */
/* Style Settings 开关 */
/* @settings

name: Moy Link Mods
id: moy-link-mods
settings:
    - 
        id: link-editing-mode
        title: Link Editing Mode
        title.zh: 链接编辑模式
        description: Cancel the link left mouse button click event
        description.zh: 是否取消链接的左键点击功能
        type: class-toggle
        default: true
        addCommand: true
    - 
        id: link-shorten
        title: Link Shorten
        title.zh: 缩短链接
        description: Shorten the link, unless mouse hover
        description.zh: 将链接缩短为 emoji,鼠标经过才完整显示
        type: class-toggle
        default: true
        addCommand: true

*/


.link-editing-mode .cm-link .cm-underline,
.link-editing-mode .cm-hmd-internal-link .cm-underline {
  pointer-events: none;
}


/* 隐藏过长的链接网址部分 */
/* Src: https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827 */
/* Hide the URL text and show the symbol */
.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
}

/* Display a symbol after the URL */
.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗'; /* Replace with your desired symbol */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
}

/* Ensure the URL text is visible when the cursor is over it */
.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
    font-size: inherit;
}

/* Hide the symbol when the cursor is over the URL */
.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::after {
    content: '';
}


/* 修改 wikilink 格式的 */
/* Modified by Moy */
.link-shorten .cm-hmd-internal-link.cm-link-has-alias {
    font-size: 0;
}

.link-shorten .cm-hmd-internal-link.cm-link-has-alias:hover {
    font-size: inherit;
}

.link-shorten .cm-hmd-internal-link.cm-link-has-alias:not(.cm-formatting)::after {
    content: '📜'; /* Replace with your desired symbol 📄 */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
}

也可以直接前往这里下载:Obsidian CSS: Optimize the link editing experience
(如果有更新也会放在 Gist 里)

快速切换功能开关

如果你安装了 Style Settings 插件,可以在设置界面里快速切换这两个功能的开关:

  • 缩短链接:将链接显示为图标
  • 链接编辑模式:禁用链接的跳转功能

你也可以直接使用 Command 来执行这两个功能的切换:

15 个赞

好用 强推 :+1: :+1:


做了点小修改:

  1. 字体大小问题,和正文不匹配的话可以在 content: '🔗'; 之后加一行,设置emoji的字体大小:
font-size: var(--font-adaptive-normal);
  1. 跨行链接,一移开就消失,需要加个过渡:
    修改前效果:
    7acc235a-a38a-4999-8975-947c52416237
    修改后效果:
    391b05da-7591-4fb3-bed7-876d9f05a630

  2. 显示时,由于font-size变化,行高会突变:

    • line-height设置为0

隐藏长链接部分CSS 代码,点击展开:
/* 隐藏过长的链接网址部分 */
/* Src: https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827 */
/* Hide the URL text and show the symbol */
div.cm-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
    transition: font-size .3s cubic-bezier(1,0,.9,1) !important; 
    transition-delay: 1s!important;
    line-height: 0;
}

/* Display a symbol after the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting)::before {
    content: '🔗'; /* Replace with your desired symbol */
    font-size: var(--font-adaptive-normal);
}

/* Ensure the URL text is visible when the cursor is over it */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
    font-size: inherit;
    transition: font-size .1s !important; 
}

/* Hide the symbol when the cursor is over the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::before {
    /* content: ''; */
}


/* 修改 wikilink 格式的 */
/* Modified by Moy */
.cm-hmd-internal-link.cm-link-has-alias {
    font-size: 0;
    transition: font-size .3s cubic-bezier(1,0,.9,1) !important; 
    transition-delay: 1s!important;
    line-height: 0;
}

.cm-hmd-internal-link.cm-link-has-alias:hover {
    font-size: inherit;
    transition: font-size .1s !important; 
}

.cm-hmd-internal-link.cm-link-has-alias:not(.cm-formatting)::before {
    content: '📜'; /* Replace with your desired symbol 📄 */
    font-size: var(--font-adaptive-normal);
}
4 个赞

感谢!这样确实更丝滑了!
而且 Delay 动画也让需要编辑的时候不会因为鼠标挪动而突然消失,赞!!

#1 引入帖“链接美化”提到 hover 动画效果丢失问题,想了个变通办法,感谢各位。

250109: 更新到我现在使用的版本,示例时延移入 70ms 移出 560ms,仅实时预览缩短链接,以留出源码模式用于管理。默认注释掉点击编辑内链,如需要可取消注释。

20240802_083024

CSS 代码,点击展开
body {
  --link-decoration: none; /*内链下划线*/
  --link-external-decoration: none; /*外链下划线*/
  text-underline-offset: 4.6px; /*下划线与文本间距*/
}

/*点击编辑内链*/
/* .cm-hmd-internal-link > .cm-underline, */
/*点击编辑外链*/
.cm-link > .cm-underline {pointer-events: none;}

/*隐藏链接网址*/
.is-live-preview {
  .cm-line > .cm-string.cm-url:not(.cm-formatting),
  .cm-hmd-internal-link.cm-link-has-alias {
    font-size: 0; transition: font-size;
    &:hover {font-size: inherit; transition-delay: 70ms;}
    &:not(:hover) {transition-delay: 560ms;} /*时延秒数, 可自填*/
    &::after {content: '§'; font-size: var(--font-text-size);}
  }
}
3 个赞

请问能否再设置悬浮的时长, 现在鼠标但凡划过emoji就扩展显示网址部分, 所以是否可能设置成比如悬浮0.5s才扩展显示之类的.

1 个赞

@任尔东西南北风 你找到对应的位置给 :hover 加时延就行了,如果移入和移出要的时延一致也可以整体加时延,不用分开。

#5 代码示范:

20240802_080134

3 个赞

请问能通过css实现, 对含有特定文本的链接内容不自动隐藏么? 比如对于通过使用#:~:text=从而指向特定文本的链接[xxx](<https://zapier.com/blog/perplexity-vs-chatgpt/#:~:text=Perplexity AI vs. ChatGPT at a glance>), 此时就是要看这类链接内容里的摘录部分, 因此对这类链接希望能取消自动隐藏, 而对其它链接仍能保持自动隐藏, 单靠css能做到么?

此外, 当链接内容过长时, 似乎有字数限制而会拆成两块来分别隐藏, 请问能通过css优化成一块么?
recording

  1. 排除特定的文本
    原生可能做不到,你可以用 DynamicHighlights 插件给这类文本添加额外的 css 属性,然后在 css snippets 里通过 .not() 去排除。

  2. 内容过长的拆分可能是 OB 自己的链接渲染问题

有时候想编辑长链接地址,还没编辑完就自动缩回去了,在源代码模式下也看不到完整的长链接地址,请问如何可以实现源代码下完全展示长链接地址?

非常好的提议!

修改了一下,现在只会在 Live Preview 模式下生效,源代码模式下不做处理。

你把所有的 .link-shorten 都替换成 .link-shorten .markdown-source-view.is-live-preview 就可以了!

也可以直接保存下面这个新版:

/* Moy Link Optimize.css */
/* 点击链接的时候不跳转 */
/* 相关帖子:https://forum-zh.obsidian.md/t/topic/38000/6 */

/* 更新时间:2024.11.16 */
/* 版本:1.1  不对编辑模式生效 */



/* Style Settings 开关 */
/* @settings

name: Moy Link Mods
id: moy-link-mods
settings:
    - 
        id: link-editing-mode
        title: Link Editing Mode
        title.zh: 链接编辑模式
        description: Cancel the link left mouse button click event
        description.zh: 是否取消链接的左键点击功能
        type: class-toggle
        default: true
        addCommand: true
    - 
        id: link-shorten
        title: Link Shorten
        title.zh: 缩短链接
        description: Shorten the link, unless mouse hover
        description.zh: 将链接缩短为 emoji,鼠标经过才完整显示
        type: class-toggle
        default: true
        addCommand: true

*/


.link-editing-mode .cm-link .cm-underline:not(:hover),
.link-editing-mode .cm-hmd-internal-link .cm-underline {
  pointer-events: none;
}


/* .markdown-reading-view */

/* 隐藏过长的链接网址部分 */
/* Src: https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827 */
/* Hide the URL text and show the symbol */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
    transition: font-size .2s cubic-bezier(1,0,.9,1) !important; 
    transition-delay: 0.3s !important;
    &::before {
        content: '🔗';
    }
}

/* Display a symbol after the URL */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting)::before {
    content: '🔗'; /* Replace with your desired symbol */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
/*    font-size: var(--font-adaptive-normal);*/
}

/* Ensure the URL text is visible when the cursor is over it */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
    font-size: inherit;
    transition: font-size 0.2s !important;
/*  延迟一会儿再出现   */
    transition-delay: 300ms !important; 
}

/* Hide the symbol when the cursor is over the URL */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::before {
    /* content: ''; */
}


/* 修改 wikilink 格式的 */
/* Modified by Moy */
.link-shorten .markdown-source-view.is-live-preview .cm-hmd-internal-link.cm-link-has-alias {
    font-size: 0;
    &:not(:hover){
        transition: font-size .2s cubic-bezier(1,0,.9,1) !important; 
        transition-delay: 0.3s !important;
    }
    &:hover {
        font-size: inherit;
        transition: font-size 0.2s !important;
        transition-delay: 200ms !important;
    }
}

/*.link-shorten .markdown-source-view.is-live-preview .cm-hmd-internal-link.cm-link-has-alias:hover {
    font-size: inherit;
    transition: font-size 0.1s !important; 
}*/

.link-shorten .markdown-source-view.is-live-preview .cm-hmd-internal-link.cm-link-has-alias:not(.cm-formatting)::before {
    content: '📜'; /* Replace with your desired symbol 📄 */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
/*    font-size: var(--font-adaptive-normal);*/
}

2 个赞

看到了,谢谢更新。我也是使用中发现的。
不过,这次更新有个小问题,不知道是不是只有我遇到。
就是内链、外链的字体颜色变了,不是我主题原来设置的颜色了。虽然不影响使用,但还是提一句。

1 个赞

噢……因为我把自己的整个链接优化 css 放进来了,里面包含一些我自己颜色修改之类的。
楼上那层的脚本更新了,去掉了其他部分,你可以再更新一下

已经用上了,非常好,感谢!

1 个赞

这个css太棒了,我还是从别人推荐的地方才看到的

1 个赞

为啥我的 base64 链接,会显示多个:link:,有办法只显示一个:link:

  1. 需要源代码才能知道是啥情况,我这边没有 base64 嵌入的图片能测试

  2. 这个 CSS 是针对 .cm-url 发挥作用的,如果显示多个图标说明它可能确实被 OB 判断成是多个链接了。这样的话,或许需要添加 nth 之类的语法再做额外限定。

感谢大佬回复,我贴上 base64 的编码,大佬有空可以看看

(data:image/png;base64,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)

感觉有点复杂,不行的话那个也是凑合的


image

确实是被识别成多个元素了。

简单改了一下,替换这几行:

/* 隐藏过长的链接网址部分 */
/* Src: https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827 */
/* Hide the URL text and show the symbol */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting):nth-of-type(n+4) {
    font-size: 0;
    transition: font-size .2s cubic-bezier(1,0,.9,1) !important; 
    transition-delay: 0.3s !important;
    &::before {
        content: '🔗';
    }
}

/* Display a symbol after the URL */
/* .link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-string.cm-url:not(.cm-formatting)::before { */
.link-shorten .markdown-source-view.is-live-preview div.cm-line .cm-url:not(.cm-formatting):nth-of-type(4)::before {
    content: '🔗'; /* Replace with your desired symbol */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
/*    font-size: var(--font-adaptive-normal);*/
}

没太细调,可以先试试看。

好哒,已使用,谢谢大佬