[1.0船新版本 CSS 片段系列] 链接美化

不同于之前的花里胡哨,这次比较简单

  1. 换行不会导致动画错位
  2. 内外链接、相应符号颜色设置
  3. 添加前置图标,隐藏外链后置图标
  4. style setting可选在live preview时点击链接进行编辑

链接

详细介绍和片段在 语雀 / flowus

1 个赞

大佬能否实现一下, 内链也带跳转符号(最好是换一个跟外链不一样的), 然后点击链接能直接修改链接名字, 只有点击跳转符号才进行跳转.

css只能实现带个符号,不能缩小点击范围,得写插件

似乎是可以的,blue topaz主题就实现了只有点击符号才能跳转(点击链接直接编辑链接名),但自从v1.0我就回到默认主题加简单css片段了, 倒是这个功能还挺想继续使用的.

试了一下,功能可以实现,但是hover的动画效果会丢失,不在意的话可以加上这个实现

.cm-link .cm-underline,
.cm-hmd-internal-link .cm-underline {
  pointer-events: none;
}
2 个赞

有个小问题,脚注会被识别成外链。就是文末的 [^1]: ,会带外链图标,显示橙色,鼠标上移橙色字体还会被覆盖,导致看不见字。大佬有空改改 :face_holding_back_tears:

screenshot-20221023-004043

修复了一下,脚注现在可以选择颜色了

1 个赞

您好,似乎与Auto Link Title连用时可能会产生这样的问题:


可以看到Auto Link Title包含一些符号例如“_”的时候,一整段话会被识别成多个断开的链接。

我尝试了一下,切换到阅读模式就没有任何问题,只有在编辑模式下才会存在这个问题
image

flowus内已修复

还有十分不推荐得意黑作为阅读字体

关于字体您是如何考虑的?我使用得意黑主要考虑的平常中英文混杂的情况比较多,得意黑的中英文比较和谐,看起来不会有比较突兀的情况。


我是用自己做的 Maple-font/README_CN.md at main · subframe7536/Maple-font · GitHub

3 个赞

wow,感谢您的分享,我两相比较试试看。祝您新年快乐,兔年大吉!

动画效果的颜色条有点偏上,我新建了一个库也是这样,更改了电脑屏幕比例也不行,大佬能帮忙修复一下吗? :cry:

这个片段有些旧了,在我的主题里用了另外更好的实现方式,之后有空会重新整理发布出来

1 个赞

多谢多谢!主题里的确实很棒~ :smiley:

这个代码可以保留 hover 的动画效果,虽然原理有点迷。

.cm-link .cm-underline:not(:hover) /*点击编辑外链*/ {pointer-events: none;}