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

经验分享
, ,
11

非常好的提议！

修改了一下，现在只会在 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);*/
}
3 个赞