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

缩短过长的链接文本

在 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 来执行这两个功能的切换:

11 个赞

好用 强推 :+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 动画效果丢失问题,想了个变通办法,感谢各位。

v1.6.7 沙箱测试,示例时延移入 140ms 移出 560ms:

20240802_083024

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

/**References
 - https://forum-zh.obsidian.md/t/topic/11277/5 by @subframe7536
 - https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827
 - https://forum-zh.obsidian.md/t/topic/38000/1 by @Moy
 - https://forum-zh.obsidian.md/t/topic/38000/2 by @Azona77
*/

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

/*隐藏链接网址*/
.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: 140ms;}
  &: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);*/
}

1 个赞

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

1 个赞

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

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

1 个赞