Quorafind / Outliner.MD

https://outliner.md
128 stars 2 forks source link

Style: Suggestions for block embed #38

Closed enneaa closed 1 month ago

enneaa commented 1 month ago

Embedded content definitely needs to be distinguished from the main text, otherwise, users won’t know if they are editing the embedded content or the main text. However, the embedded content doesn’t need to be too different from the main text; it still needs to blend in. Embedded content is essentially a mirror of the original text.

I looked at the embedded content styles used in a few different applications. The most elegant is probably Workflowy. For main text, the unordered list bullets are round, but for embedded content, they are square. Logseq uses a slightly darker background color for embedded content, as does Siyuan Note.

I think there are several ways to distinguish embedded content. One way is to retain a link button that jumps to the original text. This makes it obvious that it’s embedded content. However, this only shows where the embedded content starts, not where it ends. Another way is to add a vertical line to the left or right side of the embedded content. In Obsidian, the native style is to add a vertical line to the left side, while a plugin author provided a style that adds a vertical line to the right side.

嵌入内容肯定是要和正文内容进行区分的,不然用户不知道自己编辑的是嵌入内容还是正文内容。 不过嵌入内容也没必要和正文区分过大,还是要融入到正文中来,嵌入内容相当于原文的镜像。 我看了下用过的几个软件嵌入内容样式。 最优雅的应该是workflowy,如果是正文,大纲前的无序列表的点是圆点,如果是嵌入内容,就是方点。 logseq是给嵌入内容加一个稍深一点的背景色,思源笔记也是。

我感觉要区分嵌入内容,有几种方式。 一是保留跳转到原文的链接按钮,一看就知道这是嵌入,不过仅仅是这样的话,就只知道嵌入内容从哪开始,但不知道从哪介绍。 二是在嵌入内容左侧或右侧加一条竖线。ob原生的是和引用样式一样,在左侧加一条竖线,然后插件作者提供的嵌入样式是在右侧加一条竖线。

Quorafind commented 1 month ago

关于嵌入样式:

对于行内嵌入,roamresearch 和logseq 都采用的是下划线:

Clip_2024-05-22_15-13-17

如果希望背景颜色高亮,可以引用下述的 css:

.internal-embed.is-loaded:has(.markdown-source-view):not(.embedded-part) {
    background: var(--background-secondary);
}

关于下述建议的第一点,悬浮的时候右上角会有对应的链接符号,点击就可以跳转到你这个引用的原文

Clip_2024-05-22_15-09-12

关于下述建议的第二点:

你可以很轻松地将右侧的转移到左侧,只需要将原来写着 right:0 的地方修改成 left: 0 即可,方便你复制的代码:

.internal-embed.is-loaded:not(.embedded-part):has(.markdown-source-view):before {
    content: ' ';
    width: 2px;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0; 
    background-color: var(--color-accent);
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, opacity 200ms ease-in-out;
}

.internal-embed.is-loaded:not(.embedded-part):has(.markdown-source-view):hover:before {
    width: 3px;
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, opacity 200ms ease-in-out;
}

后续会将上述内容选摘到文档,感谢建议

enneaa commented 1 month ago

开发者很给力啊👻,目前来看加背景颜色和加竖线效果都不错。 整理一下,嵌入样式有以下几种,供大家参考。

  1. 大纲列表圆点变方点: Screenshot_20240522-161936_图库

  2. 嵌入部分稍深一点背景色: Screenshot_20240522-154433_Logseq(1)

  3. 嵌入部分四周加边框和阴影,即卡片式样式: Screenshot_20240522-144838_Obsidian(1)

  4. 行内嵌入文字加下划线。

  5. 同引用样式,在左侧或右侧加竖线: Screenshot_20240522-162332_Obsidian

个人倾向于使用第2或3种嵌入样式,跳转到原文的链接按钮及原文标题悬浮时在嵌入块右上角显示。